ساخت Bottom Sheet در اندروید

ساخت Bottom Sheet در اندروید

سلام دوستان؛

در این مقاله میخواهیم نحوه ساخت Bottom Sheet در اندروید را با هم یاد بگیریم.  Bottom Sheet یا اسلاید صفحه پایین به بالا است که از پایین صفحه به بالا می آید و محتوایی مرتبط با موضوع را نمایش می دهد. شما می توانید Bottom Sheet را در برنامه هایی مانند نقشه(Google maps)، موزیک پلیر و… مشاهده کنید. Bottom Sheet جز اجزای موجود در کتابخانه design است. در این آموزش ساخت Bottom Sheet در اندروید قصد داریم اولین نمونه ساخت Bottom Sheet و نمونه های دیگر را بررسی کنیم.

 

۱.انواع Bottom Sheet

ما دو نوع Bottom Sheet در اندروید داریم، Persistent Bottom Sheet و Modal Bottom Sheet.

> Persistent Bottom Sheet: این نوع از Bottom Sheet محتوای برنامه را نمایش می دهد و در قسمت پایین صفحه نمایش داده می شود و بعضی از قسمت های آن قابل مشاهده است و زمانی که باز می شود محتوای آن به صورت کامل نمایش داده می شود. در پایین نمونه ای که در Google Maps مورد استفاده قرار گرفته شده است را میتوانید ببینید.

ساخت Bottom Sheet در اندروید

 

Modal Bottom Sheet: این نمونه معمولاً برای منو ها یا گفت و گو ها و همپنین لینک دادن به سایر نرم افزار ها استفاده می شود. در زیر نمونه ای از استفاده از این مدل در نرم افزار Google Drive مشاهده می کنید.

ساخت Bottom Sheet در اندروید

اکنون شروع به اجرای Sheet Bottom با ایجاد یک پروژه جدید در Android Studio می کنیم.

 

۲. ساخت Bottom Sheet در اندروید

۱. در اندروید یک پروژه جدید ایجاد کنید و یک Basic Activity بسازید.

۲. فایل res را دانلود کنید و به پوشه drawables موجود در برنامه خود اضافه کنید. این پوشه شامل موارد مورد نیاز برای ساخت پروژه است.

۳. فایل build.gradle را باز کنید و کتابخانه های design و ButterKnife را به آن اضافه کنید. در اینجا استفاده از ButterKnife اختیاری است زیرا برای نمایش پیوند مورد استفاده قرار می گیرد و ارتباطی با موضوع bottom sheet ندارد.

اکنون ما باید layoutهای مورد نیاز برای ساخت Bottom Sheet در اندروید را ایجاد کنیم.

۴. یک xml layout در میسر res ⇒ layout بسازید و نام آن را  bottom_sheet.xml قرار دهید و سپس کدهای زیر را در آن قرار دهید. در اینجا چند ویژگی مهم را مشاهده می کنید.

> app:layout_behavior: این خصوصیت باعث می شود که طرح به صورت ورقه ای در پایین صفحه عمل کند. این مقدار برابر android.support.design.widget.BottomSheetBehavior است.

> app:behavior_peekHeight: مقدار حداقل ارتفاع برای نمایش در صفحه است.

> app:behavior_hideable: زمانی که صفحه به پایین کشیده شد باعث پنهان شدن Bottom Sheet می شود.

۵. فایل bottom_sheet.xml را در فایل xml مربوط به Mainactivity وارد کنید. ابتدا فایل مربوط به main activity را (activity_main.xml و content_main.xml) را باز کنید و تغییرات زیر را در آن بدهید، من همچنین سه دکمه برای نمایش سایر نمونه ها گذاشتم.

۶. اکنون فایل MainActivity.java مربوط به ساخت Bottom Sheet در اندروید را باز کنید و تغییرات زیر را در آن اعمال کنید.

> BottomSheetBehavior برای ساخت callbacks و همچنین کار کردن BottomSheet با CoordinatorLayout استفاده می شود.

> ()BottomSheetBehavior.BottomSheetCallback زمانی که وضعیت Bottom Sheet را تغییر می دهد callback را ایجاد می کند.

> ()toggleBottomSheet بستن یا باز کردن Bottom Sheet زمانی که برروی دکمه کلیک می شود.

اکنون اگر برنامه را اجرا کنید، می توانید bottom sheet را مشاهده کنید. اکنون می توانید Persistent Bottom Sheet را مشاهده کنید.

ساخت Bottom Sheet در اندروید

 

۳. Modal Bottom Sheet: دو نوع BottomSheetDialog و BottomSheetDialogFragment

این دو مدل Bottom Sheets مانند Persistent sheets به صورت دائمی در پایین صفحه ماندگار نیستند و آنها بااستفاده از BottomSheetDialog یا BottomSheetDialogFragment نمایش داده می شوند. اکنون بیایید ببینیم Modal Bottom Sheets را بسازیم.

 

۷.  در مسیر res ⇒ layout یک فایل xml بسازید و نام آن را fragment_bottom_sheet_dialog.xml بگذارید و تغییرات زیر را در آن اعمال کنید.

۸. برای ساخت Bottom Sheet در اندروید بااستفاده از (File ⇒ New ⇒ Fragment ⇒ Fragment (Blank یک fragment با نام BottomSheetFragment.java بسازید یا یک کلاس با همین نام ایجاد کنید که از BottomSheetDialogFragment ارث بری کند.

۹. اکنون dialog fragment آماده است، MainActivity.java را باز کنید و متد های زیر را در آن اضافه کنید. بعد از اضافه کردن متد های جدید سعی کنید برنامه را یک بار دیگر اجرا کنید و خروجی برنامه را مشاهده کنید.

نسخه دمو

موفق باشید 🙂

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

عضو می‌شوم:)

مقاله های مرتبط :

دیدگاه خود را بیان کنید :

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