Material Design学习:CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout

2017-01-14 10:21:18来源:http://www.jianshu.com/p/d511f3969b13作者:HongJay人点击

简介

Coordinator 美[koʊ'ɔ:dənˌeɪtə] 协调


CoordinatorLayout是支持包"com.Android.support:design"里很重要的一个控件,继承于FrameLayout,它提供了两个主要用途:


作为APP的顶层布局;
协调子控件的相互作用;
使用

一. 收缩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:orientation="vertical"
tools:context="zhj.tablayoutdemo.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="@+id/mToolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="@+id/tab_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EF8D11"
app:tabGravity="fill"
app:tabIndicatorColor="#f00"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF"
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

布局中的viewpager、tablayout、toolbar的使用可以参考以下文章。
Material Design学习:TabLayout+Viewpager制作一个标签页
Material Design学习:ToolBar 开发使用简介


注意事项
CoordinatorLayout作为顶层视图;

AppBarLayout包裹toolbar和tablayout;


AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,
默认的AppBarLayout是垂直方向的, 可以管理其中的控件在内容滚动时的行为。


我们可以通过设置layout_scrollFlags参数,来控制AppBarLayout中控件的行为。


设置Toolbar的滚动标志
app:layout_scrollFlags="scroll|enterAlways|snap"
layout_scrollFlags参数
scroll: 和其他控件滑动联动的基础,下面的其他属性值,先要设置了scroll后才有效果!
enterAlways:当屏幕下滑时,设置了这个行为的控件(比如toolbar)就会立马滑回屏幕,类似于快速返回的效果,而且不管下面的滑动组件(比如ScrollView是否正在滑动) 。
enterAlwaysCollapsed:是enterAlways的附加选项,一般跟enterAlways一起使用。控件首先是enterAlways效果,但只能滑动minHeight的距离。直到下面的滑动组件(比如ScrollView完全展示时),控件才能继续向下滑动。
exitUntilCollapsed:向上滑动的时候这个控件会收缩,但最多只能收缩到控件设定的minHeight,实际能滚动的距离为(layout_height-minHeight)。
snap:这个属性让控件变得有弹性,如果控件(比如toolbar)显示了75%的高度,就会显示出来,如果只有25%显示,就会隐藏。

给ViewPager设置行为,实现与AppBarLayout联动。
app:layout_behavior="@string/appbar_scrolling_view_behavior"


CoordinatorLayout不能和很多控件一起使用,比如要是内容部分放ListView,就算设置了layout_behavior也没用,取而代之使用RecyclerView或者NestedScrollView。


NestedScrollView就像scrollView,不过相比之下他更兼容新老版本的控件,更好的与后面的控件包括CoordinatorLayout配合使用.


二. 滚动折叠CollapsingToolbarLayout


collapsing 美[kə'læpsɪŋ] 折叠


CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar,它继承自FrameLayout。
给它设置layout_scrollFlags,可以控制它包裹的控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件。


效果展示


效果

布局代码


<?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="zhj.tablayoutdemo.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="center"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:src="@mipmap/pic"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"/>
<android.support.v7.widget.Toolbar
android:id="@+id/mToolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EF8D11"
app:tabGravity="fill"
app:tabIndicatorColor="#f00"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>


Google官方文档翻译
CollapsingToolbarLayout包含以下功能:


折叠Title(Collapsing title):当布局内容全部显示出来时,title是最大的,但是随着View逐步移出屏幕顶部,title变得越来越小。你可以通过调用setTitle函数来设置title。
内容纱布(Content scrim):根据滚动的位置是否到达一个阀值,来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.
状态栏纱布(Status bar scrim):根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”,你可以通过setStatusBarScrim(Drawable)来设置纱布图片,但是只能在LOLLIPOP设备上面有作用。
视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。(PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点)。将布局参数app:layout_collapseMode设为parallax
将子View位置固定(Pinned position children):子View可以选择是否在全局空间上固定位置,这对于Toolbar来说非常有用,因为当布局在移动时,可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。



































CollapsingToolbarLayout属性含义
app:title设置标题
app:collapsedTitleGravity="center"设置标题位置
app:contentScrim设置折叠时toolbar的颜色,默认是colorPrimary的色值
app:statusBarScrim设置折叠时状态栏的颜色 ,默认是colorPrimaryDark的色值
app:layout_collapseParallaxMultiplier设置视差
app:layout_collapseMode="parallax"视差模式,在折叠的时候会有个视差折叠的效果
app:layout_collapseMode="pin"固定模式,在折叠的时候最后固定在顶端

步骤详解
编写 CollapsingToolbarLayout的两个子视图,一个是Imageview,一个Toolbar
为 CollapsingToolbarLayout 指定属性
app:layout_scrollFlags="scroll|exitUntilCollapsed"
为ImageView 指定属性,声明它是可以折叠的
app:layout_collapseMode="parallax"
为 toobar指定属性,声明它是固定的
app:layout_collapseMode="pin"
为 CollapsingToolbarLayout 所在的父布局(view)指定属性,以声明它适配当前窗体
android:fitsSystemWindows="true"

这里是项目地址


参考
http://blog.csdn.net/huachao1001/article/details/51558835
http://blog.csdn.net/rosechan/article/details/51587058
http://blog.csdn.net/github_35180164/article/details/51870301




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台