AppBarLayout

2017-10-10 本文已影响0人珞神

一、简介

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

二、简单使用

AppBarLayout 一般是配合 CoordinatorLayout 来使用，实现一些 Material Design 效果，CoordinatorLayout 是一个加强版的 FrameLayout，在 CoordinatorLayout 下添加控件会出现覆盖的情况，因为 FrameLayout 默认都是从屏幕的左上角开始添加控件，如果加上 AppBarLayout 的话，就会避免这种覆盖的情况，并实现一些 Material Design 效果！

2.1 添加 Design Support 的依赖

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 的情况

<?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 指定个布局行为
修改后的布局文件如下所示：

<?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 还没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择隐藏或者显示。

AppBarLayout

一、简介

二、简单使用

2.1 添加 Design Support 的依赖

2.2 使用 CoodinatorLayout 而不使用 AppBarLayout 的情况

2.3 CooldinatorLayout 和 AppBarLayout 配合使用

2.4 添加 Material Design 效果

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

猜你喜欢

热点阅读