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));
       }
 }

这只是一种解决方法,网上也看到好多解决方法还要好好研究一下啊

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值