میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

list و grid و RecyclerView در اندروید

در این آموزش نحوه ی استفاده ازکامپوننت widget رابط کاربری RecyclerView ( جهت پیاده سازی لیست های پیچیده ) در اپلیکیشن های مبتنی بر اندروید را به شما آموزش می دهد.

 


استفاده از list یا grid در اپلیکیشن اندروید

نمایش آیتم ها در قالب یک list ( با نمای فهرستی ) یا  grid با (نمای جدولی و به صورت خانه بندی شده) در اپلیکیشن های تحت موبایل یک الگوی کاملا معمول و پرکاربرد است که به فور شاهد آن هستید. کاربر در مقابل خود مجموعه ای از آیتم های مرتب و سازماندهی شده را می بیند که به راحتی به وسیله ی یک نوار اسکرول قابل پیمایش می باشد. حال این مجموعه می تواند یک list ، grid یا هر ساختار سازمان دهی شده ی دیگری از داده ها باشد. تصویر زیر یک activity با این نما را به نمایش می گذارد.

grid

کاربر با این مجموعه از آیتم ها از طریق event هایی که با لمس نمایشگر اتفاق می افتند ( touch event ) یا نوار ابزار ( toolbar ) تعامل می کند. هر یک از این المان ها می تواند برای کاربر قابل انتخاب باشد. در پی کلیک کاربر بر روی یک المان، ممکن است toolbar بروز رسانی شود یا به طور کلی یک صفحه ی جدید با جزئیات فراوان به نمایش در آید.

RecyclerView


استفاده از RecyclerView جهت پیاده سازی لیست های پیچیده

RecyclerView یک کلاس است که به برنامه نویس قابلیت پیاده سازی لیست های پیچیده را می دهد. این لیست می تواند حجم بالایی از اطلاعات را نمایش داده که ممکن است در زمان اجرای برنامه (بر اساس افعال کاربر) بارها تغییر کنند.

RecyclerView در واقع نسخه ی جدیدی از ListView و GridView است که توسط چارچوب نرم افزاری ( framework ) اندروید در اختیار توسعه دهنده قرار می گیرد. Recycler view تعدادی زیادی از مشکلات و کاستی هایی که در widget های قبلی وجود داشت را برطرف نموده و سبکی از برنامه نویسی را اعمال می کند کند که افزایش کارایی و سرعت در اجرای اپلیکیشن را به دنبال دارد. علاوه بر موارد ذکر شده، این کلاس همراه با انیمیشن های پیش فرض و از قبل تعریف شده ارائه می گردد که المان ها را با انیمیشن از لیست حذف کرده یا به آن اضافه می کند.

RecyclerView به شما اجازه می دهد تا از layout manager های مختلف برای مدیریت چیدمان و موقعیت دهی آیتم ها استفاده نمایید. RecyclerView برای پیاده سازی لیست و نمایش آیتم ها با سه کلاس همکاری دارد. ViewHolder که وظیفه ی نگهداری یک المان در لیست را برعهده دارد

(تمامی المان هایی که در لیست مشاهده می کنید، اشاره گر یا متغیری متناظر در آبجکت view holderدارند.) دومین المان، کلاس adapter هست که view یا همان المانی که در لیست قرار می گیرد را ساخته ، آن را در viewholder قرار می دهد و در نهایت داده ها را به هر view متصل یا bind می کند. و اما آخرین المان LayoutManager هست که چگونگی چیدمان و نمایش المان ها در لیست را مدیریت می کند (لیست را با نمای افقی، عمودی، به صورت جدول بندی شده نمایش دهد.)

ViewHolder یک کلاس static و درون ساخته در adapter است که اشاره گری ( reference و متغیری متناظر) به view مربوطه نزد خود نگه می دارد. با نگه داشتن اشاره گر به این viewها در کلاس مزبور، توسعه دهنده می تواند از فراخوانی مکرر متد ()findViewById جهت بروز رسانی widget ها با داده های جدید خودداری کند (که در نهایت صرفه جویی در منابع و افزایش کارایی اپلیکیشن را در پی دارد.)

 


اAdapter

همان طور که در بالا اشاره شد، دومین المان، کلاس adaptor هست که view یا همان المانی که در لیست قرار می گیرد را ساخته، آن را در آبجکت viewholder قرار می دهد و در نهایت داده ها را به هر view متصل یا bind می کند. کلاس adapter در واقع وظیفه ی مدیریت data model را بر عهده داشته و آن را با توجه به هر المان در لیست (ویجت RecyclerView ) تنظیم یا بروز رسانی می کند. کلاس نام برده ویژگی ها و متدهای کلاس RecyclerView.Adapter را به ارث برده این کلاس را extend می کند) و توسط متد بهRecyclerView.setAdapter به recycler view تخصیص می یابد. ورودی adapter می تواند هر آبجکت جاوایی باشد. بر پایه ی این ورودی، آبجکت adapter می بایست تعداد کل آیتم های لیست (تعداد المان هایی که در لیست یا recycler view قرار است نمایش داده شود) را از طریق متد () getItemCountبازگردانی نماید.

می دانید adapter چگونه چیدمان و ظاهر (layout ) آیتم های موجود در لیست را مدیریت و آماده می کند؟ در جواب باید گفت که adapter برای نمایش هر آیتم در لیست، فایل layout متناظر و مربوطه ی آن را inflate می کند. (  inflate = عبارت است از تبدیل فایل LAYOUT XML به آبجکت view جهت قرار گرفتن در کلاس ACTIVITY . در واقع هر زمان که بخواهید layout را برای مثال در زمان اجرا در برنامه نمایش دهید، باید آن را inflate نمایید.) این کار در متد () onCreateViewHolder انجام می شود. این متد به ازای هر المان بصری داخل ،recycler view آبجکتی از نوع ViewHolder را به عنوان خروجی بازمی گرداند.

به واسطه ی این نمونه ( instance ) می توانید به view ها در layout بارگذاری و به صورت نهایی ارائه / inflate شده دسترسی داشته باشید. هر زمان که لازم باشد یک view جدید ساخته شود، متد onCreateViewHolder صدا خورده می شود. متد نام برده همان طور که از نامش پیدا است، view را می سازد، سپس آن را در ViewHolder قرار می دهد و در نهایت آبجکت مورد نظر را برای نمایش به RecyclerView می دهد.

Adapter هر المان در لیست ( recycler view ) را با آیتم متناظر و مناسب (در) data model پر می کند. پس از اینکه داده ی ( data item ) مورد نظر در دسترس قرار می گیرد، adapter این داده را به تک تک widget های مربوطه که قبلا inflate و در حافظه بارگذاری کرده، متصل یا bind می کند. این عملیات در بدنه ی متد ()onBindViewHolder انجام می شود. به عبارت دیگر این متد view را می گیرد و داده های مربوطه از data model را به آن به صورت دو طرفه وصل می کند.

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

model

فایل layout متناظر این سطر به صورت زیر خواهد بود.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip" >
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dip"
android:contentDescription="TODO"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="@id/icon"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Description"
android:textSize="12sp" />
<TextView
android:id="@+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="@id/secondLine"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toRightOf="@id/icon"
android:gravity="center_vertical"
android:text="Example application"
android:textSize="16sp" />
</RelativeLayout>

 


امیدواریم آموزش list و grid و RecyclerView در اندروید نیز برای شما مفید واقع شده باشد و ادامه آموزش برنامه نویسی اندروید رو دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟