我的博客原文地址:CoordinatorLayout 结合 AppBarLayout使用
分析
- Toolbar 随着列表的滑动而动态显示
- FloatingActionButton 在列表上划时隐藏,下拉时显示
实现
Toolbar 随着列表的滑动而动态显示这里是将Toolbar嵌套到了AppbarLayout这个控件中,并设置这个属性
app:layout_scrollFlags="scroll|enterAlways"
,然后在可滑动的控件app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:layout_scrollFlags:这是滑动标志,设置scroll表示在可滑动列表上滑时Toolbar会一起向上滑动并隐藏,它还有其他值可以设置(如果使用了其他值,必定要再添加上这个值才能起作用),enterAlways表示可滑动列表向下滑动时Toolbar会跟着一起向下滑动显示;snap:表示子View 随着可滑动列表的滑动而直接隐藏或者显示,没有中间子 View 显示的过程;enterAlwaysCollapsed:是enterAlways的增强版,它表示可滑动列表下滑 Toolbar 也跟着下滑,当超过Toolbar的高度后才开始显示子 View,这个子View一般是AppBarLayout布局里面的 view;exitUntilCollapsed:当可滑动列表上划时Toolbar直接显示在顶部,子 View 滑出屏幕。
- AppbarLayout 内部继承了一个垂直的LinearLayout,并在内部做了很多滚动的操作
布局代码如下:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xxxx.xxx.xxActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--封装的一个toolbar-->
<com.dongxi.rxdemo.widget.CustomToolbar
android:id="@+id/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
>
</com.dongxi.rxdemo.widget.CustomToolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<com.dongxi.rxdemo.widget.EmptyRecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</com.dongxi.rxdemo.widget.EmptyRecyclerView>
<!--空视图-->
<include android:id="@+id/empty_view"
layout="@layout/recyclerview_empty_layout"/>
</android.support.v4.widget.SwipeRefreshLayout>
<!--悬浮按钮-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@mipmap/ic_launcher"
/>
</android.support.design.widget.CoordinatorLayout>
- FloatingActionButton 在列表上划时隐藏,下拉时显示
这个可以有很多方式实现,推荐一篇写的不错的文章FloatingActionButton滚动时的显示与隐藏小结
我这里实现的就比较简单了,思路是在RecyclerView 滑动的时候,去监听滑动状态,如果滑动的距离大于0则上划,需要隐藏悬浮按钮,如果滑动的距离小于0则是下滑,需要展示悬浮按钮,代码如下:
mRecyclerView.setOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (dy > 0){
mFab.setVisibility(View.GONE);
}else {
mFab.setVisibility(View.VISIBLE);
}
}
});
源码地址
GitHub