‫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 وإنشاء كائن وصول إلى البيانات (DAO) وتحديد الكيانات
  • كيفية استخدام الروتينات المشتركة لمهام قاعدة البيانات والمهام الأخرى التي تستغرق وقتًا طويلاً
  • كيفية تنفيذ 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

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

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

طريقة ترتيب العناصر في GridLayout

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

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

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

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

الخطوة 1: تغيير LayoutManager

  1. إذا لزم الأمر، نزِّل تطبيق RecyclerViewGridLayout-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. احذف sleep_length TextView لأنّ التصميم الجديد لا يحتاج إليه.
  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": RecyclerViewGridLayout
  • تتحكّم أدوات إدارة التنسيق في كيفية ترتيب العناصر في RecyclerView.
  • تتضمّن RecyclerView أدوات إدارة تخطيط جاهزة للاستخدام لحالات الاستخدام الشائعة، مثل LinearLayout للقوائم الأفقية والعمودية، وGridLayout للشبكات.
  • بالنسبة إلى حالات الاستخدام الأكثر تعقيدًا، يمكنك تنفيذ LayoutManager مخصّصة.
  • من منظور التصميم، من الأفضل استخدام GridLayout لقوائم العناصر التي يمكن تمثيلها كرموز أو صور.
  • ترتّب GridLayout العناصر في شبكة من الصفوف والأعمدة. بافتراض التمرير للأعلى أو للأسفل، يشغل كل عنصر في الصف ما يُعرف باسم "مدى".
  • يمكنك تخصيص عدد المساحات التي يشغلها العنصر، ما يتيح إنشاء شبكات أكثر إثارة للاهتمام بدون الحاجة إلى مدير تنسيق مخصّص.
  • أنشئ تخطيطًا لعنصر واحد في الشبكة، وسيتولّى مدير التخطيط ترتيب العناصر.
  • يمكنك ضبط LayoutManager لعنصر RecyclerView إما في ملف تنسيق XML الذي يحتوي على العنصر <RecyclerView> أو بشكل آلي.

دورات Udacity التدريبية:

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

يسرد هذا القسم مهامًا منزلية محتملة للطلاب الذين يعملون على هذا الدرس التطبيقي العملي كجزء من دورة تدريبية يقودها مدرّب. على المعلّم تنفيذ ما يلي:

  • حدِّد واجبًا منزليًا إذا لزم الأمر.
  • توضيح كيفية إرسال الواجبات المنزلية للطلاب
  • وضع درجات للواجبات المنزلية

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

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

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

السؤال 1

أي مما يلي يندرج ضمن أدوات إدارة التنسيق التي يوفّرها Android؟ يُرجى اختيار جميع الإجابات المناسبة.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

السؤال 2

ما هو "النطاق"؟

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

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

▢ أبعاد عنصر في شبكة

▢ عدد الأعمدة في شبكة ذات اتجاه عمودي

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