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 انجام دهید. همانطور که در زیر نشان داده شده است، GridLayoutManager برای RecyclerView داده ها را به عنوان یک شبکه قابل پیمایش قرار می دهد.

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

چگونه GridLayout موارد را چیدمان می کند

GridLayout موارد را در شبکه ای از ردیف ها و ستون ها مرتب می کند. با فرض اسکرول عمودی، به طور پیش‌فرض، هر آیتم در یک ردیف یک «span» می‌گیرد. (در این حالت، یک دهانه معادل عرض یک ستون است.)

در دو مثال اول نشان داده شده در زیر، هر ردیف از سه دهانه تشکیل شده است. به‌طور پیش‌فرض، GridLayoutManager هر آیتم را در یک بازه تا زمانی که شما مشخص می‌کنید، قرار می‌دهد. وقتی به تعداد دهانه رسید، به خط بعدی می‌پیچد.

به‌طور پیش‌فرض، هر آیتم یک دهانه را اشغال می‌کند، اما می‌توانید با تعیین چند دهانه، یک مورد را وسیع‌تر کنید. برای مثال، آیتم بالایی در سمت راست ترین صفحه (نشان داده شده در زیر) سه دهانه را اشغال می کند.

در این کار، RecyclerView را که در آخرین تمرین به پایان رساندید، می گیرید و آن را برای نمایش داده ها با استفاده از GridLayoutManager به روز می کنید. می‌توانید به استفاده از برنامه Sleep-Tracker از Codelab قبلی ادامه دهید، یا می‌توانید برنامه 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