Android 之 AppBarLayout

发表于 | 分类于 | | 阅读次数 | 浏览 次

一、简介

  • AppBarLayout 是 Design Support 库中提供的一个控件，它是一个垂直方向的 LinearLayout ，它的内部做了很多滚动事件的封装，并应用了一些 Material Design 的设计理念！

二、简单使用

  • AppBarLayout 一般是配合 CoordinatorLayout 来使用，实现一些 Material Design 效果，CoordinatorLayout 是一个加强版的 FrameLayout，在 CoordinatorLayout 下添加控件会出现覆盖的情况，因为 FrameLayout 默认都是从屏幕的左上角开始添加控件，如果加上 AppBarLayout 的话，就会避免这种覆盖的情况，并实现一些 Material Design 效果！
2.1 添加 Design Support 的依赖
1
2
3
4
5
6
7
8
9
10
dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:design:25.3.1'
    
}
2.2 使用 CoodinatorLayout 而不使用 AppBarLayout 的情况
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
            <!--标题栏-->
            <android.support.v7.widget.Toolbar
                
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                android:fitsSystemWindows="true"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
                <!--自定义控件-->
                <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="FloatingActionButton"
                    android:textSize="20dp"
                    android:textStyle="bold" />
            </android.support.v7.widget.Toolbar>
        <!--RecyclerView-->
        <android.support.v7.widget.RecyclerView
           
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/toolbar"></android.support.v7.widget.RecyclerView>
        <!--FloatingActionButton-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/floating_icon"
            app:fabSize="normal"
            app:pressedTranslationZ="10dp"
            app:rippleColor="@color/colorAccent"
            />
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
  • 运行结果如下：
    image

发现: RecyclerView 将 Toolbar 覆盖掉了，而且也很难看，这时候就需要 AppBarLayout 来协调这些个关系

2.3 CooldinatorLayout 和 AppBarLayout 配合使用

  • 在布局文件中，将 Toolbar 包裹在 AppBarlayout 之内，并给 RecyclerView 指定个布局行为

  • 修改后的布局文件如下所示：

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--标题栏-->
            <android.support.v7.widget.Toolbar
                
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                android:fitsSystemWindows="true"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
                <!--自定义控件-->
                <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="FloatingActionButton"
                    android:textSize="20dp"
                    android:textStyle="bold" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.AppBarLayout>
        <!-- app:layout_behavior="@string/appbar_scrolling_view_behavior" 指定一个布局行为-->
        <!--RecyclerView-->
        <android.support.v7.widget.RecyclerView
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/toolbar"></android.support.v7.widget.RecyclerView>
        <!--FloatingActionButton-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floating"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/floating_icon"
            app:fabSize="normal"
            app:pressedTranslationZ="10dp"
            app:rippleColor="@color/colorAccent"
            />
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

  • 运行结果如下
    image

  • 显示结果正常

    2.4 添加 Material Design 效果
2.4.1 当 AppBarLayout 收到滚动事件的时候，它内部的子控件是可以指定如何去影响这些事件的，其实就是在 Toolbar 中添加一条属性：app:layout_scrollFlags ，一共有五个 Flag 可选，在这里常用的有三个

  • scroll 表示向上滚动时，toolbar 会跟着一起向上滚动并隐藏

  • enterAlways 表示向下滚动时，toolbar 会跟着一起向下滚动并重新显示

  • snap 表示当 toolbar 还没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择隐藏或者显示。