Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีเลื่อนด้านบนใน RecyclerView ด้วย LinearLayoutManager


ก่อนเข้าสู่ตัวอย่าง เราควรรู้ว่า Recycler view ใน Android คืออะไร มุมมองผู้รีไซเคิลเป็นเวอร์ชันขั้นสูงของมุมมองรายการ และทำงานตามรูปแบบการออกแบบที่ใส่มุมมอง การใช้มุมมองรีไซเคิลเราสามารถแสดงกริดและรายการสิ่งของ

ตัวอย่างนี้สาธิตวิธีการเลื่อนด้านบนใน RecyclerView ด้วย LinearLayoutManager โดยการสร้างแอปบันทึกนักเรียนที่สวยงามซึ่งแสดงชื่อนักเรียนตามอายุ

ขั้นตอนที่ 1 − สร้างโครงการใหม่ใน Android Studio ไปที่ไฟล์ ⇒ โครงการใหม่และกรอกรายละเอียดที่จำเป็นทั้งหมดเพื่อสร้างโครงการใหม่

ขั้นตอนที่ 2 − เปิด build.gradle และเพิ่มการพึ่งพาไลบรารีมุมมอง Recycler &มุมมองการ์ด

<ก่อนหน้า>ใช้ปลั๊กอิน:'com.android.application'android { compileSdkVersion 28 defaultConfig { applicationId "com.example.andy.tutorialspoint" minSdkVersion 19 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner " } buildTypes { รีลีส { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } การพึ่งพา { การนำไปใช้ fileTree (dir:'libs' รวมถึง:['*.jar'] ) การใช้งาน 'com.android.support:appcompat-v7:28.0.0' การใช้งาน 'com.android.support:design:28.0.0' การใช้งาน 'com.android.support.constraint:constraint-layout:1.1.3' 'com.android.support:cardview-v7:28.0.0' การใช้งาน 'com.android.support:recyclerview-v7:28.0.0' การทดสอบการใช้งาน 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner :1.0.2' androidTestImplementation 'ร่วม' m.android.support.test.espresso:espresso-core:3.0.2'}

ขั้นตอนที่ 3 − เพิ่มรหัสต่อไปนี้ใน res/layout/activity_main.xml

  

ในโค้ดด้านบน เราได้เพิ่มมุมมอง recycler ให้กับตัวจัดการหน้าต่างเป็นรูปแบบพาเรนต์ที่เกี่ยวข้องและเพิ่ม FloatingActionButton FloatingActionButton รองรับ CoordinatorLayout ดังนั้นเราจึงใช้รูปแบบหลักคือ CoordinatorLayout เมื่อคุณคลิกที่ FloatingActionButton มันจะเลื่อนไปที่ตำแหน่งบนสุด

ขั้นตอนที่ 4 − เพิ่มรหัสต่อไปนี้ใน src/MainActivity.java

แพ็คเกจ com.example.andy.tutorialspoint;นำเข้า android.annotation.TargetApi;นำเข้า android.os.Build;นำเข้า android.os.Bundle;นำเข้า android.support.annotation.RequiresApi;นำเข้า android.support.design.widget .FloatingActionButton;นำเข้า android.support.v7.app.AppCompatActivity นำเข้า android.support.v7.widget.DividerItemDecoration นำเข้า android.support.v7.widget.GridLayoutManager นำเข้า android.support.v7.widget.LinearLayoutManager นำเข้า android support.v7.widget.RecyclerView นำเข้า android.view.View นำเข้า android.widget.Button นำเข้า android.widget.LinearLayout นำเข้า android.widget.Toast นำเข้า java.util.ArrayList นำเข้า java.util.Collections นำเข้า java.util.Comparator; นำเข้า java.util.List; MainActivity คลาสสาธารณะขยาย AppCompatActivity { RecyclerView recyclerView ส่วนตัว; นักเรียนส่วนตัวAdapter studentAdapter; รายการส่วนตัว studentDataList =new ArrayList<>(); @TargetApi (Build.VERSION_CODES.O) @Override ป้องกัน void onCreate (Bundle saveInstanceState) { super.onCreate (savedInstanceState); setContentView(R.layout.activity_main); FloatingActionButton moveTop=findViewById(R.id.top); recyclerView =findViewById (R.id.recycler_view); studentAdapter =ใหม่ StudentAdapter (studentDataList, MainActivity.this); RecyclerView.LayoutManager manager =ใหม่ LinearLayoutManager (นี่); recyclerView.setLayoutManager (ผู้จัดการ); recyclerView.setAdapter (studentAdapter); StudentDataPrepare(); moveTop.setOnClickListener (View.OnClickListener ใหม่ () { @แทนที่โมฆะสาธารณะ onClick (ดู v) { recyclerView.smoothScrollToPosition (0); } }); } @RequiresApi (api =Build.VERSION_CODES.N) เป็นโมฆะส่วนตัว StudentDataPrepare () { studentData data =new studentData ("sai", 25); studentDataList.add(ข้อมูล); data =new studentData("สายราช", 25); studentDataList.add(ข้อมูล); data =new studentData("raghu", 20); studentDataList.add(ข้อมูล); data =new studentData("raj", 28); studentDataList.add(ข้อมูล); data =new studentData("amar", 15); studentDataList.add(ข้อมูล); data =new studentData("bapu", 19); studentDataList.add(ข้อมูล); data =new studentData("จันทรา", 52); studentDataList.add(ข้อมูล); data =new studentData("deraj", 30); studentDataList.add(ข้อมูล); data =new studentData("eshanth", 28); studentDataList.add(ข้อมูล); Collections.sort (studentDataList, new Comparator () { @Override เปรียบเทียบ int สาธารณะ (studentData o1, studentData o2) { return o1.name.compareTo (o2.name); } }); }}

ในโค้ดข้างต้น เราได้เพิ่มมุมมองผู้รีไซเคิลและ studentAdapter ในอะแดปเตอร์นักเรียนนั้นเราได้ส่ง studentDatalist เป็น arraylist รายการข้อมูลของนักเรียนประกอบด้วยชื่อนักเรียนและอายุ

เราใช้ smoothScrollToPosition() เพื่อเลื่อนตำแหน่งที่ 0 เราสามารถกำหนดตำแหน่งใดก็ได้ตามความต้องการของเรา ในตัวอย่างนี้ มันจะเลื่อนตำแหน่งศูนย์ (บนสุด) ดังที่แสดงด้านล่าง -

moveTop.setOnClickListener ( View.OnClickListener ใหม่ () { @แทนที่โมฆะสาธารณะ onClick (ดู v) { recyclerView.smoothScrollToPosition (0); }});

ขั้นตอนที่ 5 − ต่อไปนี้เป็นเนื้อหาของไฟล์ที่แก้ไข src/ StudentAdapter.java

แพ็คเกจ com.example.andy.tutorialspoint;นำเข้า android.graphics.Color;นำเข้า android.support.annotation.NonNull;นำเข้า android.support.v7.widget.RecyclerView;นำเข้า android.view.LayoutInflater;นำเข้า android.view .View;นำเข้า android.view.ViewGroup;นำเข้า android.widget.LinearLayout;นำเข้า android.widget.TextView;นำเข้า java.util.List;นำเข้า java.util.Random;Class StudentAdapter ขยาย RecyclerView.Adapter { รายการ studentDataList; StudentAdapter สาธารณะ (รายการ  studentDataList) { this.studentDataList=studentDataList; } @NonNull @Override สาธารณะ MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { ดูรายการView =LayoutInflater.from(viewGroup.getContext()) .inflate (R.layout.student_list_row, viewGroup, false); ส่งคืน MyViewHolder ใหม่ (itemView); } @แทนที่โมฆะสาธารณะ onBindViewHolder (MyViewHolder viewHolder, int i) { studentData data=studentDataList.get(i); สุ่ม rnd =สุ่มใหม่ (); int currentColor =Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256)); viewHolder.parent.setBackgroundColor(currentColor); viewHolder.name.setText(data.name); viewHolder.age.setText(String.valueOf(data.age)); } @Override int สาธารณะ getItemCount () { return studentDataList.size (); } คลาส MyViewHolder ขยาย RecyclerView.ViewHolder { ชื่อ TextView อายุ; ผู้ปกครอง LinearLayout; MyViewHolder สาธารณะ (ดู itemView) { super (itemView); parent=itemView.findViewById(R.id.parent); name=itemView.findViewById(R.id.name); อายุ=itemView.findViewById(R.id.age); } }}

ในคลาสอะแด็ปเตอร์ เรามีสี่วิธีดังแสดงด้านล่าง -

  • onCreateViewHolder() :- ใช้เพื่อสร้างมุมมองที่ยึดและส่งคืนมุมมอง

  • onBindViewHolder() - มันจะผูกกับเจ้าของมุมมองที่สร้างขึ้น

  • getItemCount() - มีขนาดของรายการ

  • คลาส MyViewHolder - เป็นคลาสภายในของ view holder ซึ่งขยายโดย RecyclerView.ViewHolder

ในการตั้งค่าพื้นหลังแบบสุ่มสำหรับรายการมุมมองรีไซเคิล เราได้สร้างสีสุ่มโดยใช้คลาสสุ่ม (ซึ่งเป็นคลาสที่กำหนดไว้ล่วงหน้าใน Android) และเพิ่มสีให้กับรายการพาเรนต์ของรายการมุมมองดังที่แสดงด้านล่าง -

สุ่ม rnd =สุ่มใหม่ ();int currentColor =Color.argb (255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));viewHolder.parent.setBackgroundColor(currentColor);

ขั้นตอนที่ 6 − ต่อไปนี้เป็นเนื้อหาที่แก้ไขของ xml res/layout/student_list_row.xml

    

ในมุมมองรายการด้านบน เราได้สร้างมุมมองข้อความสองมุมมองสำหรับชื่อและอายุภายในการ์ดวิว มุมมองการ์ดประกอบด้วยรัศมีมุมที่กำหนดไว้ล่วงหน้าและคุณสมบัติเงา ดังนั้นเราจึงใช้รัศมีมุมกับมุมมองการ์ด

ขั้นตอนที่ 7 − ต่อไปนี้เป็นเนื้อหาของไฟล์ที่แก้ไข src/ studentData.java

แพ็คเกจ com.example.andy.tutorialspoint;class studentData { ชื่อสตริง; อายุภายใน; ข้อมูลนักศึกษาสาธารณะ (ชื่อสตริง อายุ int) { this.name=name; this.age=age; }}

ในรหัสข้างต้นแจ้งเกี่ยวกับวัตถุข้อมูลนักเรียน มาลองเรียกใช้แอปพลิเคชันของคุณกัน ฉันคิดว่าคุณได้เชื่อมต่ออุปกรณ์มือถือ Android จริงกับคอมพิวเตอร์ของคุณ ในการรันแอพจาก android studio ให้เปิดไฟล์กิจกรรมของโปรเจ็กต์แล้วคลิก Runicon จากแถบเครื่องมือ เลือกอุปกรณ์มือถือของคุณเป็นตัวเลือก แล้วตรวจสอบอุปกรณ์มือถือของคุณซึ่งจะแสดงหน้าจอเริ่มต้นของคุณ -

วิธีเลื่อนด้านบนใน RecyclerView ด้วย LinearLayoutManager

ตอนนี้ปุ่มนาฬิกาสีเหลืองเลื่อนไปที่ด้านบนของ recyclerview มันจะแสดงผลดังที่แสดงด้านล่าง -

วิธีเลื่อนด้านบนใน RecyclerView ด้วย LinearLayoutManager