Bottom Sheets در اندروید

باتم شیت (Bottom sheet) یکی از امکانات متریال دیزاین می باشد، که به کتابخانه ی دیزاین ساپورت در ورژن 23.2 اضافه شده بود.  باتم شیت یک  پنجره بسیار ساده است که از پایین صفحه ظاهر می شود، و میتواند اطلاعات بیشتری به کاربر نشان دهد. نمونه ی باتم شیت را می توان در بعضی اپلیکیشن های گوگل و ویجت ها مشاهده کرد، مانند انتخاب مکان از Api ‌مکانی.

در این پست ، ما میخواهیم نحوه ی استفاده از باتم شیت در اپلیکیشن را به شما نشان دهیم. باتم شیت میتواند قسمتی از رابطه کاربری یا یک مدل موقت باشد. برای رسیدن به این امکانات،‌ امکاناتی را که کتابخانه ساپورت دیزاین برای شما فراهم می کند شامل :

BottomSheetBehavior  : میتواند در CoordinatorLayout استفاده شود.

BottomSheetDialog : که یک دیالوگ همراه با رفتار باتم شیت می باشد.

BottomSheetDialogFragment :  که بسطی از DialogFragment، که یک aBottomSheetDialog  ساخته به جای یک دیالوگ استاندارد.

برای شروع و استفاده باتم شیت در اپلیکیشن شما، کتابخانه ساپورت را به  dependecy  خود در فایل build.gradle  اضافه کنید.




compile 'com.android.support:design:'







ساخت یک باتم شیت ثابت : یک لی اوت با به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