شاید توی بعضی از برنامه ها دیده باشید که یه سری عکس توی برنامه هست ، که گوشه بالا سمت چپ یا راست ، یه نوشته کوچیک هست و پایین عکس هم یه توضیح از عکس ( مثلا واسه رستوران ها یا فروشگاه ها که مثلا میخوان کالای پرفروش رو معرفی کنن کاربرد داره ) . ما میتونیم همچین کاری رو انجام بدیم ، با استفاده از یه کتابخانه به نام RibbonLayout که این ریبون با اون عینک ریبون خیلی فرق داره ! یه همچین برنامه ای منظورم هست :


برای استفاده از RibbonLayout ما باید از سه تا کتابخانه دیگه کمک بگیریم . که اون سه تا ، RecyclerView و CardView و Picasso هستش ( پس این RibbonLayout یه کتابخونه حرفه ای هست . با استفاده از Picasso تصاویر رو از اینترنت دریافت میکنه و با استفاده از RecyclerView و CardView اونارو نمایش میده )

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

خوب ، قبل از هر چیز ، میایم کتابخانه های لازم رو به فایل build.gradle ماژول app اضافه میکنیم : 

ما کلا دو تا لایوت داریم . توی لایوت اصلی یه RecyclerView تعریف میکنیم که بعدا با استفاده از کلاس هامون ازش استفاده میکنیم و یه لایوت جدید تعریف میکنیم واسه اینکه هر آیتم ( همون عکس ) واسمون نمایش داده باشه . یه لایوت میسازیم به اسم item_layout با این کدها : 

توی کدهای بالا ما کلا دو تا تگ داریم . یکی RibbonLayout و یکی هم ImageView . ما توی RibbonLayout واسه تعریف سایز نیازی نیست از dp یا sp استفاده کنیم و مستقیم میتونیم عدد رو بنویسیم . با استفاده از app:bottom_ribbonColor رنگ پس زمینه توضیح پایینی هر عکس رو مشخص میکنیم و یه رنگ سفید هم واسه خود متن توضیح میدیم با استفاده از app:bottom_textColor . 

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

و حالا وقتی میخوایم آدرس عکس ها به همراه متن هاشون رو بنویسیم ، از اعداد صفر و یک و دو استفاده میکنیم . توی کلاس MainActivity و این کدها : 

ما واسه این سورس از Adapter و Model استفاده کردیم که توصیه شدید میکنم که سورس رو دانلود و ایمپورت کنید و ببینید چه جوری کدها نوشته شدن ( با توضیح متنی دادن خوب متوجه نمیشین و کار کردن با کدها توی اندروید استودیو ، تغییر دادنشون ، خروجی گرفتن و اجرا کردنشون خیلی خیلی مفید تر هست . شاید در آینده ، واسه بعضی از آموزش ها ، فیلم آموزشی تهیه کنم و آپلود کنم که بهتر متوجه بشید 🙂    ) 

دانلود سورس

آموزش Android RibbonLayout

مجتبی صابری


همه عشقم برنامه نویسی هست | t.me/kotlin9


پیمایش نوشته


پاسخ دهید

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