先来看看效果图(图片借用的哈,效果是这样的)
<?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:id="@+id/activity_coordinator_toolbar_test"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ws.scrollviewdemo.CoordinatorToolbarTest">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/ic_pay_zhifubao"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_pay_yilian" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_pay_yilian" />
<!--……此处n个ImageView,为了滑动的效果-->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
在这个布局中我们可以看到几个陌生而又熟悉的控件:CoordinatorLayout、NestedScrollView、CollapsingToolbarLayout、Toolbar还有AppBarLayout。
1、CoordinatorLayout
CoordinatorLayout简单说就是作为父布局来协调子View,为什么要用它呢?在android的开发文档中说,如果AppBarLayout用其他的ViewGroup会不起作用,所以就老老实实的按着文档搞吧……^_^。
2、NestedScrollView
看上面的效果图,可以理解为滑动下面的可以滚动的控件,使上面的AppBarLayout也可以动,所以这就需要上面提到的那个可以协调子View的父 布局了;那么怎么将下面滚动的控件和上面的AppbarLayout关联起来呢?我门可以看到下面的可滚动的控件设置了一个layout_behavior的属性,对就是根据它关联的,自己去写这个Behavior很不方便,文档已经告诉我们了一个已经具有Behavior的可滚动的控件NestedScrollView。
3、Toolbar
Toolbar就不用多说了吧?
想了解看ToolBar详解
4、CollapsingToolbarLayout
CollapsingToolbarLayout是一个包裹ToolBar并实现了可折叠的app bar,它被设计用作AppBarLayout的直接子View。
大概的原理都是这样,下面来介绍一下代码里出现的还有一些没有出现的属性吧:
1、AppBarLayout的子View应该设置app:layout_scrollFlags属性,可设置的值为:
1)scrol:View设置为该值时,会跟随滚动事件一起滚动,就像和NestedScrollView是一体的,一起动。
2)enterAlways:View设置为该值时,当NestedScrollView向下滑动的时候,View会直接向下滑动,不考虑NestedScrollView是否在滑动。
3)exitUntilCollapsed:View设置为该值的时候,当这个View要往上逐渐“消逝”时,会一直往上滑动,直到剩下的的高度达到它的最小高度后,再响应ScrollView的内部滑动事件。(android:attr/actionBarSize最小高度)。
4)enterAlwaysCollapsed:是enterAlways的附加选项,一般跟enterAlways一起使用,它是指,View在往下“出现”的时候,首先是enterAlways效果,当View的高度达到最小高度时,View就暂时不去往下滚动,直到ScrollView滑动到顶部不再滑动时,View再继续往下滑动,直到滑到View的顶部结束。
2、CollapsingToolbarLayout主要包括几个功能:
(1) 折叠Title(Collapsing title):当布局内容全部显示出来时,title是最大的,但是随着View逐步移出屏幕顶部,title变得越来越小。你可以通过调用setTitle函数来设置title。
(2)内容纱布(Content scrim):根据滚动的位置是否到达一个阀值,来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.
(3)状态栏纱布(Status barscrim):根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过setStatusBarScrim(Drawable)来设置纱布图片,但是只能在LOLLIPOP设备上面有作用。
(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。(PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点)。将布局参数app:layout_collapseMode设为parallax
(5)将子View位置固定(Pinned position children):子View可以选择是否在全局空间上固定位置,这对于Toolbar来说非常有用,因为当布局在移动时,可以将Toolbar固定位置而不受移动的影响。
将app:layout_collapseMode设为pin。