إنشاء قوائم ديناميكية باستخدام RecyclerView جزء من Android Jetpack.

تجربة طريقة ComposeAllowed

Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية استخدام التنسيقات في Compose.

القوائم والشبكات الكسولة ←

تُسهِّل ميزة RecyclerView عرض مجموعات كبيرة من البيانات بكفاءة. أنت توفر البيانات وتحديد كيف يبدو كل عنصر، ومكتبة RecyclerView يقوم بإنشاء العناصر ديناميكيًا عند الحاجة إليها.

كما يوحي الاسم، تعمل RecyclerView على إعادة تدوير هذه العناصر الفردية. عندما يتم تمرير العنصر خارج الشاشة، لا تتلف RecyclerView طريقة العرض. بدلاً من ذلك، تعيد RecyclerView استخدام العرض للعناصر الجديدة التي تم تمريرها على الشاشة. تعمل RecyclerView على تحسين الأداء واستجابة التطبيق، وتقليل استهلاك الطاقة.

الفئات الرئيسية

تعمل عدة فئات معًا لإنشاء قائمتك الديناميكية.

• RecyclerView هو ViewGroup الذي يحتوي على المشاهدات بشكل يتوافق مع بياناتك. هذه طريقة العرض نفسها، لذا يمكنك إضافة RecyclerView إلى التخطيط بالطريقة التي تضيف بها أي عنصر آخر في واجهة المستخدم.

• يتم تحديد كل عنصر منفرد في القائمة بواسطة كائن view hold. فعندما إنشاء مالك الملف الشخصي، فلا توجد أي بيانات مرتبطة به. بعد يتم إنشاء صاحب الملف الشخصي، فإن RecyclerView يربطه ببياناته. إِنْتَ وتحديد عنصر العرض من خلال تمديد RecyclerView.ViewHolder

• تطلب RecyclerView المشاهدات وتربط المشاهدات ببياناتها، من خلال استدعاء طرق في المحوِّل. يمكنك تعريف المحول من خلال تمديد RecyclerView.Adapter

• يرتب مدير التنسيق العناصر الفردية في قائمتك. يمكنك استخدام أحد مديري التخطيطات المتوفرة في مكتبة RecyclerView، أو يمكنك وتعريفها بنفسك. تعتمد جميع مديري التخطيطات على تصميم LayoutManager حصة تجريدية.

يمكنك رؤية كيفية توافق جميع القطع معًا في نموذج تطبيق RecyclerView. (Kotlin) أو نموذج تطبيق RecyclerView (Java):

خطوات تنفيذ RecyclerView

إذا كنت ستستخدم RecyclerView، فهناك بعض الأمور التي يتعين عليك القيام بها. للاطلاع على شرح مفصّل في الأقسام التالية.

1. حدِّد شكل القائمة أو الشبكة. عادةً، يمكنك استخدام أحد مديري التخطيطات القياسية لمكتبة RecyclerView.

2. تصميم كيف يبدو وسلوك كل عنصر في القائمة. مقرها في هذا التصميم، نمد فئة ViewHolder. إصدار ViewHolder الذي تستخدمه جميع الوظائف لعناصر القائمة. صاحب الملف الشخصي هو برنامج تضمين حول View، وتتم إدارة هذا العرض بواسطة RecyclerView.

3. حدِّد Adapter الذي يربط بياناتك بملفات ViewHolder الشخصية.

هناك أيضًا تخصيص متقدم الخيارات التي تتيح لك تخصيص استمتِع بأداة RecyclerView وفقًا لاحتياجاتك المحددة.

تخطيط التصميم

يتم ترتيب العناصر في RecyclerView بواسطة LayoutManager الصف. توفر مكتبة RecyclerView ثلاثة مديري تخطيط تتعامل مع مواقف التخطيط الأكثر شيوعًا:

• LinearLayoutManager ترتب العناصر في قائمة أحادية الأبعاد.
• GridLayoutManager وترتب العناصر في شبكة ثنائية الأبعاد:
  • إذا تم ترتيب الشبكة عموديًا، تحاول GridLayoutManager جعل كل العناصر في كل صف لها نفس العرض والارتفاع، ولكن صفوف مختلفة يمكن أن يكون لها ارتفاعات مختلفة.
  • إذا تم ترتيب الشبكة أفقيًا، تحاول GridLayoutManager جعل كل العناصر في كل عمود لها نفس العرض والارتفاع، ولكن تختلف يمكن أن يكون للأعمدة عرض مختلف.
• StaggeredGridLayoutManager تشبه السمة GridLayoutManager، لكنها لا تتطلب أن تكون العناصر في صف لها نفس الارتفاع (للشبكات العمودية) أو العناصر الموجودة في نفس العمود لها نفس العرض (للشبكات الأفقية). والنتيجة هي أن العناصر في صف أو عمود إلى إزاحة من بعضها البعض.

تحتاج أيضًا إلى تصميم تخطيط العناصر الفردية. أنت بحاجة إلى هذا عند تصميم حامل العرض، كما هو موضح في القسم التالي.

تركيب المحوّل وحامل العرض

بعد تحديد التنسيق، يجب تنفيذ Adapter ViewHolder تعمل هاتان الفئتان معًا لتحديد كيفية تخزين بياناتك المعروضة. ViewHolder هو برنامج التفاف حول View يحتوي على التخطيط لعنصر فردي في القائمة. ينشئ Adapter ViewHolder حسب الحاجة وكذلك تعيين البيانات لهذه طرق العرض. عملية يُعرف ربط طرق العرض ببياناتها باسم الربط.

عند تعريف المحوّل، يتم إلغاء ثلاث طرق رئيسية:

• onCreateViewHolder(): تستدعي "RecyclerView" هذه الطريقة متى يحتاج إلى إنشاء ViewHolder جديد. تنشئ الطريقة المتغير وتهيئه ViewHolder وView المرتبط به، ولكن لا يملأ بيانات الملف الشخصي المحتوى: لم يتم ربط ViewHolder ببيانات محدَّدة بعد.

• onBindViewHolder(): تستدعي "RecyclerView" هذه الطريقة لربط ViewHolder بالبيانات. تشير رسالة الأشكال البيانية لجلب البيانات المناسبة واستخدام البيانات لملء طريقة العرض تخطيط صاحبه. على سبيل المثال، إذا عرضت السمة RecyclerView قائمة بالأسماء، قد تعثر الطريقة على الاسم المناسب في القائمة وتملأ طريقة العرض التطبيق المصغَّر TextView للمالك.

• getItemCount(): تستدعي RecyclerView هذه الطريقة للحصول على حجم مجموعة البيانات. على سبيل المثال: في تطبيق دفتر العناوين، فقد يكون هذا هو العدد الإجمالي للعناوين. وتستخدم RecyclerView هذا العنصر لتحديد متى لا يكون هناك المزيد من العناصر التي يمكن المعروضة.

في ما يلي مثال نموذجي لمحوّل بسيط مزوّد بـ ViewHolder مدمج وتعرض قائمة بالبيانات. في هذه الحالة، تعرض RecyclerView قائمة بسيطة من عناصر النص. يتم تمرير المحوّل مصفوفة من السلاسل التي تحتوي على النص. لعناصر ViewHolder.

class CustomAdapter(private val dataSet: ArrayS<tring)> :
        RecyclerView.AdapterC<ustomAdapter.ViewHolder(>) {

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView

        init {
            // Define click listener for the ViewHolder's View
            textView = view.findViewById(R.id.textView)
        }
    }

    // Create new views (invoked by the layout manager)
    override fun onCreateViewHolder(viewGroup: ViewGroup, viewType: Int): ViewHolder {
        // Create a new view, which defines the UI of the list item
        val view = LayoutInflater.from(viewGroup.context)
                .inflate(R.layout.text_row_item, viewGroup, false)

        return ViewHolder(view)
    }

    // Replace the contents of a view (invoked by the layout manager)
    override fun onBindViewHolder(viewHolder: ViewHolder, position: Int) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.textView.text = dataSet[position]
    }

    // Return the size of your dataset (invoked by the layout manager)
    override fun getItemCount() = dataSet.size

}

public class CustomAdapter extends RecyclerView.AdapterC<ustomAdapter.ViewHolder >{

    private String[] localDataSet;

    /**
     * Provide a reference to the type of views that you are using
     * (custom ViewHolder)
     */
    public static class ViewHolder extends RecyclerView.ViewHolder {
        private final TextView textView;

        public ViewHolder(View view) {
            super(view);
            // Define click listener for the ViewHolder's View

            textView = (TextView) view.findViewById(R.id.textView);
        }

        public TextView getTextView() {
            return textView;
        }
    }

    /**
     * Initialize the dataset of the Adapter
     *
     * @param dataSet String[] containing the data to populate views to be used
     * by RecyclerView
     */
    public CustomAdapter(String[] dataSet) {
        localDataSet = dataSet;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        // Create a new view, which defines the UI of the list item
        View view = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.text_row_item, viewGroup, false);

        return new ViewHolder(view);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, final int position) {

        // Get element from your dataset at this position and replace the
        // contents of the view with that element
        viewHolder.getTextView().setText(localDataSet[position]);
    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return localDataSet.length;
    }
}

ويتم تحديد التنسيق لكل عنصر عرض في ملف تنسيق XML، كالمعتاد. في هذه الحالة، يحتوي التطبيق على ملف text_row_item.xml على النحو التالي:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/list_item_height"
    android:layout_marginLeft="@dimen/margin_medium"
    android:layout_marginRight="@dimen/margin_medium"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/element_text"/>
</FrameLayout>

الخطوات التالية

يوضح مقتطف الرمز التالي كيفية استخدام RecyclerView.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val dataset = arrayOf("January", "February", "March")
        val customAdapter = CustomAdapter(dataset)

        val recyclerView: RecyclerView = findViewById(R.id.recycler_view)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = customAdapter

    }

}

RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.layoutManager = new LinearLayoutManager(this)
recyclerView.setAdapter(customAdapter);

توفّر المكتبة أيضًا عدة طرق لتخصيص عملية التنفيذ. لمزيد من المعلومات، للحصول على معلومات، يُرجى الاطّلاع على Advanced RecyclerView المتقدمة التخصيص.

مصادر إضافية

لمزيد من المعلومات عن إجراء الاختبارات على Android، يُرجى الرجوع إلى المراجع التالية.

نماذج التطبيقات

• نموذج تطبيق RecyclerView (Kotlin)

• نموذج تطبيق RecyclerView (Java)

• تطبيق Sunflower التجريبي