Zero

Android BottomSheet控件用法及使用问题

发表于 |

由于项目需求需要，要使用底部弹出菜单的效果，正好看到了谷歌推出了Android Support Library 23.2 ，在更新的功能中就有BottomSheet这个控件，来实现底部弹出菜单的效果。而以前也有人写过这种效果。

BottomSheet（https://github.com/soarcn/BottomSheet ）

现在官方推出来了，当然是使用原生的好，然而使用过程中还是不如人意啊，用摩托罗拉，魅族手机做测试的时候控件有时弹不出来，弄的也挺麻烦的，原来原生也有坑的。

BottomSheet 的使用：

BottomSheet 使用需要CoordinatorLayout作为父布局，BottomSheet 的布局作为CoordinatorLayout 的子布局，并且BottomSheetBehavior（比如加上app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”）

<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"
android:fitsSystemWindows="true"
tools:context="android.com.bottomsheets.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<include layout="@layout/content_main" />

<include layout="@layout/bottom_sheet_main" />

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

实际使用过程中主要依靠BottomSheetBehavior来控制BottomSheet的展示及回调。
BottomSheetBehavior 具有五种状态：

  • STATE_COLLAPSED ：默认的折叠状态， bottom sheets只在底部显示一部分布局。显示高度可以通过 app:behavior_peekHeight 设置（默认是0）
  • STATE_DRAGGING：过渡状态，此时用户正在向上或者向下拖动bottom sheet
  • STATE_SETTLING : 视图从脱离手指自由滑动到最终停下的这一小段时间
  • STATE_EXPANDED ： bottom sheet 处于完全展开的状态：当bottom sheet的高度低于CoordinatorLayout容器时，整个bottom sheet都可见；或者CoordinatorLayout容器已经被bottom sheet填满。
  • STATE_HIDDEN ： 默认无此状态（可通过app:behavior_hideable 启用此状态），启用后用户将能通过向下滑动完全隐藏 bottom sheet

设置状态：

bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

强调：

BottomSheet 点击展示的默认是折叠状态，不是完全展开状况，所有如果需要完全展开，请设置展开状况

回调：

// The View with the BottomSheetBehavio 
View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomSheet));

bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
        if (newState == BottomSheetBehavior.STATE_EXPANDED) {
            text1.setText("Collapse Me!");
} else {
            text1.setText("Expand Me!");
}
    }

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

    }
});
}

BottomSheetDialog

BottomSheetBehavior将能帮你实现 常驻bottom sheet（ persistent bottom sheet）的场景, 但这个版本还提供了BottomSheetDialog 和 BottomSheetDialogFragment 来实现 modal bottom sheets的场景。只需要将AppCompatDialog 或者AppCompatDialogFragment分别替换成上述的两个控件，你就拥有了 bottom sheet 风格的对话框。

使用问题1：

然而我们实际我们需要BottomSheetDialog 是展开的，而BottomSheetDialog只展示一部分
原因：BottomSheetDialog默认是STATE_COLLAPSED，所有BottomSheetDialog 依靠peekHight来设置高度，系统BottomSheetDialog 默认高度为256dp（查源码得知）,那按理来说我们的BottomSheetDialog 高度该是256dp，但是我们实际发现BottomSheetDialog高度也不等于256dp。我们研究下BottomSheetBehavior的中控制BottomSheetDialog高度源码:

@Override
public boolean onLayoutChild(CoordinatorLayout parent, V child, int layoutDirection) {
    // First let the parent lay it out
    if (mState != STATE_DRAGGING && mState != STATE_SETTLING) {
        parent.onLayoutChild(child, layoutDirection);
    }
    // Offset the bottom sheet
    mParentHeight = parent.getHeight();
    mMinOffset = Math.max(0, mParentHeight - child.getHeight());
    mMaxOffset = mParentHeight - mPeekHeight;
    if (mState == STATE_EXPANDED) {
        ViewCompat.offsetTopAndBottom(child, mMinOffset);
    } else if (mHideable && mState == STATE_HIDDEN) {
        ViewCompat.offsetTopAndBottom(child, mParentHeight);
    } else if (mState == STATE_COLLAPSED) {
        ViewCompat.offsetTopAndBottom(child, mMaxOffset);
    }
    if (mViewDragHelper == null) {
        mViewDragHelper = ViewDragHelper.create(parent, mDragCallback);
    }
    mViewRef = new WeakReference<>(child);
    mNestedScrollingChildRef = new WeakReference<>(findScrollingChild(child));
    return true;
}

通过源码我们可以得知BottomSheetBehavior通过改变child的偏移量而控制BottomSheetDialog的高度，默认状态为STATE_COLLAPSED,child向下移动mMaxOffset高度，从而控制child显示高度为mPeekHeight,这就需要child与parent 顶部对齐，child的getTop 为0；

然而我们再去查看Android的BottomSheetDialog 内中布局R.layout.design_bottom_sheet_dialog,发现我们自定义的的BottomSheetDialog 的contentView 是放置在FrameLayout 中的，然而FrameLayout出于某些原因为垂直居中的，而不是顶部对齐，从而导致BottomSheetDialog在256dp的基础上向下偏移,只展示一部分。
所以我们可以通过下面方法解决BottomSheetDialog 的显示问题

解决方法如下：

1 . 通过bottomSheetDialog中contentView得到parentView，通过parentView 得到BottomSheetBehavior
2 . 测量bottomSheetDialog布局中content的高度，设置peekHight
3 . 设置bottomSheetDialog 的contentView 对应的父布局CoordinatorLayout的Grivity 为Gravity.TOP | Gravity.CENTER_HORIZONTAL;

final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
 View contentView = View.inflate(this, R.layout.bottom_sheet_avatar, null);

 View.OnClickListener clickListener = new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         switch (v.getId()) {
             case R.id.avatar_open_photo:
                 openCamera();
                 break;
             case R.id.avatar_open_picture:
                 openPicture();
                 break;
         }
         if (bottomSheetDialog != null && bottomSheetDialog.isShowing()) {
             bottomSheetDialog.dismiss();
         }
     }
 };

 contentView.findViewById(R.id.avatar_open_photo).setOnClickListener(clickListener);
 contentView.findViewById(R.id.avatar_open_picture).setOnClickListener(clickListener);
 contentView.findViewById(R.id.avatar_cancel).setOnClickListener(clickListener);

 bottomSheetDialog.setContentView(contentView);
 View parent = (View) contentView.getParent();
 BottomSheetBehavior behavior = BottomSheetBehavior.from(parent);
 contentView.measure(0, 0);
 behavior.setPeekHeight(contentView.getMeasuredHeight());
 CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) parent.getLayoutParams();
 params.gravity = Gravity.TOP | Gravity.CENTER_HORIZONTAL;
 parent.setLayoutParams(params);
 bottomSheetDialog.show();

使用问题2：

当我们设置bottomSheetDialog每次点击后不new,而是直接show的话，然而当我们会bottomSheetDialog 展开后，我们将BottomSheetDialog划下隐藏后， 再点击展示BottomSheetDialog后，会发现页面只是变暗，BottomsheetDialog未展开，这是由于之前我们划下收缩隐藏BottomSheetDialog后，bottomSheetDialogBehavior的状态为隐藏，再次show之后，系统未恢复bottomSheetDialogBehavior的状态，还是隐藏，所以再次点击后页面只是变暗。

@Override
   public void onClick(View v) {
       switch (v.getId()) {
           case R.id.showBottomSheetDialogButton:
               if (bottomSheetDialog != null) {
                   bottomSheetDialog.show();
                   Log.i("0000", "behavior_state:" + bottomSheetDialogBehavior.getState());
                   Log.i("0000", "STATE_HIDDEN :" + BottomSheetBehavior.STATE_HIDDEN);
                   return;
               }

               bottomSheetDialog = new BottomSheetDialog(this);
               bottomSheetDialog.show();
       }
   }

唉，没想到官方出的也会有这么2个问题，不过通过以上的方法也解决了这2个问题。

感谢原作者的分享：

文／sunshine2050（简书作者）
原文链接：http://www.jianshu.com/p/38af0cf77352
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。