带有FloatButton的Android BottomSheet [英] Android BottomSheet with FloatButton

问题描述

如何使这种交互方式像Google Map中的Bottom sheet和FloatButton一样? 第一个屏幕截图显示了两个FloatButtons.单击地图后，第二个按钮更改图标并向上滚动并钩在bottomSheet边缘.(屏幕截图2).

第一个屏幕截图

第二个屏幕截图

我认为FAB首先是锚定在MapView的right|bottom上，并且具有与BottomSheet视图相同的高度.

一旦BottomSheet窥视到某个高度并且BottomSheet top等于FAB高度的一半，则将新的锚ID附加到FAB CoordinatorLayout.Params，基本上是ID 视图.

只为您提供代码指针:

CoordinatorLayout.Behavior behavior = (CoordinatorLayout.Behavior)fab.getLayoutParams();
int boundary = fab.getTop() + (fab.getHeight() * 0.5);


//inside `BottomSheet` callback methods
if(sheetView.getTop() >= boundary){
   //sheet is expanding or its peeking height was changed
   behavior.setAnchorId(sheetView.getId());
} else if (sheetView.getTop() <= boundary){
   //sheet is animating to collapse, being collapsed 
   behavior.setAnchorId(mapView.getId());
}

How to make this interaction Bottom sheet and FloatButton like in Google Map? The first screenshot shows two FloatButtons.After clicking on map, the second button change icon and scroll up and hooking on bottomSheet edge.(Screenshot2).

First Screenshot

Second Screenshot

解决方案

I suppose that FAB firstly is anchored to the right|bottom of the MapView and has the same elevation as the BottomSheet view.

Once the BottomSheet is peeking to some height and BottomSheet top is equal to the half of the height of the FAB, then a new anchor id is attached to FAB CoordinatorLayout.Params, which basically is the id BottomSheet view.

Just to give you code pointers:

CoordinatorLayout.Behavior behavior = (CoordinatorLayout.Behavior)fab.getLayoutParams();
int boundary = fab.getTop() + (fab.getHeight() * 0.5);


//inside `BottomSheet` callback methods
if(sheetView.getTop() >= boundary){
   //sheet is expanding or its peeking height was changed
   behavior.setAnchorId(sheetView.getId());
} else if (sheetView.getTop() <= boundary){
   //sheet is animating to collapse, being collapsed 
   behavior.setAnchorId(mapView.getId());
}

这篇关于带有FloatButton的Android BottomSheet的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！