CoordinatorLayout ＋ AppBarLayout + ToolBar

来源：互联网发布：js中json数组编辑：程序博客网时间：2024/05/29 04:36

主要参考了 http://blog.csdn.net/leejizhou/article/details/50533020, 然后做了一个自己的例子

首先是引入sdk 在builde.gradle文件中添加

compile 'com.android.support:appcompat-v7:23.1.1'

compile 'com.android.support:design:23.1.1'

其实这一部份主要是布局上操作, 代码没有什么内容

需求一页面有scroll内容时, toolbar 在上滑时隐藏,下滑时显示,详情见注释部分

记得把actionbar隐藏，设置主题就行想要状态栏背景和图片背景无缝链接就需要在style文件中将 colorPrimaryDark （状态栏）透明

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >

   <android.support.design.widget.AppBarLayout    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">  <!-- 用不用这个Theme影响不大-->
    <!--为了能够让Toolbar响应滚动事件需要在Toolbar外面放AppBarLayout的布局容器-->
    <!-- AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，
    就可以在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView滚动事件发生的时候会被触发-->
    <!-- Toolbar中的app:layout_scrollFlags属性里面必须至少启用scroll，
    这样Toolbar才会滚动出屏幕，否则它将一直固定在顶部。-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways">
        <TextView
            android:textSize="22sp"
            android:text="title"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

    <!-- 定义AppBarLayout与滚动视图之间的联系-->
    <!-- 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。
    Android design support library包含了一个字符串资源@string/appbar_scrolling_view_behavior，
    这个是官方定义好的，我们直接拿来用就OK了，它和AppBarLayout.ScrollingViewBehavior相匹配，
    当这个滚动的View发生滚动事件时候，CoordinatorLayout会搜索自己所包含的其他view，
    看看是否有view与这个behavior相关联，所以NestedScrollView滚动的时候会触发AppBarLayout-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:text="textString"
                android:textSize="20sp"/>

            <Button
                android:id="@+id/btn"
                android:text="click me"
                android:textSize="16sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

总结下:

1. 根布局控件必须是CoordinatorLayout,最好设置属性android:fitsSystemWindows="true"

2. toolbar外层要放置一个AppBarLayout,

3. toolbar要设置一个属性app:layout_scrollFlags="scroll|enterAlways",

这个属性是最为AppBarLayout的子控件存在的属性,设置为scroll才能不固定.

4. 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加 app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,这样才能和AppBarLayout联动

需求二视差滚动和toolbar切换显示

直接看布局文件以及注释:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        app:theme="@style/ThemeOverlay.AppCompat.Dark">

        <!--
        CollapsingToolbarLayout的2个重要属性:
             必须要有： layout_scrollFlags=”scroll|exitUntilCollapsed”：向上滚动时收缩View，
             但可以固定Toolbar，使Toolbar一直在上面，
              enterAlways:使Toolbar不保留在上面 但是手指一向下滑动就出现
                enterAlwaysCollapsed 不保留
              exitUntilCollapsed 保留
              app:expandedTitleMargin="33dp" 布局张开时候title与周边的距离
              app:statusBarScrim="@color/colorAccent" statusBar颜色 不一定生效 建议在style文件中设置
             app:contentScrim： 当CollapsingToolbarLayout折叠后背景颜色-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            android:fitsSystemWindows="true"
            app:expandedTitleMargin="33dp"
            app:statusBarScrim="@color/colorAccent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- CollapsingToolbarLayout子view，ImageView属性
                layout_collapseMode=”parallax”：使ImageView跟随滚动的时候具有视差效果 图片向下走 设置为pin 图片向上走
                layout_collapseParallaxMultiplier=”0.1”：视差因子，设置视差滚动因子，值为：0~1-->
            <ImageView

                 android:fitsSystemWindows="true"／／这个属性加上主题设置状态栏透明就能实现状态栏图片统一

                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitStart"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>

            <!--为了使Toolbar具有折叠的效果，Toolbar外面还要放一个CollapsingToolbarLayout布局容器，
            CollapsingToolbarLayout里面放了一个ImageView和一个Toolbar，
            并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。-->

            <!-- CollapsingToolbarLayout子view，Toolbar属性
                layout_collapseMode=”pin”：当CollapsingToolbarLayout完全收缩后，
                Toolbar还可以保留在屏幕上。
                这个属性不设置 在CollapsingToolbarLayout 中设置app:layout_scrollFlags="scroll|exitUntilCollapsed"就会保留
                -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                 />

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <!-- app:layout_behavior="@string/appbar_scrolling_view_behavior"
      这个属性至关重要  只有设置了它 才能实现与AppBarLayout的关联-->
    <android.support.v4.widget.NestedScrollView
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:textSize="20sp"
            android:text="textString"
            android:layout_margin="9dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


    </android.support.v4.widget.NestedScrollView>

    <!-- 锚点在AppBarLayout上,视差图片隐藏时也隐藏 -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16sp"
        android:src="@android:drawable/btn_star"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>

</android.support.design.widget.CoordinatorLayout>

总结；

1. 根布局控件必须是CoordinatorLayout,最好设置属性android:fitsSystemWindows="true"

2.AppBarLayout包含CollapsingToolbarLayout布局,CollapsingToolbarLayout需要指定属性

app:layout_scrollFlags="scroll|exitUntilCollapsed" // 向上滚动时收缩View

app:contentScrim="?attr/colorPrimary" //这个指定折叠后的背景色

3. CollapsingToolbarLayout 下包含视差图片的ImageView以及ToolBar 2个子控件

4 .最为CollapsingToolbarLayout的视察图片的控件ImageView需要2个属性:

app:layout_collapseMode="parallax"

app:layout_collapseParallaxMultiplier="0.1"

5.最为和视察图片交互,ToolBar需要指定属性

app:layout_collapseMode="pin"

6. 主要的带scroll属性的控件,比如NestedScrollView或者ScrollView, 需要指定属性:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

7.如果 FloatingActionButton指定属性

app:layout_anchor="@id/app_bar" //锚点定在AppBarLayout上,则可以随视差滚动联动

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要包括几个功能

(1) 折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle函数来设置title。

(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.

(3)状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。

(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax

(5)将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。将app:layout_collapseMode设为pin。

0 0