Android Support Library 23.2 推出之后，增加了幾個功能，例如支持Vector Drawables 和Animated Vector Drawables；增加AppCompat DayNight 主題；Design 庫中增加Bottom Sheets，RecyclerView 支持 auto-measurement，之前的wrap_content ,match_parent 都將可以發揮作用等等
公司的App 之前使用過第三方的[BottomSheet] （https://github.com/soarcn/BottomSheet ），現在Android 有自己的BottomSheet 那還不趕緊換成原生的。然而好事多磨，Android 原生BottomSheet 資料太少，深研下去發現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);
回調：
// 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) {
}
});
}
強調：
- BottomSheet 點擊展示的默認是折疊狀態，不是完全展開狀況，所有如果需要完全展開，請設置展開狀況
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 的顯示問題
解決方法如下：
- 通過bottomSheetDialog中contentView得到parentView，通過parentView 得到BottomSheetBehavior
- 測量bottomSheetDialog布局中content的高度，設置peekHight
- 設置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();
}
}
