微信号:androidmate

介绍:Android 开发进阶之路.

教你使用设计支持库:BottomSheets

2016-02-25 21:33 Android CJJ

关于作者

Github:Android_CJJ |  https://github.com/android-cjj

微博:@Android_CJJ | http://weibo.com/chenjijun2011


由CJJ 创建的Github 交流群:477826523;

进群有要求,至少你Github有东西,进群报Github ID。



BottomSheets

Android Support Library 23.2里的 Design Support Library 新加了一个Bottom Sheets 控件,一个底部表,就是我们经常在分享或者地图、音乐等app 看到的效果。



昨天晚上Support Library 23.2 包还没能更新,官方视频就已经透露出了,视频地址(https://www.youtube.com/watch?v=7E2lNBM38IE),从视频看出Support Library 23.2 包新增了:

  • Support Vector Drawables and Animated Vector Drawables

  • AppCompat DayNight theme

  • Design Support Library: Bottom Sheets

  • Support v4: MediaBrowserServiceCompat

  • RecyclerView

  • Custom Tabs

  • Leanback for Android TV


具体可以上官网博客看看。这篇文章我给大家说说BottomSheetBehavior 的使用及注意的地方。


Usage


在布局文件xml中

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout    
   xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/cl"    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"        >          
       <!-- NestedScrollView里设置你的底部表长什么样的-->    </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>


在java代码中

@Override
protected void onCreate(Bundle savedInstanceState) {        
   super.onCreate(savedInstanceState);    setContentView(R.layout.activity_ns);        
   // The View with the BottomSheetBehavior    CoordinatorLayout coordinatorLayout
       = (CoordinatorLayout) findViewById(R.id.cl);        
   View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);        final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);    behavior.setBottomSheetCallback(
   new BottomSheetBehavior.BottomSheetCallback() {            
       @Override        public void onStateChanged(@NonNull View bottomSheet, int newState) {                //这里是bottomSheet 状态的改变,根据slideOffset可以做一些动画            
       }
   
       @Override        public void onSlide(@NonNull View bottomSheet, float slideOffset) {                //这里是拖拽中的回调,根据slideOffset可以做一些动画        }     });
}


其实也挺简单的,我来解释一下。通过附加一个BottomSheetBehavior 给CoordinatorLayout 的子视图,上文xml中的是NestedScrollView(adding app:layout_behavior="android.support.design.widget.BottomSheetBehavior”),当然,RecyclerView 也是可以的。现在你肯定有疑问了,像ListView、ScrollView 这些可以吗?官方说API 21+ 就可以。

app:behavior_hideable="true"
app:behavior_peekHeight="50dp"


这两个属性我说说,peekHeight 是当Bottom Sheets 关闭的时候,底部下表我们能看到的高度,hideable 是当我们拖拽下拉的时候,bottom sheet是否能全部隐藏。 如果你需要监听Bottom Sheets 回调的状态,可以通过setBottomSheetCallback 来实现,onSlide 方法是拖拽中的回调,根据slideOffset 可以做一些动画 onStateChanged 方法可以监听到状态的改变,总共有5种

  • STATE_COLLAPSED: 关闭Bottom Sheets,显示peekHeight的高度,默认是0

  • STATE_DRAGGING: 用户拖拽Bottom Sheets 时的状态

  • STATE_SETTLING: 当Bottom Sheets view 释放时记录的状态

  • STATE_EXPANDED: 当Bottom Sheets 展开的状态

  • STATE_HIDDEN: 当Bottom Sheets 隐藏的状态


我也简单的写了两个demo,你可以看我源码是怎么用的。


使用就这些了,接下来我们来讲讲该注意的地方,应该说怎样更好的使用它。



关闭Bottom Sheets的行为

可以通过下图的形式,拖拽、点击bottom sheet 之外的地方和通过‘x’按钮。




合适的视图设计


上图你可明显的看到第二幅这种设计是不合适的,空白太多,不美观,对吧!




如果Bottom Sheets 展开或者上拉覆盖了ActionBar or ToolBar 这种方式也是不合适的。



尺寸的设计

为了符合Material Design 设计,我们对尺寸有严格的要求,当然,你想随意我也阻止不了。


我想说的就这些了,如果还有补充,欢迎PR!


文章的Demo 地址:https://github.com/android-cjj/BottomSheets

或者点击左下角“阅读原文进入地址。


【安卓同学的公众号,更多分享中...


 
安卓同学 更多文章 如何优雅地科学上网 IT,互联网,科技博客推荐 八款Android 开发者必备的小工具 十款「简洁实用」的手机 App 推荐 作为移动开发者,你应该了解Baas(后端即服务)
猜您喜欢 Swift中下划线和"#"的妙用 十分钟掌握Android中的数据存储 Android Support Library 之 夜间模式 微软日前正式宣布Windows Phone 8.1移动操作系统将于今年6月24日正式推出 博士后论坛┃明天下午,在雾霾中探寻互联网法制道路