Android 5.0+可折叠toolbar布局(CollapsingToolbarLayout)的使用

来源：互联网发布：淘宝公安警用皮带编辑：程序博客网时间：2024/06/05 03:42

先上效果图:(录屏软件有点问题,直接用图片了)

向上滑动过程展示如图:

这里写图片描述

接下来布局:
在xml中解释很清楚了

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto"    tools:context="com.example.administrator.coordinatedemo.MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="200dp"        style="@style/MyAppBarLayout"        >        <!--scroll表示可以滚动,enterAlways表示向下移动时立即显示Toolbar,            contentScrim - 设置当完全CollapsingToolbarLayout折叠后的背景颜色。            有颜色渐进的变化            expandedTitleMarginStart这个是一开始展开时距离左侧的距离            exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。            -->        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:id="@+id/collaps_toolbar_layout"            app:expandedTitleMarginStart="29dp"            app:contentScrim="@color/colorAccent"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            >            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="fitXY"                android:src="@mipmap/ic_launcher"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.7"  />                <!--                pin -  此模式,当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。                parallax - 设置为这个模式时，在内容滚动时，                CollapsingToolbarLayout中的View（比如我们上面的ImageView)也可以同时滚动，实现视差滚动效果，                通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。                layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1                关于视差效果,大家有兴趣可以去了解-->            <!--实现此效果,控件必须是Toolbar,不要设置toobar的位置,            对CollapsingToolbarLayout设置的title会无效-->            <android.support.v7.widget.Toolbar                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                android:id="@+id/toolbar"                />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout></android.support.design.widget.CoordinatorLayout>

MainActivity

package com.example.administrator.coordinatedemo;import android.graphics.Color;import android.support.design.widget.CollapsingToolbarLayout;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;public class MainActivity extends AppCompatActivity {    private Toolbar toolbar;    private CollapsingToolbarLayout colaps;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        toolbar = ((Toolbar) findViewById(R.id.toolbar));        colaps = (CollapsingToolbarLayout) findViewById(R.id.collaps_toolbar_layout);        setSupportActionBar(toolbar);        //返回图标        getSupportActionBar().setHomeButtonEnabled(true);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        //一定给CollapsingToolbarLayout设置title不要给toolbar设置title,无效        colaps.setTitle("这个是显示的Title");    //可选        colaps.setExpandedTitleColor(Color.RED);//设置还没收缩时状态下字体颜色        colaps.setCollapsedTitleTextColor(Color.BLUE);//设置收缩后Toolbar上字体的颜色    }}

2 0