خانه / آموزش اندروید / کار با RecyclerView در اندروید

کار با RecyclerView در اندروید

RecyclerView نسخه ی پیشرفته ی ListView می باشد که عملکرد بهتری داشته و مزایای بیشتری نسبت به آن دارد. با استفاده از RecyclerView و Cardview، لیست های نمایش اطلاعات می توانند به آسانی و همچنین زیبا ایجاد شوند. در این مطلب اطلاعات کاملی در مورد RecyclerView ارائه خواهیم داد و نمونه هایی را در این زمینه معرفی می کنیم با آموزش Recyclerview در اندروید با ما همراه باشید.

دانلود پروژه

در این آموزش می آموزید که چطور یک RecyclerView ساده را با یک لایوت سفارشی ایجاد کنید. علاوه براین، یک کلاس آداپتور می نویسیم و list driver یا جدا کننده لیست ها و یک listener را برای کلیک کردن روی ردیف اضافه خواهیم کرد. RecyclerView که ما در این مطلب طراحی می کنیم، یک لیست از فیلم ها را نمایش می دهد که دارای عنوان، ژانر و سال تولید می باشد.

در قطعه کد زیر، ویجت RecyclerView با ویژگی های مورد نیاز را مشاهده می کنید.

قبل از شروع مطمئن شوید که اندروید استودیو نصب و به آخرین نسخه بروز رسانی شده باشد. در این مطلب از  اندروید استودیو  3.0 RC 2 استفاده می کنیم.

1- در اندروید استودیو به مسیر file/new project بروید و تمام جزئیات مورد نیاز برای ایجاد پروژه ی جدید را وارد نمایید و در نهایت Blanck Activity را انتخاب کنید.

2- build.grade را باز کنید و  وابستگی RecyclerView با کد com.android.support:RecyclerView-v7:26.1.0  را اضافه و پروژه را بازسازی کنید

3- با آخرین نسخه ی ابزارهای ساخت، اندروید استودیو دو فایل لایه را برای هر اکتیویتی ایجاد می کند. برای main activity، دو فایل activity_main.xml (شامل CoordinatorLayout و AppBarLayout می باشد) و content_main.xml (برای محتوای واقعی) را ایجاد می کند. فایل content_main.xml و ویجت RecyclerView  را اضافه کنید .

 

4- colors.xml که در زیر res/values قرار دارد را باز کنید و رنگ های زیر را به آن اضافه نمایید.

5- dimens.xml در زیر res/values را باز نموده و dimen های زیر را اضافه کنید.

آموزش Recyclerview در اندروید

نوشتن کلاس آداپتور

بعد از اضافه کردن ویجت RecyclerView، حال باید کلاس آداپتور را برای آماده کردن داده ها برای RecyclerView بنویسیم. آداپتور RecyclerView مشابه با ListView بوده اما روش های override کردن متفاوتی دارد.

6- یک کلاس به نام movie.java را ایجاد و عنوان، ژانر و سال تولید را مشخص کنید. علاوه براین، متدهای getter/setter را برای هر متغیر اضافه کنید.

 

7- یک لایه xml به نام movie_list_row.xml با کد زیر را ایجاد کنید. این فایل لایه یک سطر از RecyclerView را برای نمایش نام فیلم، ژانر و سال تولید آن به عنوان خروجی ارائه می دهد.

 

8- یک کلاس به نام movieAdapter.java را ایجاد و قطعه کد زیر را وارد نمایید. در اینجا متد onCreateViewHolder ()، فایل movie_list_row.xml را اصطلاحا inflates می کند. در متد onBindViewHolder()، اطلاعات مربوط به فیلم از قبیل عنوان، ژانر و سال برای هر سطر در نظر گرفته میشود.

 

9- در این مرحله باید mainactivity.java را باز کنید و تغییرات زیر را روی آن اعمال نمایید. متد prepareMovieData() در اینجا داده های نمونه را به list view اضافه می کند.

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

آموزش Recyclerview در اندروید

افزودن  Divider/Separator (جدا کننده) به RecyclerView

 

شما می توانید با استفاده از DividerItemDecoration که توسط کتابخانه پشتیبانی میشود، یک خط جدا کننده بین سطرها ایجاد نمایید. آیتم های زیباسازی را مانند زیر به RecyclerView اضافه کنید.

با اجرای برنامه متوجه خواهید شد که یک خط جداکننده بین هر سطر قرار گرفته است

ساخت خط تقسیم سفارشی با حاشیه

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

10- یک کلاس به نام MyDividerItemDecoration.java را ایجاد و کلاس را از ItemDecoration گسترش دهید و از متد addItemDecoration() برای نمایش تقسیم کننده استفاده کنید.

 

11- MainActivity.java را باز کنید و ظاهر مورد نظر را با استفاده از متد addItemDecoration() را قبل از تنظیم کردن آداپتور، تنظیم کنید. در قطعه کد زیر حاشیه را 16 dp در نظر گرفته و به گوشه های چپ و راست خط تقسیم کننده اضافه کرده ایم.

 

با اجرای برنامه متوجه تغییرات در خط تقسیم کننده در هر ردیف خواهید شد.

آموزش کامل recyclerview

نمایش اسکرول کردن افقی RecyclerView

اگر میخواهید RecyclerView به صورت افقی نمایش داده شود، باید یک خط از قطعه کد زیر را تغییر دهید. تمام مواردی که در مدیریت لایه لازم دارید، مانند LinearLayoutManager.HORIZONTAL در زیر قرار گرفته است. فراموش نکنید که عرض ردیف با WRAP_CONTENT مشخص میشود.

 

اضافه کردن آیتم فراخوانی کلیک در RecyclerView

RecyclerView متد OnItemClickListener را برای تشخیص کلیک کردن ندارد و باید این کلاس را با گسترش RecyclerView.OnItemTouchListener بنویسید.

12- یک کلاس به نام RecyclerTouchListener.java ایجاد کنید و از آن RecyclerView.OnItemTouchListener را گسترش دهید. متوجه خواهید شد که رابط ClickListener به اینجا اضافه خواهد شد.

در نهایت آیتم فراخوانی کلیک را به RecyclerView با کمک کد زیر اضافه کنید.

در نهایت با استفاده از کد زیر  click listener را به  recycler view اضافه کنید.

 

 

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

کد نهایی آموزش Recyclerview در اندروید

در زیر کد کامل MainActivity.java را مشاهده می کنید.

دانلود پروژه

قسمت بعدی آموزش ؟

امیدوارم در این مقاله درک پایه ایی نسبت به RecyclerView پیدا کرده باشید در قسمت های بعد مباحث پیشرفته تر RecyclerView با ترکیب آن با CardView خواهیم پرداخت و امکاناتی مانند حذف کردن جستجو و …. به آن اضافه خواهی کرد.

 

  1. آموزش Recyclerview و Cardview در اندروید

 

درباره‌ی برنامه نویسان

همچنین ببینید

آموزش اندروید

طراحی رابط کاربری اندروید با Relative Layout

در سری آموزش های « برنامه نویسی اندروید  » هر بار با مطالب بسیار جذاب و کاربردی ساخت …

1 Star2 Stars3 Stars4 Stars5 Stars (2رای, میانگین: 5٫00 از 5 )
Loading...

پاسخی بگذارید

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

ایمیلتان را وارد کنید تا همین الان این آموزش ارزشمند را دریافت کنید
 HTML 5 دوره آنلاین  
برایم ایمیل شود
نگران نباشید ، ایمیل های مزاحم نمی فرستیم
close-link
ایمیلتان را وارد کنید تا همین الان این آموزش ارزشمند را دریافت کنید
 چهار فیلم آموزشی  
برایم ایمیل شود
نگران نباشید ، ایمیل های مزاحم نمی فرستیم
close-link