Android Kotlin Fundamentals 07.3: GridLayout با RecyclerView

این کد لبه بخشی از دوره آموزشی Android Kotlin Fundamentals است. اگر به ترتیب روی کدها کار کنید، بیشترین ارزش را از این دوره خواهید گرفت. همه کد لبه های دوره در صفحه فرود کد لبه های Android Kotlin Fundamentals فهرست شده اند.

مقدمه

یکی از نقاط قوت اصلی RecyclerView این است که به شما امکان می دهد از مدیران طرح برای کنترل و اصلاح استراتژی طرح بندی خود استفاده کنید. یک LayoutManager نحوه چیدمان موارد موجود در RecyclerView را مدیریت می کند.

RecyclerView با مدیران طرح‌بندی خارج از جعبه برای موارد استفاده رایج ارائه می‌شود. برای مثال می‌توانید از LinearLayout برای لیست‌های افقی و عمودی یا GridLayout برای شبکه‌ها استفاده کنید. برای موارد استفاده پیچیده تر، باید یک LayoutManager سفارشی پیاده سازی کنید.

در این کد لبه، می‌آموزید که چگونه داده‌ها را با استفاده از طرح‌بندی شبکه‌ای به جای فهرست، بر اساس برنامه ردیاب خواب از کدلب قبلی نمایش دهید. (اگر برنامه نسخه قبلی را ندارید، می توانید کد شروع را برای این کد لبه دانلود کنید.)

آنچه از قبل باید بدانید

باید با:

  • ساخت یک رابط کاربری پایه با استفاده از Activity ، Fragments و Views
  • پیمایش بین قطعات و استفاده از safeArgs برای انتقال داده بین قطعات
  • مشاهده مدل ها، مشاهده کارخانه های مدل سازی و تحولات
  • LiveData و ناظران آنها
  • چگونه یک پایگاه داده Room ایجاد کنیم، یک DAO ایجاد کنیم و موجودیت ها را تعریف کنیم
  • نحوه استفاده از کوروتین ها برای وظایف پایگاه داده و سایر کارهای طولانی مدت
  • نحوه پیاده سازی RecyclerView اولیه با Adapter ، ViewHolder و طرح بندی آیتم
  • نحوه اجرای اتصال داده برای RecyclerView
  • نحوه ایجاد و استفاده از آداپتورهای اتصال برای تبدیل داده ها

چیزی که یاد خواهید گرفت

  • نحوه استفاده از LayoutManager متفاوت برای تغییر نحوه نمایش داده های خود در RecyclerView
  • چگونه یک طرح بندی شبکه ای برای داده های خواب خود ایجاد کنید

کاری که خواهی کرد

  • بر اساس برنامه خواب ردیاب از کدهای قبلی در این سری ساخته شده است.
  • لیست داده های خواب نمایش داده شده توسط RecyclerView در برنامه را با شبکه ای از داده های خواب جایگزین کنید.

برنامه ردیاب خواب دارای دو صفحه است که با قطعات نشان داده شده است، همانطور که در شکل زیر نشان داده شده است.

اولین صفحه نمایش داده شده در سمت چپ دارای دکمه هایی برای شروع و توقف ردیابی است. صفحه نمایش برخی از داده های خواب کاربر را نشان می دهد. دکمه Clear تمام داده هایی را که برنامه برای کاربر جمع آوری کرده است برای همیشه حذف می کند. صفحه دوم، نشان داده شده در سمت راست، برای انتخاب رتبه بندی کیفیت خواب است.

این برنامه از معماری ساده شده با کنترلر رابط کاربری، مدل نمایش و 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 به روز می کنید. می‌توانید به استفاده از برنامه Sleep-Tracker از کد لبه قبلی ادامه دهید، یا می‌توانید برنامه RecyclerViewGridLayout-Starter را از GitHub دانلود کنید.

مرحله 1: LayoutManager را تغییر دهید

  1. در صورت نیاز، برنامه RecyclerViewGridLayout-Starter را برای این Codelab از GitHub دانلود کنید و پروژه را در Android Studio باز کنید.
  2. فایل طرح بندی fragment_sleep_tracker.xml را باز کنید.
  3. مدیر layout را از تعریف 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 در شی binding است و 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. در نمای Design بررسی کنید که 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 و جهت را روی عمودی تنظیم کنید!

پروژه اندروید استودیو: RecyclerViewGridLayout

  • مدیران Layout نحوه چیدمان موارد موجود در RecyclerView را مدیریت می کنند.
  • RecyclerView با مدیران طرح‌بندی خارج از جعبه برای موارد استفاده رایج مانند LinearLayout برای لیست‌های افقی و عمودی و GridLayout برای شبکه‌ها ارائه می‌شود.
  • برای موارد استفاده پیچیده تر، یک LayoutManager سفارشی را پیاده سازی کنید.
  • از منظر طراحی، GridLayout بهترین استفاده را برای لیستی از مواردی است که می توانند به عنوان نماد یا تصویر نمایش داده شوند.
  • GridLayout موارد را در شبکه ای از ردیف ها و ستون ها مرتب می کند. با فرض اسکرول عمودی، هر آیتم در یک ردیف چیزی را که "span" نامیده می شود، می گیرد.
  • می‌توانید تعداد دهانه‌های یک مورد را سفارشی کنید و شبکه‌های جالب‌تری را بدون نیاز به مدیر طرح‌بندی سفارشی ایجاد کنید.
  • یک طرح بندی آیتم برای یک آیتم در شبکه ایجاد کنید و مدیر چیدمان مرتب کردن آیتم ها را بر عهده می گیرد.
  • می‌توانید LayoutManager برای RecyclerView در فایل طرح‌بندی XML که حاوی عنصر <RecyclerView> است، یا به صورت برنامه‌ریزی تنظیم کنید.

دوره های بی ادبی:

مستندات توسعه دهنده اندروید:

این بخش، تکالیف احتمالی را برای دانش‌آموزانی که در این آزمایشگاه کد به عنوان بخشی از دوره‌ای که توسط یک مربی هدایت می‌شود، کار می‌کنند، فهرست می‌کند. این وظیفه مربی است که موارد زیر را انجام دهد:

  • در صورت نیاز تکالیف را تعیین کنید.
  • نحوه ارسال تکالیف را با دانش آموزان در میان بگذارید.
  • تکالیف را نمره دهید.

مربیان می‌توانند از این پیشنهادات به اندازه‌ای که می‌خواهند استفاده کنند، و باید با خیال راحت هر تکلیف دیگری را که فکر می‌کنند مناسب است، محول کنند.

اگر به تنهایی از طریق این کدها کار می کنید، از این تکالیف برای آزمایش دانش خود استفاده کنید.

به این سوالات پاسخ دهید

سوال 1

کدام یک از موارد زیر توسط Android ارائه شده است؟ همه موارد کاربردی را انتخاب کنید.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

سوال 2

"span" چیست؟

▢ اندازه یک شبکه ایجاد شده توسط GridLayoutManager .

▢ عرض یک ستون در شبکه.

▢ ابعاد یک آیتم در یک شبکه.

▢ تعداد ستون ها در یک شبکه که جهت عمودی دارد.

درس بعدی را شروع کنید: 7.4: تعامل با موارد RecyclerView