Android Kotlin Fundamentals 07.3: GridLayout مع RecyclerView

يشكّل هذا الدرس التطبيقي جزءًا من الدورة التدريبية لأساسيات Android Kotlin. ستحصل على أقصى قيمة ممكنة من هذه الدورة التدريبية إذا كنت تستخدم الدروس التطبيقية حول الترميز بشكل متسلسل. يتم إدراج جميع الدروس التطبيقية حول ترميز الدورات التدريبية في الصفحة المقصودة لدروس الترميز Android Kotlin Fundamentals.

مقدمة

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

يتوفّر في تطبيق RecyclerView مديرو تنسيق جاهزون لحالات الاستخدام الشائعة. على سبيل المثال، يمكنك استخدام LinearLayout للقوائم الأفقية والرأسية، أو GridLayout للشبكات. بالنسبة إلى حالات الاستخدام الأكثر تعقيدًا، يجب تنفيذ LayoutManager مخصّص.

في هذا الدرس التطبيقي حول الترميز، ستتعلّم طريقة عرض البيانات باستخدام تنسيق الشبكة بدلاً من القائمة، استنادًا إلى تطبيق تتبّع النوم من الدرس التطبيقي السابق. (إذا لم يكن لديك التطبيق من الدرس التطبيقي السابق، يمكنك تنزيل رمز التفعيل لهذا الدرس التطبيقي حول الترميز).

ما يجب معرفته

ويجب أن تكون على دراية بما يلي:

  • إنشاء واجهة مستخدم أساسية باستخدام Activity وFragments وViews
  • التنقُّل بين الأجزاء واستخدام safeArgs لتمرير البيانات بين الأجزاء
  • عرض النماذج وعرض مصانع النماذج والتحولات
  • LiveData والمراقبون
  • كيفية إنشاء قاعدة بيانات Room وإنشاء داودا وتحديد الكيانات
  • كيفية استخدام الكوروتين في مهام قاعدة البيانات والمهام الأخرى القديمة
  • كيفية تنفيذ RecyclerView أساسي باستخدام Adapter وViewHolder وتنسيق العناصر
  • كيفية تنفيذ ربط البيانات للحساب RecyclerView
  • كيفية إنشاء واستخدام محولات الربط لتحويل البيانات

ما ستتعرَّف عليه

  • كيفية استخدام LayoutManager مختلف لتغيير كيفية عرض البيانات في RecyclerView
  • إِزَّايْ يِتِمّْ إِنْشَاءْ تَنْظِيمْ شَبَكْ لِبَيَانَاتِ النُّومْ

الإجراءات التي ستنفذّها

  • الاستفادة من تطبيق تتبُّع النوم استنادًا إلى الدرس التطبيقي السابق حول الترميز في هذه السلسلة
  • يمكنك استبدال قائمة بيانات النوم التي يعرضها RecyclerView في التطبيق بشبكة من بيانات النوم.

يحتوي تطبيق تتبُّع النوم على شاشتين، ممثَّلة بأجزاء، كما هو موضّح في الشكل التالي.

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

يستخدم هذا التطبيق بنية مبسّطة مع وحدة تحكم واجهة مستخدم ونموذج عرض وLiveData وقاعدة بيانات Room للاحتفاظ ببيانات النوم.

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

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

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager هو مدير التنسيق الأكثر شيوعًا ومباشرةً في RecyclerView، ويتوافق مع كل من الوضع الأفقي والرأسي للعروض الفرعية. على سبيل المثال، يمكنك استخدام LinearLayoutManager لإنشاء منصة عرض بعناصر متغيّرة للصور التي ينتقل المستخدم إليها أفقيًا.

تنسيق الشبكة

تحتاج حالة استخدام أخرى شائعة إلى عرض الكثير من البيانات للمستخدم، ويمكنك إجراء ذلك باستخدام GridLayout. يوضِّح GridLayoutManager للسمة RecyclerView البيانات كشبكة قابلة للتمرير، كما هو موضَّح أدناه.

من منظور التصميم، يُعدّ GridLayout أفضل خيار للقوائم التي يمكن تمثيلها كرموز أو صور، مثل القوائم داخل تطبيق تصفح الصور. في تطبيق تتبُّع النوم، يمكنك عرض كل ليلة نومك كشبكة من الرموز الكبيرة. سيمنح هذا التصميم المستخدم نظرة عامة على جودة النوم في نظرة سريعة.

كيفية عرض GridLayout للعناصر

يتم ترتيب العناصر في شبكة من الصفوف والأعمدة من GridLayout. بافتراض أنّه يتم الانتقال للأسفل أو للأعلى (في هذه الحالة، يعادل امتداد واحد عرض عمود واحد.)

في المثالين الأولين الموضّحين في ما يلي، يتألف كل صف من ثلاث امتدادات. يحدِّد GridLayoutManager تلقائيًا كل عنصر في فترة زمنية واحدة حتى تحديد عدد الفترات التي تحدّدها. وعند الوصول إلى عدد الامتدادات، يتم لفها في السطر التالي.

بشكلٍ تلقائي، يستهلك كل عنصر امتدادًا واحدًا، ولكن يمكنك تكبير العنصر عن طريق تحديد عدد الامتدادات التي يجب إشغالها. على سبيل المثال، يشغل العنصر العلوي في أقصى يسار الشاشة (الموضح أدناه) ثلاث فترات زمنية.

في هذه المَهمّة، يمكنك قطع RecyclerView التي أكملتها في التمرين الأخير وتعديلها لعرض البيانات باستخدام GridLayoutManager. يمكنك مواصلة استخدام تطبيق تتبُّع النوم من الدرس التطبيقي السابق، أو يمكنك تنزيل RecyclerViewNetworkLayout-Starter app من GitHub.

الخطوة 1: تغيير "مدير التنسيق"

  1. إذا لزم الأمر، نزِّل تطبيق RecyclerViewNetworkLayout-Starter لهذا الدرس التطبيقي من GitHub وافتح المشروع في "استوديو Android".
  2. افتح ملف التنسيق fragment_sleep_tracker.xml.
  3. إزالة مدير التنسيق من تعريف sleep_list RecyclerView.

الرمز المطلوب حذفه:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. فتح SleepTrackerFragment.kt
  2. في OnCreateView()، مباشرةً قبل عبارة return، أنشئ قطاعًا جديدًا من الأعلى إلى الأسفل GridLayoutManager مع 3 مسافات.

    تستخدم أداة الإنشاء GridLayoutManager ما يصل إلى أربع وسيطات، وهي السياق، وهو activity، وحدود الأرقام (الأعمدة في التنسيق العمودي التلقائي) والاتجاه (الوضع التلقائي) وما إذا كان تنسيق عكسي (الإعداد التلقائي هو false). 
val manager = GridLayoutManager(activity, 3)
  1. أسفل هذا السطر، اطلب من RecyclerView استخدام قيمة GridLayoutManager هذه. السمة RecyclerView في العنصر المُلزِم وتُسمى sleepList. (راجِع fragment_sleep_tracker.xml.)
binding.sleepList.layoutManager = manager

الخطوة 2: تغيير التنسيق

التنسيق الحالي في list_item_sleep_night.xml يعرض البيانات باستخدام صف كامل لكل ليلة. في هذه الخطوة، يمكنك تحديد تنسيق مربّع عنصر أصغر.

  1. فتح list_item_sleep_night.xml
  2. احذف TextView sleep_length، لأن التصميم الجديد لا يحتاج إليه.
  3. حرِّك quality_string TextView بحيث يتم عرضها تحت ImageView. لإجراء ذلك، عليك تحديث بعض النقاط. في ما يلي التنسيق النهائي لجهاز quality_string TextView:
<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />
  1. تحقَّق في عرض التصميم من وضع quality_string TextView أسفل ImageView.

لا يلزمك تغيير أي شيء في Adapter لأنك استخدمت ربط البيانات. من المفترض أن يعمل الرمز فقط، ويجب أن تظهر قائمتك كشبكة.

  1. شغِّل التطبيق ولاحظ كيفية عرض بيانات النوم في شبكة.

    يُرجى العِلم بأن ConstraintLayout لا يزال يأخذ العرض بالكامل. تعرض السمة GridLayoutManager عرضًا ثابتًا استنادًا إلى مدى امتداده. يبذل GridLayoutManager قصارى جهده لتلبية كل القيود عند توسيع نطاق الشبكة وإضافة عناصر بيضاء أو اقتصاص العناصر.
  1. في SleepTrackerFragment، في الرمز الذي يُنشئ GridLayoutManager، غيّر عدد الامتدادات لـ GridLayoutManger إلى 1. شغِّل التطبيق وستحصل على قائمة بذلك.
val manager = GridLayoutManager(activity, 1)
  1. يمكنك تغيير عدد فترات الاستخدام من GridLayoutManager إلى 10 وتشغيل التطبيق. وتجدر الإشارة إلى أنّ GridLayoutManager سيناسب 10 عناصر في صف واحد، ولكن يتم اقتصاص العناصر الآن.
  2. غيِّر العدِّد إلى 5 واتجاهه إلى GridLayoutManager.VERTICAL. شغِّل التطبيق ولاحظ كيفية التمرير الأفقي. ستحتاج إلى تصميم مختلف لتبدو بمظهر جيد.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. لا تنسَ ضبط العدّ التنازلي على 3 والاتجاه إلى الوضع العمودي.

مشروع "استوديو Android": RecyclerViewNetworkLayout
  • يدير مديرو التنسيق طريقة ترتيب العناصر في RecyclerView.
  • يأتي نظام التشغيل RecyclerView مزوّدًا بمدراء تنسيق جاهزين لحالات الاستخدام الشائعة، مثل LinearLayout للقوائم الأفقية والرأسية، وGridLayout للشبكات.
  • بالنسبة إلى حالات الاستخدام الأكثر تعقيدًا، يتم تنفيذ LayoutManager مخصص.
  • من منظور التصميم، من الأفضل استخدام GridLayout لقوائم العناصر التي يمكن تمثيلها كرموز أو صور.
  • يتم ترتيب العناصر في شبكة من الصفوف والأعمدة من GridLayout. بافتراض أنه يتم الانتقال عموديًا، يشغل كل عنصر في الصف ما يُعرف باسم "&&;;span;"
  • ويمكنك تخصيص عدد العناصر التي يحصل عليها العنصر، مما يؤدي إلى إنشاء شبكات أكثر إثارة بدون الحاجة إلى استخدام مدير تنسيق مخصص.
  • أنشئ تنسيق عنصر لعنصر واحد في الشبكة، وسيهتم مدير التنسيق بترتيب العناصر.
  • ويمكنك ضبط LayoutManager للسمة RecyclerView، إما في ملف تنسيق XML الذي يحتوي على العنصر <RecyclerView> أو آليًا.

دورات Udacity:

مستندات مطوّر برامج Android:

يسرد هذا القسم المهام الدراسية المحتملة للطلاب الذين يعملون من خلال هذا الدرس التطبيقي حول الترميز في إطار دورة تدريبية يُديرها معلِّم. يجب أن ينفِّذ المعلّم ما يلي:

  • يمكنك تخصيص واجب منزلي إذا لزم الأمر.
  • التواصل مع الطلاب بشأن كيفية إرسال الواجبات المنزلية
  • وضع درجات للواجبات المنزلية.

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

إذا كنت تستخدم هذا الدرس التطبيقي بنفسك، يمكنك استخدام هذه الواجبات المنزلية لاختبار معلوماتك.

الإجابة عن هذه الأسئلة

السؤال 1

أي مما يلي مديرو التنسيق متاح من Android؟ يُرجى اختيار كل الإجابات المناسبة.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

السؤال 2

ما هو &&;;span"?

▢ حجم الشبكة التي تم إنشاؤها بواسطة GridLayoutManager

▢ عرض عمود في الشبكة.

▢ سمات السلعة في شبكة.

▢ عدد الأعمدة في شبكة لها اتجاه رأسي.

بدء الدرس التالي: 7.4: التفاعل مع عناصر RecyclerView