استخدام BottomSheet

في اخر تحديث لمكتبة android support Design رقم 23.2 تم اضافة احدى مكونات الماتيريال ديزاين وهي BottomSheet وسنقوم باذن الله ي هذه التدوينة بتعلم طريقة استخدامها

تم تحديث باضافة نوعين من BottomSheet :

1. اضافته كـView داخل ملفات التصميم .
2. استخدامة كصندوق حواز “Dialog Fragment”

اولا : تثبيت المكتبة او تحديثها :

dependencies {
    compile 'com.android.support:design:23.2.0'
}

ثانيا : اضافتة كـView  داخل ملفات التصميم “BottomSheetBehavior” :

سيكون استخدام BottomSheetBehavior داخل FrameLayout  باستخدام attributes الـBehavior وسيكون شكل الكود كما سنلاحظ الان 

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout ...>
    <android.support.design.widget.AppBarLayout...>
        <android.support.design.widget.CollapsingToolbarLayout...">
            <android.support.v7.widget.Toolbar... />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_layout" />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        app:behavior_hideable="false"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">
        <include layout="@layout/bottom_sheet_content_view" />
    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>

تم تحديد الاسطر المهمة داخل الكود:

• behavior_hideable : هذا يحدد اذا bottom sheet يختفي عند السحب للاسفل .
• behavior_peekHeight  : هنا نحدد طول bottom sheet وهنا نجد ان القيمة 0dp وذلك لاننا نريد توضيع طريقة تغيير الارتفاع برمجياً.
• BottomSheetBehavior : هنا تسمح لنا بتحدد behavior_peekHeight برمجيا كما ذكرنا سابقاً مع ملاحظة ان كل child ذاخل View سيتم استخدام requestLayout() ليتم تنفيذ طول bottom sheet .

peekButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Let's peek it, programmatically
                View peakView = findViewById(R.id.drag_me);
                mBottomSheetBehavior.setPeekHeight(peakView.getHeight());
                peakView.requestLayout();
            }
        });

BottomSheetBehavior : يمكن استدعائه بطريقة سهله وذلك باستخدام دالة from(view) 

BottomSheetCallback : هنا لتتبع حالة bottom sheet وتغيراته لنقوم باجراء العمليات عليه.

FrameLayout parentThatHasBottomSheetBehavior = (FrameLayout) recyclerView.getParent().getParent();
        mBottomSheetBehavior = BottomSheetBehavior.from(parentThatHasBottomSheetBehavior);
        if (mBottomSheetBehavior != null) {
            setStateText(mBottomSheetBehavior.getState());
            mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
                @Override
                public void onStateChanged(@NonNull View bottomSheet, int newState) {
                    setStateText(newState);
                }

                @Override
                public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                    setOffsetText(slideOffset);
                }
            });
        }

الان عند تشغيل الكود المرفق ستكون النتيجة كما سنشاهد في الصورة بالاسفل :

ثالثاً : استخدام BottomSheet كـDilaog:

في التحديث الجديد للمكتبة تمت اضافة طريقة لاستخدام bottomsheet كـDilaog وانا افضل هذه الطريقة لانها لاتحتاج للكثير من التخصيص وبعيدا عن كثرة اكواد التصميم

public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {
//....
@Override
public void setupDialog(Dialog dialog, int style) {
    super.setupDialog(dialog, style);
    View contentView = View.inflate(getContext(), R.layout.bottom_sheet_dialog_content_view, null);
    dialog.setContentView(contentView);
    CoordinatorLayout.LayoutParams layoutParams =
            (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
    CoordinatorLayout.Behavior behavior = layoutParams.getBehavior();
    if (behavior != null && behavior instanceof BottomSheetBehavior) {
        ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
    }
//...
}

عند استخدام BottomSheetDilogFragment سيكون مخصص ليكون ملئ الشاشة او على حسب السحب على الشاشة مع خيار للاخفاء عن السحب للاسفل .

وصلنا لنهاية الدرس وسيتم تحديثه بحكم ان هذا المكون جديد ومع الوقت ستكون هناك مزيد من الخيارات كاستخدامه مثلا مع FloatActionButton كما هو موجود في طريقة تصميم الماتيريال ديزاين

اتمنى اكون وفقت في اعطائكم لمحه سريعه عن هذا المكون وشكراً للاطلاع،

المشروع :

https://github.com/ahmedoid/BottomSheetSample-master