Android 开发 之 折叠布局（CollapsingToolbarLayout）

CollapsingToolbarLayout

翻译过来就是：折叠工具栏布局。例如：京东商城中的显示商品大图的时候，bilibili  Android客户端视频详情页就是采用的这种设计。文章的第三部分介绍了CollapsingToolbarLayout与AppBarLayout，Toolbar，FloatingActionButton的联合使用。

先看效果

先上代码

在解释

<?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:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout        android:id="@+id/app_bar"        android:layout_width="match_parent"        android:layout_height="256dp"        android:fitsSystemWindows="true">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsingToolbarLayout"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:contentScrim="#00f"            app:statusBarScrim="#FF0000"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="centerCrop"                android:src="@mipmap/meinv"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.7" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.5"/>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="20dp"        android:src="@android:drawable/ic_dialog_email"        app:layout_anchor="@id/app_bar"        app:layout_anchorGravity="bottom|end" />    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_margin="20dp"            android:text="A\nB\nC\nD\nE\nF\nG\nH\nI\nJ\nK\nL\nM\nN\nO\nP\nQ\nR\nS\nT\nU\nV\nW\nX\nY\nZ"            android:textSize="50sp"            android:textColor="#F00"/>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

package com.example.zxq.bsquxian;import android.graphics.Color;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.design.widget.CollapsingToolbarLayout;import android.support.design.widget.CoordinatorLayout;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;/** * Created by Administrator on 2017/7/23 0023. */public class BarActivity extends AppCompatActivity {    private CoordinatorLayout mCoordinatorLayout;    private CollapsingToolbarLayout mCollapsingToolbarLayout;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_bar);        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);        mToolbar.setTitleTextColor(Color.WHITE);        setSupportActionBar(mToolbar);        mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);        mCollapsingToolbarLayout.setTitle("Sunzxyong");        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);//设置折叠时候title字体颜色        mCollapsingToolbarLayout.setExpandedTitleColor(Color.RED);//设置扩展时候title字体颜色    }}

代码很简单，模板，可以直接复制使用了

关键是在这里：使用技巧，属性类别：

AppBarLayout是一种支持响应滚动手势的app bar布局（比如工具栏滚出或滚入屏幕），CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局。
与AppBarLayout组合的滚动布局（Recyclerview、NestedScrollView等）需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代码中NestedScrollView控件所设置的）。没有设置的话，AppBarLayout将不会响应滚动布局的滚动事件。

CollapsingToolbarLayout和ScrollView一起使用会有滑动bug，注意要使用NestedScrollView来替代ScrollView。

AppBarLayout的子布局有5种滚动标识(就是上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)：

1.scroll:将此布局和滚动时间关联。这个标识要设置在其他标识之前，没有这个标识则布局不会滚动且其他标识设置无效。

2.enterAlways:任何向下滚动操作都会使此布局可见。这个标识通常被称为“快速返回”模式。

3.enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么任何下拉操作都先使view将在到达这个最小高度，等滑倒头的时候开始慢慢展开，当滚动到顶部的时候展开完。

4.exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。下拉的时候如果和scroll使用的，拉到头才展开；和enterAlways使用时，任何时候下拉都展开；scroll|enterAlways|enterAlwaysCollapsed|exitUntilCollapsed一起用时上啦最小高度折叠，任何时候下啦，先拉出50%,等拉到头在全部展开。

5.snap:当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。

CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。这个后面会用到。

CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode）
1.off：这个是默认属性，布局将正常显示，没有折叠的行为。

2.pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。

3.parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。

当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。
FloatingActionButton这个控件通过app:layout_anchor这个设置锚定在了AppBarLayout下方。FloatingActionButton源码中有一个Behavior方法，当AppBarLayout收缩时，FloatingActionButton就会跟着做出相应变化。

以上解释应该明了了，如果只要折叠效果的话可以把toolbar ，FloatingActionButton删掉。CollapsingToolbarLayout设置透明的颜色就ok了