【Android - 控件】之MD - CoordinatorLayout的使用
CoordinatorLayout是Android 5.0新特性——Material Design中的一个布局控件,主要用来协调各个子视图之间的工作,也可以用来作为顶部布局。CoordinatorLayout主要是通过设置子视图的Behavior来达到协调子视图之间的工作的目的的。
CoordinatorLayout主要有以下三种最常用的使用方法:
- CoordinatorLayout + FloatingActionButton实现FAB与其他视图的协调;
- CoordinatorLayout + AppBarLayout实现头部布局与滑动视图的协调;
- CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout实现头部布局与滑动视图的协调,以及头部布局内部各视图的协调。
1、CoordinatorLayout + FloatingActionButton:
CoordinatorLayout为嵌套其中的子视图提供了两个属性:layout_anchor和layout_anchorGravity,前者是用来设置当前视图的锚点视图,即当前视图停靠在哪个视图上;后者是用来设置当前视图与锚点视图的位置关系,即当前视图停靠在锚点视图的哪个位置,这两个属性最常用的控件就是FAB。例如,下面这段代码中的两个FAB,一个停靠在整个CoordinatorLayout布局的右下角,另一个停靠在Toolbar的右下角:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_fab" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFFFF"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" /> <!-- CoordinatorLayout作为一个super-powered FrameLayout,通过设置子View的layout_gravity来设置子View的位置 --> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|bottom" android:layout_margin="20.0dip" android:src="@mipmap/ic_launcher" app:fabSize="normal" /> <!-- CoordinatorLayout为子View提供了一个anchor属性,可以设置锚点,即固定在某个控件的某个位置 app:layout_anchor:设置锚点控件 app:layout_anchorGravity:设置将当前控件固定在目标控件的哪个位置 --> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="50.0dip" android:src="@mipmap/ic_launcher" app:fabSize="normal" app:layout_anchor="@id/toolbar" app:layout_anchorGravity="bottom|right" /> </android.support.design.widget.CoordinatorLayout>
运行结果如图所示:
2、CoordinatorLayout + AppBarLayout:
AppBarLayout是为了MD设计的App Bar,支持手势滑动操作。被AppBarLayout包裹的子视图会具有layout_scrollFlags属性,这个属性是用来控制子视图的滑动模式的,有以下几个可选值:
- scroll:所有想滚动出屏幕的view都需要设置这个flag,没有设置这个flag的view将被固定在屏幕顶部。
- enterAlways:设置这个flag时,向下的滚动都会导致该view变为可见,启用“快速返回模式”。
- enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
- snap:磁性吸附,在滑动到一定程度后松手可以自动缩到顶端或自动拉伸到最大。
先来看一个例子:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_abl" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFFFF"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:tabIndicatorColor="#FFFFFFFF" app:tabIndicatorHeight="5.0dip" app:tabSelectedTextColor="#FFFFFFFF" app:tabTextColor="@color/colorAccent" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
在这个例子中,AppBarLayout中嵌套了一个Toolbar和一个TabLayout,其中Toolbar中设置了layout_scrollFlags属性为“scroll|enterAlways”,因此Toolbar是可以根据滑动滑出屏幕;TabLayout没有设置layout_scrollFlags属性,因此它最终只会固定在屏幕上方。
上面这个例子的运行结果如下图所示:
3、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout:
“CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout”的模式常用来制作Design模式的详情页页面,使用CollapsingToolbarLayout可以达到“视差模式”,即上滑过程中,顶部布局的消失是有一定的颜色或图案的变化效果的。
CoordinatorLayout、AppBarLayout和CollapsingToolbarLayout这三个布局控件的嵌套顺序是这样的:CoordinatorLayout中嵌套AppBarLayout,AppBarLayout中嵌套CollapsingToolbarLayout,CollapsingToolbarLayout中嵌套一个Toolbar。
CollapsingToolbarLayout中有一个title属性,可以设置CollapsingToolbarLayout上显示的标题文本,当CollapsingToolbarLayout中嵌套了Toolbar之后,滑动时这个文本最终会移动到Toolbar中。CollapsingToolbarLayout中还有一个contentScrim属性,用来设置Toolbar被折叠到顶部时显示的背景。
CollapsingToolbarLayout为自己内部的子视图提供了一个属性:layout_collpaseMode,用来设置子视图的滑动模式,有两个值可以选择:
- parallax:视差模式,在折叠过程中会有视差效果
- pin:固定模式,此视图最后将固定在屏幕顶端
我们来看一个例子:
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_ctl" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFFFF"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256.0dip" android:fitsSystemWindows="true"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="@color/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" app:title="aaaaaa"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="@string/app_name" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@mipmap/bg" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" 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.v7.widget.RecyclerView android:id="@+id/rv" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
在这个例子中,CollapsingToolbarLayout中嵌套了两个控件:一个ImageView和一个Toolbar,其中,ImageView设置了layout_collapseMode属性为parallax,表示它将在滑动过程中呈视差模式渐渐变化,最终滑出屏幕;而Toolbar设置的layout_collapseMode属性为pin,表示Toolbar会最终固定在屏幕上方,而且变成CollapsingToolbarLayout中contentScrim属性设置的背景样式,即Toolbar的背景会在最终变成colorPrimary颜色。
这个例子的运行结果如下图所示:
以上就是对CoordinatorLayout的基础用法的介绍,下面贴出码云中的源码,供大家参考。
posted on 2016-12-22 13:13 ITGungnir 阅读(2188) 评论(0) 编辑 收藏 举报