ตัวอย่างกริด Android อย่างง่ายโดยใช้ RecyclerView พร้อม GridLayoutManager

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

ตัวอย่างนี้สาธิตวิธีผสานรวมมุมมองรีไซเคิลกับตัวจัดการเลย์เอาต์ Grid โดยการสร้างแอปบันทึกนักเรียนที่สวยงามซึ่งแสดงชื่อนักเรียนตามอายุ

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

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

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

ในโค้ดด้านบน เราได้เพิ่มมุมมอง recycler ให้กับตัวจัดการหน้าต่างเป็นรูปแบบหลักที่เกี่ยวข้อง

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

แพ็คเกจ com.example.andy.tutorialspoint;นำเข้า android.annotation.TargetApi;นำเข้า android.os.Build;นำเข้า android.os.Bundle;นำเข้า android.support.annotation.RequiresApi;นำเข้า 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 นำเข้าจาวา util.ArrayList;import java.util.Collections;import java.util.Comparator;import 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); recyclerView =findViewById (R.id.recycler_view); studentAdapter =ใหม่ StudentAdapter (studentDataList); RecyclerView.LayoutManager manager =ใหม่ GridLayoutManager (นี่ 2); recyclerView.setLayoutManager (ผู้จัดการ); recyclerView.addItemDecoration (ใหม่ DividerItemDecoration (นี่คือ LinearLayoutManager.VERTICAL)); recyclerView.setAdapter (studentAdapter); StudentDataPrepare(); } @RequiresApi(api =Build.VERSION_CODES.N) ส่วนตัว void 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 ในรายการข้อมูลนักเรียนประกอบด้วยชื่อของนักเรียนและอายุ

ในการรับกริด เราต้องใช้ตัวจัดการเลย์เอาต์กริดตามที่แสดงด้านล่าง -

RecyclerView.LayoutManager manager =ใหม่ GridLayoutManager(นี่ 2);

ในโค้ดด้านบนนี้ เราได้ใช้ตัวจัดการเลย์เอาต์เป็น GridlayoutManger และเพิ่มเซลล์เป็น 2. ดังนั้น มันจะแสดงผลลัพธ์ด้วยสองกริดในแต่ละแถว

เพื่อเปรียบเทียบรายการมุมมองรีไซเคิล เราได้ใช้เฟรมเวิร์กการรวบรวมและวิธีการจัดเรียงดังแสดงด้านล่าง -

Collections.sort(studentDataList, new Comparator() { @Override public int comparison(studentData o1, studentData o2) { return o1.name.compareTo(o2.name); }});

ในโค้ดด้านบนนี้ เรากำลังเปรียบเทียบองค์ประกอบโดยใช้ชื่อ

ขั้นตอนที่ 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); ชื่อ =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 =ชื่อ; this.age =อายุ; }}

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