اندروید : Bottom sheet

دوشنبه ۱۶ مهر ۹۷ توسط یوسف رضا مختاری

Bottom sheet  یا نوار پایین یک کامپوننت متریال دیزاین می باشد که برای نشان دادن محتوای بیشتر از پایین صفحه باز می شود .

شما می توانید اطلاعات بیشتری در مورد Bottom Sheet از دستورالعمل های متریال دیزاین گوگل پیدا کنید .

Android Bottom sheet

 

اضافه کردن resource ها

آخرین ورژن appcompat و کتابخانه design support را به پروژه تان اضافه کنید .

dependencies {
    //replace X.X.X with the latest version
    compile 'com.android.support:appcompat-v7:X.X.X'
    compile 'com.android.support:design:X.X.X'
}

اکتیویتی شما باید از AppCompatActivity ارث بری کند .

public class ButtonActivity extends AppCompatActivity {
...
}

 

ایجاد layout ها

محتوای Bottom sheet

این layout که شامل محتوای bottom sheet می باشد

bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="340dp"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    app:behavior_hideable="true"
    app:behavior_peekHeight="80dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="@string/bottom_sheet_peek"
        android:textColor="@android:color/white" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="@string/bottom_sheet_content"
        android:textColor="@android:color/white" />

</LinearLayout>

behavior_peekHeight : ارتفاع بخش قابل رویت را مشخص میکند .

behavior_hideable :  مشخص میکند اگر bottom sheet را به پایین بکشیم میتواند پنهان شود یا خیر .

 

Container view 

CoordinatorLayout را به عنوان view ریشه(root) خود اضافه کنید سپس bottom sheet را به عنوان فرزند مستقیم CoordinatorLayout قرار دهید .

لایوت های  app_bar و activity_bottom_sheet_content  برخی از view های مرجع هستند که به bottom sheet مربوط نیستند .

بنابراین شما می توانید آنها را جایگزین یا حذف کنید.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidsample.BottomSheetActivity">

    <!-- include app bar -->
    <include layout="@layout/app_bar" />

    <!-- include main content -->
    <include layout="@layout/activity_bottom_sheet_content" />

    <!-- include bottom sheet -->
    <include layout="@layout/bottom_sheet" />

</android.support.design.widget.CoordinatorLayout>

در این مرحله دیالوگ bottom sheet  باید به این شکل عمل می کند

bottom sheet

کنترل داینامیک

میتوانیم رفتار ها و ویژیگی ها دیالوگ bottom sheet را  به صورت داینامیک در جاوا نیز کنترل کنیم .

// get the bottom sheet view
LinearLayout llBottomSheet = (LinearLayout) findViewById(R.id.bottom_sheet);

// init the bottom sheet behavior
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(llBottomSheet);

// change the state of the bottom sheet
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

// set the peek height
bottomSheetBehavior.setPeekHeight(340);

// set hideable or not
bottomSheetBehavior.setHideable(false);

// set callback for changes
bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        
    }

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

    }
});

 

همین!


کلیدواژه: متریال دیزاین Bottom sheet کار با Bottom Sheet

منابع: medium.com

دیدگاه ها:
حسین
۳ هفته قبل
reply
ممنون بابت آموزش
ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.