BottomSheet
دو نوع BottomSheet داریم:
Persistent Bottom Sheet و Modal Bottom Sheet
Persistent Bottom Sheet
این جزئی از لیوت هست.
برای تعریف شی ای از جنس BottomSheetBehavior تعریف کرده و به صورت زیر مقدار دهی میکنیم:
bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet_filter);
bottom_sheet_filter روت لیوت Bottom Sheet هست. (مثلا constraint layout)
در این حالت Bottom Sheet استیت های مختلفی داره. از جمله:
- COLLAPSED: میره پاییین فقط مقداری که تعریف شده بالا میمونه
- EXPANDED: کلا باز میشه
- HIDDEN: کلا میره پایین
- dragging: بالا و پایین شدن
- SETTLING: قبل از رسیدن به مقدار نهایی expand یا collapsed
بنابراین از طریق متدهای setState یا getState میشه استیت های مختلفی برای Bottom Sheet ست کرد.
Bottom Sheet در این حالت یک کال بک برای حالت های مختلف باز و بسته شدن به صورت زیر دارد:
bottomSheetBehavior.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_HIDDEN) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
Log.d(TAG, "onSlide is calling, slideOffset: " + slideOffset);
if (slideOffset > 0) {
rotateBottomSheetArrows(slideOffset);
}
}
});
}
private void rotateBottomSheetArrows(float slideOffset) {
leftArrow.setRotation(slideOffset * 180); // چرخش پاد ساعتگرد
rightArrow.setRotation(slideOffset * -180); // چرخش ساعتگرد
}
توی قسمت اول این کال بک من گفتم اگر کاربر Bottom Sheet رو پایین فرستاد collapsed بشه.
متد onSlide میزان آفست را در حین بالا کشیدن Bottom Sheet نشون میده.
در استیت hidden میزان slideOffset برابر -1 بوده، در استیت collapsed این مقدار صفر و در استیت expanded این مقدار 1 هست.
در کد بالا من دو تا arrow توی Bottom Sheet گذاشتم که با بالا و پایین رفتن Bottom Sheet مقدار 180 درجه در جهت عکس همدیگه میپرخن.
اینجا در مورد این آفست توضیح داده
Modal Bottom Sheet
تقریبا مثال دیالوگ میمونه. فوکوس صفحه رو میگیره. با زدن روی قسمت های دیگه صفحه یا پایین کشیدنش هاید میشه.
نیازی به coordinator layout نداره، چون قسمتی از لیوت اصلی نیست.
در اینجا کلاس دیالوگ رو از BottomSheetDialogFragment اکستند کرده و ویوی مورد نظر را inflate میکنیم.
برای نمایش در اکتیویتی از این کلاس نیو کرده و show رو فراخونی میکنیم.
منابع آموزشی:
اینجا انیمیشین های قشنگی برای بالا کشیدن باتن شیت توضیح داده (با استفاده از آفست)
