آموزش ریسایکلرویو (RecyclerView) در اندروید

همانطور که می‌دانید برای نشان دادن فهرستی از یک نوع میتوان از لیست استفاده کرد.

یکی از روش‌های متداول در اندروید برای نمایش دسته‌ای از یک موضوع ریسایکلرویو (RecyclerView) است. که موضوعی پرکاربرد است و در هر برنامه‌ کاربردی اندرویدی این نوع لیست را مشاهده می‌کنیم.

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

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

آیتم‌های (عناصر) موجود در آن، یک نام و یک عکس را دربر می‌گیرند و در نهایت به شکل زیر نمایش داده می‌شوند:

کاربرد ریسایکلرویو

 

همانطور که مشاهده می‌کنید، شمای کلی خیلی از برنامه‌های‌ کاربردی‌ دیگر نیز به این صورت است که در آن ریسایکلرویو به همراه کاردویو نمای زیبایی به اپلیکیشن بخشیده است. پس در انتهای این مقالات به دنبال نوشتن و طراحی چنین برنامه‌‌ای هستیم.

همانگونه که در بالا گفته شد با پیاده سازی و توضیحات مربوط به ریسایکلرویو آغاز می‌کنم و در بخش بعدی به Bottom Navigation می‌پردازیم و پس از آن به صفحه‌ی بعد برنامه‌ میریم و با کلیک برروی هر آیتم به صورت اختصاصی و اتفاق‌هایی که به دنبال آن می‌توان کنترل کرد را توضیح خواهم داد.(در اینجا یک آیتم را به همراه یک عکس و تنها یک متن توضیح خواهم داد و خلاقیت بیشتر را به عهده خواننده می‌گذارم)

در ابتدا یک application جدید ایجاد میکنیم (همیشه وقتی موضوعی برای ما جدید است، بهترین گزینه ایجاد یک برنامه جدید و یادگرفتن آن موضوع به طور خاص می‌باشد؛ پس از اینکه در آن موضوع تسلط کافی را یافتیم، می‌توانیم به برنامه اصلی رفته تغییرات لازم را در برنامه اصلی ایجاد کنیم، بدین صورت ماهم قطعه کدهایی خواهیم داشت که بعدها دربرنامه‌های بعدی می‌توانیم از آن به صورت جداگانه استفاده کنیم و زمان کد نویسی ما نیز کاهش می‌یابد)

ریسایکلرویو (RecyclerView)

برای داشتن یک ریسایکلرویو لازم است ابتدا کتابخانه ی Design را در Gradleسینک کنیم:

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

پس از آن در MainActivity برروی نام Layout، دکمه‌های Ctrl+Bرا گرفته به برگه‌ی طراحی میرویم، ترجیح من نوشتن کدهای Xmlمیباشد. پس از آن کد زیر را اضافه می‌کنیم.

توجه داشته باشید که در اپلیکیشنی که من نمایش دادم طول و عرض ریسایکلرویو کل صفحه را دربر دارد، ممکن است شما بخواهید نیمی از صفحه باشد که در این مورد به صورت دستی ابعاد را به اندازه‌ی دلخواه تغییر میدهید.

حال ما در MainActivity خود یک ریسایکلرویو داریم.

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

را در ابتدای کد وارد کرده، در متد oncreate تابعی به نام initview()را صدا میزنیم:

پس initView()را تعریف میکنیم، چون در اینجا ریسایکلرویوی ما در یک اکتیویتی قرار دارد:

حال لازم است نمای عناصر ریسایکلرویو را نیز مشخص کنیم:

برروی res-> layout کلیک راست کرده و از لیست نمایش داده شده Layout resource file را انتخاب می‌کنیم. پنجره‌ی جدید باز شده به شکل زیر است:

اضافه کردن لایه جدید

برای سهولت خواندن برنامه، میتوانیم در ابتدای نام از لغت item_ استفاده کنیم، تا بدانیم این گزینه برای آیتم‌هاست. مثلا item_food

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

پس در سمت چپ یک عکس و در کنار آن متن مشاهده می‌کنیم، در اینجا به یاد داشته باشید که اگر برنامه‌کاربردی شما به زبان فارسی منتشرخواهد شد حتما در تگ اصلی layout کد زیر را قرار دهید:

تا اینجا یاد گرفتیم که چطور ریسایکلرویو را به اپلیکیشن اضافه کنیم و آیتم آن را طراحی کنیم.

اکنون نوبت آن است که ایتم را به ریسایکلرویو متصل کرده، و عناصر آن را نمایش دهیم.

برای اینکار به چند چیز نیاز داریم، اولین آن این است که لیستی از آیتم‌ها داشته باشیم، دراین مسئله آیتم‌های ما یک عکس و یک متن داشت، یا به عنوان یک شیء با آن رفتار می‌کنیم، پس باید شیءای با این خصوصیات ایجادکنیم.

همانطور که در ابتدای مقاله گفتم، تمیز کد زدن موردیست که همواره باید رعایت کرد، پس یکی از روش‌های متداول کد نویسی را انتخاب می‌کنیم، من در اینجا mvp را انتخاب کردم. در پوشه‌ی model کلاس pojo ای به نام food (نام اختیاریست فقط باید به خوبی انتخاب شود تا مفهوم کاری که قرار است انجام دهیم را برساند) ایجاد می‌کنم. پس از آن یک String برای متن و یک String برای عکس در حافظه جای‌گذاری می‌کنم.

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

لازم به یاد آوریست که فشردن کلید Alt+ Insert میانبری برای ایجاد Constructor و توابع Getter , Setter می‌باشد. در اینجا حرف m برای یادآوریاین موضوع است که حافظه به آن اختصاص داده‌شده‌است.
حال که تابع pojo ایجاد شد به سراغ mainActivity رفته و لیستی از آیتم ها ایجاد می‌کنیم میتوان این کار را با یک حلقه‌ی for انجام داد( فعلا داده‌ی واقعی نداریم).

ساخت حلقه for

میبینید که برای نوشتن حلقه‌ی for از کلید میانبر Ctrl+Alt+T استفاده کردم. خب حلقه را تا ۱۰ می‌افزاییم. و مقدار هر عنصر ایجاد شده را به یک آرایه می‌افزاییم.

 قبل از حلقه قرارمی‌گیرد و در حلقه کد زیر را می‌افزاییم:

حال نوبت آن رسیده که به ریسایکلر ویو بگوییم که چه عناصری را نشان بدهد. پس لازم است برای آن یک اداپتر ایجاد کنیم. ابتدا پوشه‌ای به نام Adapter ایجاد میکنیم تا تمام اداپترهای موجود در برنامه را در همان پوشه قرار دهیم. پس از آن کلاسی با نام دلخواه ایجاد کرده، مراحل زیر راانجام می‌دهیم:

  1. ایجاد کلاس به نام FoodAdapter
  2. کلاس از Adapterh ارث بری می‌کند.

میتوانید برای تخصیص فایل xml. هم کلاسی جداگانه بنویسم هم اینکه در همان کلاس بالا که ایجاد کردیم آن را قرار دهیم.
پس شکل کلی کلاس ما به صورت زیر خواهد بود:

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

حال که اداپتور را ایجاد کردیم نوبت به آن رسیده که در Main activity ریسایکلرویو را ست کنیم و در نهایت Main Activity به شکل زیر خواهد بود:

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

OnClickListener

در هر ریسایکلر ویویی برای ما مهم است که بتوانیم برروی آیتم کلیک کرده ،رویداد مورد نظر ما اتفاق بیوفتد.
بنابر این در این قسمت برای شما توضیح خواهم داد که چگونه این امر را کنترل نمایید.
همانطور که می‌دانید ریسایکلر ویو از لحاظ ساختاری با لیست ویو متفاوت است. و در main thread نمیتوانید کلیک برروی آیتم را کنترل کنید. میدانیم که دو نوع کلیک کردن داریم، یکی کلیک یک بار و به صورت ضربه و دیگری کلیک به صورت نگه داشتن انگشت برروی آیتم.
۱٫ کلیک ضربه: onClickListener

  1. نگه‌داشتن آیتم: onLongClickLisetner

می‌توانیم هردوی موارد را در متد onBindViewHolder پیاده سازی کنیم یا اینکه متدی در کلاس Holder بنویسیم و آن را در onBindViewHolder صدا بزنیم. همیشه تاکید ما براین است که از اصطلاحات حرفه‌ای برنامه‌نویسی استفاده کنیم تا هنگام صحبت با یک برنامه‌نویس دیگر یا مطالعه‌ی متون مرتبط درک خوبی داشته باشیم اصطلاح مناسب برای صدا زدن تابع (Invoce) است.
حال به پیاده‌سازی بپردازیم:
۱٫ به کلاس Adapter که در بالا توضیح دادم بروید
۲٫ در متد onBindViewHolder
۳٫ میتوانیم انتخاب کنیم که برروی یکی از عناصر موجود در آیتم ریسایکلر ویو کلیک کنیم و رویدادی اتفاق بیوفتد، یا میتوانیم انتخاب کنیم که برروی کل آیتم کلیک کنیم و رویداد خاصی رخ دهد، پس بسته به آنچه انتخاب میکنیم متد onClicklistener را پیاده سازی می‌کنیم. به یاد داشته باشید که از لحاظ رابط کاربری عنصری که قابلیت گوش دادن به رویداد کلیک را دارد باید به راحتی قابل لمس باشد، و خیلی کوچک نباشد، اگر عنصر از لحاظ بصری کوچک بود( مثل radiobotton ها، میتوانیم دورآن padding یا مارجین قرار دهیم تا مساحتی که قابلیت لمس دارد را بزرگتر کنیم، در مورد این موضوع می‌توانید تحقیقات بیشتری انجام دهید تا را‌هکار مناسب برای عنصر خود را بیابید).
در زیر نمونه کد را مشاهده می‌کنید:

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

مورد بعدی onlongClicklistener است که در ریسایکلرویو اجرای آن زیاد متداول نیست، اما به خاطر داشته باشید برای نوشتن این امر حتما باید آن را در متدی داخل کلاس viewHolder قرار دهید. به دلیل متداول نبودن آن این بخش را به عهده‌ی خواننده واگذار می‌کنم.

در مقاله ی بعدی به توضیح Bottom Navigation می‌پردازیم.

پیروز و موفق باشید.

دیدگاه ها

ارسال دیدگاه

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

صفحه اینستاگرام کانال تلگرام