我们来分析下代码
<?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>
这是对我上一篇文章的延伸
这段代码就是在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"
通过这样,就可以设置字体样式了