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,并在内部做了很多滚动的操作

布局代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?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则是下滑,需要展示悬浮按钮,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

小额支持我写出更好的文章~