باتم شیت (Bottom sheet) یکی از امکانات متریال دیزاین می باشد، که به کتابخانه ی دیزاین ساپورت در ورژن 23.2 اضافه شده بود. باتم شیت یک پنجره بسیار ساده است که از پایین صفحه ظاهر می شود، و میتواند اطلاعات بیشتری به کاربر نشان دهد. نمونه ی باتم شیت را می توان در بعضی اپلیکیشن های گوگل و ویجت ها مشاهده کرد، مانند انتخاب مکان از Api مکانی.
در این پست ، ما میخواهیم نحوه ی استفاده از باتم شیت در اپلیکیشن را به شما نشان دهیم. باتم شیت میتواند قسمتی از رابطه کاربری یا یک مدل موقت باشد. برای رسیدن به این امکانات، امکاناتی را که کتابخانه ساپورت دیزاین برای شما فراهم می کند شامل :
BottomSheetBehavior : میتواند در CoordinatorLayout استفاده شود.
BottomSheetDialog : که یک دیالوگ همراه با رفتار باتم شیت می باشد.
BottomSheetDialogFragment : که بسطی از DialogFragment، که یک aBottomSheetDialog ساخته به جای یک دیالوگ استاندارد.
برای شروع و استفاده باتم شیت در اپلیکیشن شما، کتابخانه ساپورت را به dependecy خود در فایل build.gradle اضافه کنید.
ساخت یک باتم شیت ثابت :
یک لی اوت با بهCoordinatorLayout به عنوان لایه ی اصلی بسازید، سپس یک view یا layout برای باتم شیت، بصورت آنکه فرزند مستقیم CoordinatorLayout درست کنید. لی اوت باتم شیت باید صفت app:layout_behavior را در خود داشته باشد، با مقدار android.support.design.widget.BottomSheetBehavior.
به عنوان مثال:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.mayojava.sample.bottomsheetdemo.MainActivity">
<!-- main content layout-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
......
</RelativeLayout>
<!-- bottom sheet layout -->
<RelativeLayout
android:id="@+id/linear_layout_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="220dp"
app:behavior_peekHeight="80dp"
app:behavior_hideable="true"
app:layout_behavior="@string/string_bottom_sheet_behavior"
android:elevation="@dimen/z_bottom_sheet"
android:background="@color/color_bottom_sheet">
<TextView
android:id="@+id/text_view_sheet_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text_pull_to_show_more"
android:textSize="@dimen/text_size_medium"
android:padding="@dimen/activity_vertical_margin"/>
<TextView
android:id="@+id/text_view_more_content"
android:text="@string/text_more_contet_to_user"
android:textSize="@dimen/text_size_big"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text_view_sheet_title"
android:paddingLeft="@dimen/activity_vertical_margin"
android:paddingRight="@dimen/activity_vertical_margin"/>
<Button
android:text="@string/text_click_me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="@dimen/activity_vertical_margin"
android:layout_marginRight="@dimen/activity_vertical_margin"
android:layout_marginTop="@dimen/activity_vertical_margin" android:layout_below="@+id/text_view_more_content"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
برای آنکه باتم شیت قابل نشان دادن شود،با نیاز به ساخت BottomSheetBehavior داریم. که با فراخوانی BottomSheetBehavior.from() انجام می شود، با فرستادن ویویی که درست کردیم برای این فرخوانی استفاده می کنیم.
اینکار از طریق Activity که در آن از باتم شیت استفاده کردیم انجام می شود.
LinearLayout bottomSheetLayout
= (LinearLayout) findViewById(R.id.layout_bottom_sheet);
//get bottom sheet behavior from bottom sheet view
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(mLayoutBottomSheet);
با بازگشت به آبجکت BottomSheetBehavior،می تواند متد setStateرا فراخوانی کرد، با فرستادن رفتار ثابت،که موقعیت باتم شیت را تحت تاثیر قرار می دهد.
- BottomSheetBehavior.STATE_EXPANDED : باتم شیت را به طور کامل باز می کند.
- BottomSheetBehavior.STATE_HIDE باتم شیت را به طور کامل از دید خارج می کند.
- BottomSheetBehavior.STATE_COLLAPSED ارتفاع باتم شیت را به همراه با تنظیم آن در اتریبیوت peekHeight .
//to expand the bottom sheet mbottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED); //to collapse the bottom sheet mbottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
peekHeight می تواند به عنوان پیش نمایش هنگامی که صفحه ظاهر می شود استفاده شود. از طریق اتریبیوت behavior_peekHeight در فایل xml یا در کد، با فراخوانی setPeekHeighton در آبجکت BottomSheetBehavior استفاده شود.
);mbottomSheetBehavior.setPeekHeight(320);
ساخت یک مدل باتم شیت
مدل باتم شیت یک دیالوگ همراه با رفتار باتم شیت می باشد، و همچنین قسمتی از هایراکی ویو شما نیست. می تواند به عنوان منوی جایگزین استفاده شود، انتخاب کننده محتوا یا یه عنوان یک دیالوگ ساده در اپلیکیشن شما باشد.
Create a class that extends BottomSheetDialogFragment, inflated with the layout that will be used as the content of the modal dialog.
یک کلاس بسازید که از BottomSheetDialogFragment اکستند(extends ) شده باشد، لی اوت را inflated کرده که در اینجا به عنوان محتوای مدل دیالوگ ما استفاده می شود.
layout_custom_bottom_sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_vertical_margin"
android:paddingRight="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<ImageView
android:id="@+id/ic_image"
android:src="@mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/margin_normal"
android:layout_marginTop="@dimen/activity_vertical_margin"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello bottom sheet"
android:textSize="@dimen/text_size_medium"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:layout_toRightOf="@+id/ic_image"
android:layout_alignTop="@+id/ic_image"/>
<TextView
android:layout_marginTop="@dimen/activity_vertical_margin"
android:layout_below="@+id/ic_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text_lorem_ipsum"
android:lineSpacingExtra="@dimen/margin_small"
android:layout_marginBottom="@dimen/margin_normal"/>
</RelativeLayout>
یک instance از از باتم شیت ساخته و با متد show آن را نمایش دهید، با پاس دادن FragmentManager و رشته ی tag به عنوان پارامتر.
CustomBottomSheetDialog bottomSheetDialog = CustomBottomSheetDialog.getInstance(); bottomSheetDialog.show(getSupportFragmentManager(), "Custom Bottom Sheet");
منبع : mayojava.github.io
