android之CollapsingToolbarLayout的使用

CollapsingToolbarLayout的使用

知识点：

1、CollapsingToolbarLayout的使用；

2、AppBarLayout ＋ Toolbar控件；

在不少的app中，我们都可以看到一些很炫的动画效果，其中一个便是往上滑动的时候，页面上部的一个区域会根据上划的距离来收缩。还带着一些文字的运动和颜色的变化等等。是很吸引人的效果。其中最主要的就是Google新提供的MD设计的控件之一：CollapsingToolbarLayout。还结合AppBarLayout，Toolbar等等新控件的结合使用。

除了Toolbar是在v7支持包中，其余的控件都是在android.support.design.widget 的v7包中。

我这里有一个效果图，可以看看

布局文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.tanksu.kuyuyaojt.minetest.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <!--
        app:collapsedTitleGravity="center"//收缩后,title位于titlebar的那个位置,
        有right|center|left|bottom|center_horizontal|fill_vertical|start|end|top属性
        可以结合使用

        app:expandedTitleGravity="left|bottom"//展开后,title位于左下角

        app:layout_scrollFlags="scroll|exitUntilCollapsed"//这个是重点
        scroll:这个是设置布局可以跟随滚动的,不设置则没有效果
        exitUntilCollapsed:收缩后,titlebar会固定在顶部
        enterAlways:实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)
        enterAlwaysCollapsed:当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度

        app:title="Collapsing"//设置标题为Collapsing
        以上这些属性,也是可以在代码中设置的,我在代码中也写了部分的属性设置的代码

这里不多说，我要说的都在代码里面说明白了。

        -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:collapsedTitleGravity="center"
            app:expandedTitleGravity="left|bottom"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Collapsing">

            <!--
            app:layout_collapseMode="pin"//
            pin:收缩时,设置控件位置固定不动
            parallax:收缩是,设置控件位置跟随往上滚动,直至滚出屏幕
            none:收缩时,不受滚动的限制,无效果
            -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"></android.support.v7.widget.Toolbar>

            <!--
                这里一定要注意布局控件的层次关系,我们要将返回按钮和username等控件放在toolbar之后
                只有这样,这些控件才会在toolbar之上,我们才可以点击这些控件
            -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="vertical"
                app:layout_anchor="@+id/app_bar"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:drawableTop="@mipmap/car3"
                    android:text="userName"
                    android:textColor="#f3d468"
                    android:textSize="20sp" />
            </LinearLayout>

            <ImageButton
                android:id="@+id/imgbtn_back"
                android:layout_width="50dp"
                android:layout_height="?attr/actionBarSize"
                android:src="@mipmap/back"
                android:text="back"
                app:layout_collapseMode="pin" />

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

    <include
        android:id="@+id/include"
        layout="@layout/content_scrolling" />

    <!--
    这个控件很多地方都可以用到,请不错的,翻译过来就是浮动按钮。悬浮与父布局之上,可以很友好的进行动作的相应
    这里我就不多讲。重点讲一下这个属性:
    app:layout_anchor="@+id/app_bar"//布局锚点
    这里设置了@+id/app_bar,说明此控件的动作,是由id = app_bar控件来触发的。这里相当于做一个监听注册
    这里id = app_bar 的控件是AppBarLayout

    app:layout_anchorGravity="bottom|right"
    设置浮动按钮的位置为右下角
    -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="139dp"
        android:layout_gravity="top"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@+id/app_bar"
        app:layout_anchorGravity="bottom|right" />

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

java文件的主要代码：

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
//        collapsingToolbar.setTitle("Title");
//        collapsingToolbar.setCollapsedTitleTextColor(Color.RED);//收缩中字体颜色逐渐向指定的红颜色改变
//        collapsingToolbar.setDrawingCacheBackgroundColor(Color.GREEN);//收缩后title的背景色为绿色
//        collapsingToolbar.setCollapsedTitleGravity(Gravity.CENTER);//设置字体收缩后,放置到titlebar的中间部分
//        collapsingToolbar.setBackgroundResource(R.mipmap.ts_fa);//设置整个toolbar的背景图片
//        collapsingToolbar.setContentScrim(getResources().getDrawable(R.mipmap.ts_shou));//设置收缩后,titlebar的背景图片
//        collapsingToolbar.setContentScrimColor(Color.GRAY);//设置收缩后,titlebar的背景颜色为灰色
//        collapsingToolbar.setExpandedTitleColor(Color.YELLOW);//扩张时候的title颜色为黄色
        findViewById(R.id.imgbtn_back).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ScrollingActivity.this, "imgbtn_back", Toast.LENGTH_SHORT).show();
            }
        });
    }

收缩过程中的效果图：

收缩完成：

以上只是很粗浅的理解，望各位指出错误之处。

如有任何疑问，请及时联系我。