主要参考了 http://blog.csdn.net/leejizhou/article/details/50533020, 然后做了 一个自己的例子
首先是引入sdk
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
其实 这一部份主要是布局上操作, 代码没有什么内容
需求一 页面有scroll内容时, toolbar 在上滑时隐藏,下滑时显示,详情见注释部分
<?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="cn.feezu.coordinatordemo.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark"> <!-- 用不用这个Theme影响不大-->
<!--为了能够让Toolbar响应滚动事件需要在Toolbar外面放AppBarLayout的布局容器-->
<!-- AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,
就可以在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView滚动事件发生的时候会被触发-->
<!-- Toolbar中的app:layout_scrollFlags属性里面必须至少启用scroll,
这样Toolbar才会滚动出屏幕,否则它将一直固定在顶部。-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:textSize="22sp"
android:text="title"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- 定义AppBarLayout与滚动视图之间的联系-->
<!-- 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior。
Android design support library包含了一个字符串资源@string/appbar_scrolling_view_behavior,
这个是官方定义好的,我们直接拿来用就OK了,它和AppBarLayout.ScrollingViewBehavior相匹配,
当这个滚动的View发生滚动事件时候,CoordinatorLayout会搜索自己所包含的其他view,
看看是否有view与这个behavior相关联,所以NestedScrollView滚动的时候会触发AppBarLayout-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:fitsSystemWindows="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="@string/textString"
android:textSize="20sp"/>
<Button
android:id="@+id/btn"
android:text="click me"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
总结下:
1. 根布局控件必须是CoordinatorLayout,最好设置属性android:fitsSystemWindows="true"
2. toolbar外层要放置一个AppBarLayout,
3. toolbar要设置一个属性app:layout_scrollFlags="scroll|enterAlways",
这个属性是最为AppBarLayout的子控件存在的属性,设置为scroll才能不固定.
4. 在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加 app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,这样才能和AppBarLayout联动
需求二 视差滚动和toolbar切换显示
直接看布局文件以及注释:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
app:theme="@style/ThemeOverlay.AppCompat.Dark">
<!--
CollapsingToolbarLayout的2个重要属性:
layout_scrollFlags=”scroll|exitUntilCollapsed”:向上滚动时收缩View,
但可以固定Toolbar,使Toolbar一直在上面
contentScrim: 当CollapsingToolbarLayout折叠后背景颜色-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- CollapsingToolbarLayout子view,ImageView属性
layout_collapseMode=”parallax”:使ImageView跟随滚动的时候具有视差效果
layout_collapseParallaxMultiplier=”0.1”:视差因子,设置视差滚动因子,值为:0~1-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="@drawable/p"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"/>
<!--为了使Toolbar具有折叠的效果,Toolbar外面还要放一个CollapsingToolbarLayout布局容器,
CollapsingToolbarLayout里面放了一个ImageView和一个Toolbar,
并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。-->
<!-- CollapsingToolbarLayout子view,Toolbar属性
layout_collapseMode=”pin”:当CollapsingToolbarLayout完全收缩后,
Toolbar还可以保留在屏幕上。-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="20sp"
android:text="@string/textString"
android:layout_margin="9dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.widget.NestedScrollView>
<!-- 锚点在AppBarLayout上,视差图片隐藏时也隐藏 -->
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16sp"
android:src="@android:drawable/btn_star"
app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
总结下:
1. 根布局控件必须是CoordinatorLayout,最好设置属性android:fitsSystemWindows="true"
2. AppBarLayout包含CollapsingToolbarLayout布局,CollapsingToolbarLayout需要指定属性
app:layout_scrollFlags="scroll|exitUntilCollapsed" // 向上滚动时收缩View
app:contentScrim="?attr/colorPrimary" //这个指定折叠后的背景色
3. CollapsingToolbarLayout 下包含视差图片的ImageView以及ToolBar 2个子控件
4 .最为CollapsingToolbarLayout的视察图片的控件ImageView需要2个属性:
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1"
5.最为和视察图片交互,ToolBar需要指定属性
app:layout_collapseMode="pin"
6. 主要的带scroll属性的控件,比如NestedScrollView或者ScrollView, 需要指定属性:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
7.如果 FloatingActionButton指定属性
app:layout_anchor="@id/app_bar" //锚点定在AppBarLayout上,则可以随视差滚动联动
来源:oschina
链接:https://my.oschina.net/u/988826/blog/604145