1. 程式人生 > >Android開發底部點選按鈕從螢幕底部滑出面板(一)

Android開發底部點選按鈕從螢幕底部滑出面板(一)

最近需要實現一個類似百度地圖搜尋美食上滑彈出一個覆蓋面板。網上也有很多的開源專案像 [Android Sliding Up Panel]
Android的Android Support Library 23.2裡的 Design Support Library也有一個新的控制元件Bottom Sheets。用起來也比較簡單。CoordinatorLayout作為父佈局 子佈局只需要設定layout_behavior就可以了
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" > <android.support.v4.widget.NestedScrollView android:id="@+id/bottom_sheet" android:layout_width="match_parent"
android:layout_height="wrap_content" app:behavior_hideable="true" app:behavior_peekHeight="50dp" app:layout_behavior="@string/bottom_sheet_behavior"> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

然後在程式碼中獲取BottomSheetBehavior物件設定引數

View mBehiviorView = findViewById(R.id.bottom_sheet);
BottomSheetBehavior   mBottomSheetBehavior = BottomSheetBehavior.from(behiviorView);
mBottomSheetBehavior.setHideable(true);
mBottomSheetBehavior.setPeekHeight(height/2);

peekHeight 是當Bottom Sheets關閉的時候,底部下表我們能看到的高度.
hideable 是當我們拖拽下拉的時候,bottom sheet是否能全部隱藏。

顯示、隱藏、摺疊效果可以通過設定狀態來實現

mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED)

BottomSheetBehavior為我們提供了5中狀態

STATE_COLLAPSED: 關閉Bottom Sheets,顯示peekHeight的高度,預設是0
STATE_DRAGGING: 使用者拖拽Bottom Sheets時的狀態
STATE_SETTLING: 當Bottom Sheets view釋放時記錄的狀態。
STATE_EXPANDED: 當Bottom Sheets 展開的狀態
STATE_HIDDEN: 當Bottom Sheets 隱藏的狀態

如果你需要監聽Bottom Sheets回撥的狀態,可以通過setBottomSheetCallback來實現,onSlide方法是拖拽中的回撥,根據slideOffset可以做一些動畫 onStateChanged方法可以監聽到狀態的改變

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

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

            }
});

這樣從螢幕底部滑出面板的效果就實現了

之後領導又想實現bottomSheetBehavior從摺疊到完全展開的時候讓頂部的搜尋框也一起滑動隱藏,從展開到摺疊狀態時搜尋框滑動顯示,從摺疊到隱藏狀態時搜尋框不動。這時就想到了之前用到的app:layout_scrollFlags=”scroll|enterAlways” 但是這個屬性在和嵌套了Recycleview的bottomSheetBehavior配合使用時會出現Recycleview向下滑動時搜尋框就一起向下滑動顯示了,放棄這種做法。最後只能從Bottom Sheets回撥著手了

其實解決起來也比較簡單,將搜尋框佈局放到最上層。在onSlide回撥中通過scrollTo的方式實現

@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
       if(slideOffset > 0) {
             ((View) header.getParent()).scrollTo(0, (int) ((header.getHeight() + headerMargin) * slideOffset));
       }
 }

這只是一種解決方法,我在網上也看到好多解決方法還要好好研究一下啊