اندروید : وصل کردن View ها به Bottom Sheet

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

شما می توانید view را بر حسب حرکت Bottom Sheet نمایش دهید .

بنابراین Bottom Sheet نواری می باشد که از پایین صفحه باز می شود و برای نمایش اطلاعات ، منو ها و یا هر چیز دیگری به کار می رود .

Android: Anchoring Views to Bottom Sheet

این پست ادامه پست اندروید : Bottom Sheet می باشد .

شما میتوانید پست قبلی که نحوه پیاده سازی نوار پایین یا Bottom Sheet می باشد را بررسی کنید .

در این پست ما با همان لایوت هایی که در پست قبلی داشتیم , ادامه می دهیم .

Android: Bottom Sheet

در زیر ما Floating Action Button را به لایوت پست قبلی اصافه میکنیم .

View جدید همانند bottom sheet باید فرزند مستقیم CoordinatorLayout باشد .

برای وصل کردن View جدید به bottom sheet , ما باید app:layout_anchor را برابر با آیدی bottom sheet قرار دهیم

و app:layout_anchorGravity را با  مقدار top | end اضافه کنیم .

<?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.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_add_shopping_cart_white_24dp"
        android:theme="@style/PrimaryActionButton"
        app:layout_anchor="@+id/bottom_sheet"
        app:layout_anchorGravity="top|end" />

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

اکنون Floating Action Button در لبه بالایی bottom sheet قرار گیرد و باید به bottom sheet بچسبد و با آن حرکت کند .

 

پنهان کردن Floating Action Bar با اسکرول کردن

 برای پنهان کردن FAB  هنگامی که bottom sheet اسلاید می شود شما نیاز به اضافه کردن listener به bottom sheet و  hide/show برای FAB دارید .

ابتدا view ها را پیدا میکنیم.

fab = findViewById(R.id.fab);
View llBottomSheet = findViewById(R.id.bottom_sheet);

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

اگر شما میخواهید FAB به تناسب اسلاید شدن نوار پایین(bottom sheet) , پنهان یا نمایش داده شود از این کد استفاده کنید

// 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) {
        fab.animate().scaleX(1 - slideOffset).scaleY(1 - slideOffset).setDuration(0).start();
    }
});

یا اگر شما میخواهید FAB بلافاصله پنهان شود زمانی که نوار اسلاید میخورد از این کد استفاده کنید

Button بعد اینکه نوار کاملا جمع شد نمایش داده خواهد شد .

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

        // this part hides the button immediately and waits bottom sheet
        // to collapse to show
        if (BottomSheetBehavior.STATE_DRAGGING == newState) {
            fab.animate().scaleX(0).scaleY(0).setDuration(300).start();
        } else if (BottomSheetBehavior.STATE_COLLAPSED == newState) {
            fab.animate().scaleX(1).scaleY(1).setDuration(300).start();
        }
    }

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

تفاوت نتایج کدهای بالا را در زیر مشاهد میکنید . 

fab_anchor_buttom_sheet 

 

امیدوارم خواندن این مقاله برای شما مفید بوده باشد .


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

منابع: medium.com

دیدگاه ها:
حسین
۳ هفته قبل
reply
خیلی مقاله خوبی بود
ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.
مولف:
یوسف رضا مختاری
عضو تیم تولید محتوای آرکادمی
مشاهده‌ی پروفایل
آمار و مشخصات:
event
جمعه ۱۳ مهر ۹۷
public
arcademy.ir/+a333
favorite
۳ پسند
comment
۱ دیدگاه
group
۱۶۳ بازدیدکننده
visibility
۲۰۳ بازدید
مقالات پشینهادی:
رده های این مقاله: