CoordinatorLayout搭配CollapsingToolbarLayout实现酷炫的效果

我们来分析下代码

<?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"
    tools:context="com.example.m.coordinatorlayouttest.Main2Activity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary"
            app:title="ToolBar">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/beauty"
                app:layout_collapseMode="parallax"  />
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/re"/>
</android.support.design.widget.CoordinatorLayout>

这是对我上一篇文章的延伸

CoordinatorLayout的简单使用

这段代码就是在AppBarLayout中多加了CollapsingToolbarLayout,这个相当于FrameLayout,子视图后者覆盖在前者上面。

因为Toolbar一开始是透明的,我们不能直接在里面设置背景色,所以我们需要

app:contentScrim="@color/colorPrimary"

这个表示,当CollapsingToolbarLayout折叠到Toolbar时显示的背景色

注意:

app:layout_collapseMode="parallax"

这个表示折叠的方式,这个是上下同时折叠

还有一个值  pin  该属性表示当折叠完成时将该控件放在页面的头部

但是我设置了这个值,没有用

CollapsingToolbarLayout还有其他的几个重要的属性

title设置

app:title   设置显示的文字,如上面的Toolbar

app:expandedTitleGravity  展开时,title的位置

app:collapsedTitleGravity 折叠时,title的位置

	    app:title="ToolBar"
            app:expandedTitleGravity="bottom|right"
            app:collapsedTitleGravity="left"

我们试一试,按照上面的代码,title一开始在右下,折叠时在左边

的确是像我们所说的那样

app:collapsedTitleTextAppearance 折叠时title的样式

app:expandedTitleTextAppearance 展开时title的样式

<style name="text">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">28sp</item>
    </style>

 	    app:collapsedTitleTextAppearance="@style/text"
            app:expandedTitleTextAppearance="@style/text"

通过这样,就可以设置字体样式了