Android在版本5.0之后推出了材料设置概念,并推出了design兼容包,本文所诉的协调者布局CoordinatorLayout就是在这design兼容包中。
所以想要使用这个协调者布局(CoordinatorLayout),需要引入design包
compile
'com.android.support:design:25.1.1'
CoordinatorLayout继承于viewGroup,其父类就是viewGroup,所以CoordinatorLayout是作为容器来使用,它是一个特备高级的App装饰布局,通常在使用的过程中是做为顶级ViewGroup来使用的
CoordinatorLayout把整个页面分成了两个部分,上半部分固定设置为
AppBarLayout
布局,上半部分的作用就是可以进行折叠;下半部分可以为两种布局 RecyclerView 和
NestedScrollView 的其中一种,下半部分的作用是可以进行滑动,对上部分进行折叠操作
例子:
<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_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.coordinatorlayoutdemo.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:contentScrim="@color/colorPrimary">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:collapsedTitleGravity="right"
app:contentScrim="@color/colorPrimary"
app:expandedTitleGravity="center" app:layout_scrollFlags="scroll|snap|exitUntilCollapsed|enterAlwaysCollapsed"
app:title="coordinatorlayout">
<ImageView
android:id="@+id/imageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<ImageView
android:id="@+id/imageviewT"
android:layout_width="100dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_marginBottom="50dp"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
其中在
CollapsingToolbarLayout
中设置的属性:
app
:collapsedTitleGravity=
"right" :
折叠后title位于Toolbar的位置
app
:contentScrim=
"@color/colorPrimary":
折叠后Toolbar显示的颜色
app
:expandedTitleGravity=
"center" :
展开后title以为整个上半部分的位置
app
:title=
"coordinatorlayout" :
显示的文字,可以跟着滑动来改变size
最为重要的属性就是
app
:layout_scrollFlags :
设置上半部分滑动的方式,
它里边的取值主要有五种:
1.scroll 表示CollapsingToolbarLayout可以滚动(不设置的话头部的ImageView将不能折叠)
2.enterAlways 表示底部的滚动控件只要向下滚动,头部就显示出来
3.enterAlwaysCollapsed 表示当底部滚动控件滚动见顶时,头部显示出来
4.exitUntilCollapsed 表示头部折叠到最小高度时(Toolbar的高度),就不再折叠
5.snap 表示在滑动过程中如果停止滑动,则头部会就近折叠(要么恢复原状,要么折叠成一个Toolbar)
要想真正实现上半部分跟随着下半部分的滑动而产生相应的动作的话,必须在下半部分的控件中需要设置
app
:layout_behavior
属性
由于
app
:layout_behavior
属性也是有许多的坑,所以只要记住在CoordinatorLayout布局中的下半部分的控件当中设置该属性即可:
app
:layout_behavior=
"@string/appbar_scrolling_view_behavior"