Android实用功能（一）CollapsingToolbarLayout实现标题栏的伸缩

概述

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

效果图

代码如下：

1、配置Gradle：

 compile 'com.android.support:appcompat-v7:25.3.1'
 compile 'com.android.support:design:25.3.1'

2、布局文件：

<?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:clipToPadding="true"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="240dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:collapsedTitleGravity="left|center_vertical"
        app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
        app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
        app:contentScrim="@color/cl_titlebar_bg"
        app:expandedTitleMarginEnd="12dp"
        app:expandedTitleMarginStart="12dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <!--拉开后显示的背景图片-->
        <ImageView
            android:id="@+id/iv_background"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:src="@drawable/background_1"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7"/>

        <!--标题栏-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/header_height"
            app:layout_collapseMode="pin"
            app:navigationIcon="@mipmap/ic_header_back"
            >
            <TextView
                android:id="@+id/tv_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="right"
                android:paddingLeft="@dimen/padding"
                android:paddingRight="@dimen/padding"
                android:textSize="16sp"
                android:textColor="@color/white"
                android:text="分享"/>
        </android.support.v7.widget.Toolbar>

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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:scrollbars="none"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:gravity="center_vertical"
            android:paddingLeft="@dimen/padding"
            android:paddingRight="@dimen/padding"
            android:paddingTop="@dimen/padding"
            android:text=""
            android:textColor="@color/cl_title"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tv_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_title"
            android:gravity="center_vertical"
            android:paddingLeft="@dimen/padding"
            android:paddingRight="@dimen/padding"
            android:paddingTop="6dp"
            android:text=""
            android:textColor="@color/gray_smoke"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_time"
            android:gravity="center_vertical"
            android:padding="@dimen/padding"
            android:text=""
            android:textColor="@color/cl_content"
            android:textSize="16sp" />
    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

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

在这里对一些关键性的属性作下说明：
（1）app:layout_scrollFlags：设置滚动标志
- scroll 设置滚动；
- enterAlways 快速显示View，也就是当向下滑动时候，立即就显示View；
- exitUntilCollapsed 向上滚动收缩View；
- enterAlwaysCollapsed 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

（2）contentScrim：收缩后标题栏的背景色
（3）layout_collapseMode ：折叠模式
- pin：当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上；
- parallax：在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(视差因子)搭配使用。
（4）layout_behavior：@string/appbar_scrolling_view_behavior”。NestedScrollView设置该属性后，就可以跟CollapsingToolbarLayout进行联动了，相当于为两者建立一种联系。
（5）其他的属性有expandedTitleMarginStart（展开状态时标题距离左边的距离）、expandedTitleMarginEnd（展开状态时标题距离右边的距离）等。
（6）修改CollapsingToolbarLayout的标题大小：expandedTitleTextAppearance
样式：

 <!--CollapsingToolbarLayout标题大小-->
    <style name="CollapsingToolbarLayoutTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
    </style>

（7）修改Toolbar的navigation icon的padding值：
样式：

 <!--修改Toolbar的navigation icon的padding值 -->
    <style name="myToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
        <item name="android:minWidth">0dp</item>
        <item name="android:padding">12dp</item>
        <item name="android:scaleType">centerInside</item>
    </style>

然后我们将这个Activity的主题设置为：无标题，window背景色为白色，Toolbar的导航图标的padding值

<!-- CollapsingToolbarLayoutActivity主题：无标题-->
    <style name="NoTitleTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <!-- Actionbar/toolbar color -->
        <!--<item name="colorPrimary">@color/colorPrimaryDark</item>-->
        <!--状态栏颜色 color-->
        <!--<item name="colorPrimaryDark">@color/colorPrimary</item>-->
        <!--Window color-->
        <item name="android:windowBackground">@color/white</item>
        <!--修改Toolbar的navigation icon的padding值 -->
        <item name="toolbarNavigationButtonStyle">@style/myToolbarNavigationButtonStyle</item>
    </style>

3、Activity代码：

package com.ha.cjy.utilityfunction;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

/**
 * CollapsingToolbarLayout实现上滑隐藏ToolBar
 * Created by cjy on 17/11/21.
 */

public class CollapsingToolbarLayoutActivity extends AppCompatActivity implements View.OnClickListener {
    private AppBarLayout mAppBarLayout;
    private CollapsingToolbarLayout mCollapsingToolbarLayout;
    private Toolbar mToolBar;
    private TextView mTvTitle;
    private TextView mTvTime;
    private TextView mTvContent;
    private TextView mTvShare;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_appbarlayout);

        findControl();
        initControl();
    }


    public void findControl() {
        mAppBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
        mCollapsingToolbarLayout  = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        mToolBar = (Toolbar) mCollapsingToolbarLayout.findViewById(R.id.tool_bar);
        mTvTitle = (TextView) findViewById(R.id.tv_title);
        mTvTime = (TextView) findViewById(R.id.tv_time);
        mTvContent = (TextView) findViewById(R.id.tv_content);
        mTvShare = (TextView) findViewById(R.id.tv_share);

        //这句话要加，不然底部滚动文本会显示不全
        setSupportActionBar(mToolBar);
    }

    public void initControl() {
        //监听展开折叠状态
        mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                if( state == State.EXPANDED ) {//展开状态
                    //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示
                    mCollapsingToolbarLayout.setTitle("展开状态的标题");
                }else if(state == State.COLLAPSED){//折叠状态
                    mCollapsingToolbarLayout.setTitle("详情");
                }else {//中间状态
                    mCollapsingToolbarLayout.setTitle("");
                }
            }
        });
        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        mTvShare.setOnClickListener(this);

        refreshUI();
    }

    private void refreshUI() {
        mTvTitle.setText(getString(R.string.txt_appbarlayout));
        mTvTime.setText(getString(R.string.txt_time, "2017-11-21","2017-12-11"));
        mTvContent.setText(getString(R.string.txt_content));
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.tv_share:{
                Toast.makeText(this,"分享一次",Toast.LENGTH_SHORT).show();
                break;
            }
        }
    }
}

Demo传送门摸我的github。

好了，到这里就结束了，欢迎各位指教…….