آموزش ساخت یک BottomSheet زیبا در اندروید

قبلا توی این آموزش در مورد BottomSheet توضیح دادم . حالا ما توی این آموزش میخوایم یه جور زیباتر و شیک تر از این ویژگی اندروید استفاده کنیم . این آموزش میتونه به درد مواردی مثل درباره ما یا تماس با ما یا چیزایی از این قبیل به کار آدم بیاد . خوب ، اول از همه یه نگاه به برنامه ای که میخوایم بسازیم میندازیم : 


توی فیلم بالا ، گزینه پایین سمت راست ، همون FloatingActionButton هست که به اختصار fab هم بهش میگن . این ویژگی توی خود اندروید هست و اگه موقع ساختن پروژه توی اندروید استودیو ، گزینه Basic Activity رو انتخاب کنید ، خود به خود اضافه میشه واستون . ما توی این آموزش ، تمرکز خودمون رو میذاریم روی دکمه پایین سمت چپ که با کلیک روش یه متنی واسمون بالا میاد . اگه متن ما توی اندروید استودیو طولانی باشه ، ما از ScrollView استفاده میکنیم تا بتونیم تمام متن رو بالا پایین کنیم و ببینیم . ولی توی این مورد ، میایم از یه نوع دیگه اسکرول ویو استفاده میکنیم به نام NestedScrollView . دلیلش رو جلوتر میگم . 

خوب ، ما یه دکمه تعریف میکنیم توی لایوت خودمون که میخوایم روش کلیک کنیم : 

دقت کنید توی کدهای بالا و خط آخر ما از یه چیزی استفاده کردیم به نام dodgeInsetEdges  

میخوایم روی Button بالا کلیک کنیم تا یه متنی واسمون لود بشه دیگه ، پس میایم یه TextView تعریف میکنیم ، داخل یه NestedScrollView . به این شکل : 

توی کدهای بالا و خط ۱۱ بازم از insetEdge استفاده کردیم ( توی یه ScrollView عادی نمیتونیم از insetEdge استفاده کنیم ) . ولی این insetEdge اصن چی هست . نگاه کنید ، ما اگه بخوایم برنامه مون رو بدون insetEdge اجرا کنیم ، مشکلی که پیش میاد اینه که اون متن پایین صفحه ، میاد رو Button و fab ما . یعنی اینجوری میشه :

پس واسه اینکه مشکل بالا پیش نیاد واسمون میایم از insetEdge استفاده میکنیم و بهش مقدار bottom رو هم میدیم . معنیش یه جورایی شبیه به این هست که پایین هر چیزی قرار بگیر 

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

ما توی لایوت خودمون ، به NestedScrollView یه آی دی دادیم ، به نام bottom_sheet . و میایم ازش استفاده میکنیم به این شکل : 

حالا میگیم وقتی که روی Button کلیک شد ، بیا و این bottomSheetBehavior رو واسمون استفاده کن : 

همونجور که گفتم ، این آموزش خیلی خیلی به درد این میخوره که اطلاعاتی مثل درباره ما ، برنامه نویس یا چیزایی مثه اینا رو ، سریع و زیبا ، به کاربر نشون بدید . سورس رو هم دانلود و ایمپورت کنید و حتما ببینید که توی فایل build.gradle مربوط به app از چه کتابخانه هایی استفاده کردیم 

دانلود سورس

مجتبی صابری

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

More Posts

پاسخ دهید

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