دوره های آموزشی
خانه / آموزش اندروید / آموزش Recyclerview و Cardview در اندروید

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

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

 

 

هنگامی که Cardview با RecyclerView ترکیب شوند، در نهایت خروجی بسیار زیبا برای UI را به همراه خواهد داشت. در این مطلب قصد داریم نحوه ی ادغام CardView و RecyclerView را برای ایجاد یک برنامه ی موسیقی زیبا که آلبوم های موسیقی را با تصویر و عنوان نمایش میدهد را آموزش دهیم.

اضافه کردن CardView

برای استفاده از CardView در برنامه ی خود در مرحله ی اول باید بتوانید موارد وابسته به CardView را در build.grade  اضافه و پروژه را sync کنید.

 

ویجت <android.support.v7.widget.CardView> را به لایه های خود اضافه کنید و سایر ویجت های UI مانند ImageView و TextView را در داخل آن قرار دهید. در Cardview زیر کاملا مشخص است که تنها یک  TextView در آن قرار گرفته شده است.

 

بعد از انجام این مراحل، کار را برای ایجاد پروژه ی جدید ادامه خواهیم داد.

ایجاد پروژه ی جدید

  1. یک پروژه ی جدید را در اندروید استودیو از منوی file/new project ایجاد کنید. در این مرحله اگر از شما درخواست شد تا فعالیت پیش فرض را انتخاب کنید، Empty Activity را انتخاب و ادامه دهید.
  2. فایل res.zip را دانلود و به پوشه ی پروژه ی خود اضافه کنید. این پوشه شامل چند آلبوم و آیکن های مورد نیاز برای این پروژه می باشد.
  3. رشته ها ی زیر را  که شامل رنگ ، ابعاد و منابع dimen می شوند را به فایل های string.xml, color.xml و dimen.xml اضافه کنید.
4 . build.gradle را باز و وابستگی های CardView, RecycleView و Glide را اضافه کنید.  RecycleView  برای نمایش آلبوم به صورت شبکه ای استفاده می شود. CardView برای نمایش یک مورد از آیتم آلبوم به کار برده میشود. Glide برای نمایش تصویر کاور آلبوم مورد استفاده قرار میگیرد.
 

5 . برای ایجاد یک آلبوم واحد، ما به یک کلاس مدل نیاز داریم تا ویژگی های آلبوم مانند نام، تعداد آهنگ ها و تصویر کاور را نشان دهد. بنابراین یک کلاس به نام Album.java را ایجاد و کد زیر را اضافه کنید.

 

 

6 . برای نمایش کارت آلبوم به یک لایه ی xml نیاز داریم. یک لایه ی xml به نام album_card.xml زیر لایه ی res ایجاد کنید. در قطعه کد زیر متوجه میشوید که <android.support.v7.widget.CardView> را اضافه کرده ایم و تمام ویژگی های آلبوم مانند نام، تعداد آهنگ ها و همچنین تصویر کاور آلبوم اضافه شده اند. علاوه براین، یک آیتم 3 نقطه هم برای باز شدن منوی popup برای ضربه زدن روی آن اضافه کرده ایم.

 

 

7. یک فایل منو به نام menu_album.xml زیر res در فولدر منو res ⇒ menu ایجاد کنید. این منو یک منوی popup برای ضربه زدن روی آیکن نقطه ای روی هر یک از آیتم های کارت آلبوم نمایش خواهد داد.

 

8. برای اجرای RecyclerView، ما به یک کلاس آداپتور نیاز داریم که اطلاعات album_card.xml را با حفظ اطلاعات مناسب بارگزاری کند. یک کلاس به نام AlbumAdapter.java ایجاد و محتوای زیر را به آن اضافه کنید.

 

 

9. فایل های لایه ی activity_main.xml و content_main.xml را باز و AppBarLayout ، CollapsingToolbarLayout، Toolbar و RecyclerView را اضافه کنید.

 

content_main.xml

 

10. در نهایت، MainActivity.java را باز و تغییرات لازم را اعمال کنید.

()initCollapsingToolbar : عنوان تولبار را زمانی که تولبار collapsed یا expanded میشوند نمایش یا پنهان خواهد کرد.

() prepareAlbums: اطلاعات مورد نیاز آلبوم نمونه را برای RecyclerView اضافه میکند.

GridLayoutManager برای نمایش RecyclerView به حالت Grid به جای لیست استفاده میشود.

GridSpacingItemDecoration برای داشتن حاشیه های برابر اطراف آیتم شبکه ی RecyclerView استفاده میشود

AlbumsAdapter نمونه ایجاد شده را به RecyclerView اختصاص داده و آلبوم های CardView به صورت شبکه ای نمایش داده شوند.

اگر برنامه را اجرا کنید، نمایش شبکه ای CradView آلبوم را مشاهده خواهید کرد.

 

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

 

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

درباره ی محمد آذرنیوا

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

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

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

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

RecyclerView نسخه ی پیشرفته ی ListView می باشد که عملکرد بهتری داشته و مزایای بیشتری ...

دیدگاهتان را بنویسید

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