Android控件大全——CoordinatorLayout
Posted 懒,是向前迈进的最大障碍! --沃.兹基朔德
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android控件大全——CoordinatorLayout相关的知识,希望对你有一定的参考价值。
CoordinatorLayout 其实就是个高级的FrameLayout,用于协调子布局
要使用该控件,需要再gradle中加入:
compile ‘com.android.support:design:24.2.1‘
1、CoordinatorLayout与AppBarLayout
1 <android.support.design.widget.CoordinatorLayout 2 android:layout_height="match_parent" 3 android:layout_width="match_parent" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 xmlns:android="http://schemas.android.com/apk/res/android"> 6 <android.support.design.widget.AppBarLayout 7 android:layout_width="match_parent" 8 android:layout_height="wrap_content"> 9 <android.support.v7.widget.Toolbar 10 app:layout_scrollFlags="scroll" 11 android:layout_width="match_parent" 12 android:layout_height="?attr/actionBarSize"> 13 </android.support.v7.widget.Toolbar> 14 </android.support.design.widget.AppBarLayout> 15 <android.support.v7.widget.RecyclerView 16 app:layout_behavior="@string/appbar_scrolling_view_behavior" 17 android:id="@+id/recycler" 18 android:layout_width="match_parent" 19 android:layout_height="match_parent"> 20 </android.support.v7.widget.RecyclerView> 21 </android.support.design.widget.CoordinatorLayout>
注意:代码的第10行和第16行 @string/appbar_scrolling_view_behavior 是系统自带的一个Behavior,我们之后再讨论,这边先看一下 app:layout_scrollFlags="scroll"
scroll、enterAlways、enterAlwaysCollapsed、exitUtilCollapsed、snap 五中可选
scroll:伴随着滚动时间滚进滚出屏幕,如果设置了其他的flag,这个flag是必须写上的,不然没有效果;前面所有的子View都必须带上这个属性,不然没有效果
enterAlways:快速返回模式,优先滚动toolbar
enterAlwaysCollapsed :要使用这种属性,必须设置一个minHeight,先将toolbar滚动至minHeight,然后滚动RecycylerView,滚动至顶部之后就继续滚动toolbar,并且需要配合enterAlways一起使用,否则没有效果
exitUtilCollapsed:先将toolbar滚动至minHeight,然后滚动recyclerView,toolbar不会完全滚出屏幕
snap:toolbar滚动添加一个吸附的效果
2、CoordinatorLayout与CollapsingToolbarLayout
1 <android.support.design.widget.CoordinatorLayout 2 android:layout_height="match_parent" 3 android:layout_width="match_parent" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 xmlns:android="http://schemas.android.com/apk/res/android"> 6 <android.support.design.widget.AppBarLayout 7 android:layout_width="match_parent" 8 android:layout_height="256dp"> 9 <android.support.design.widget.CollapsingToolbarLayout 10 android:id="@+id/collapse" 11 app:contentScrim="#30469b" 12 app:layout_scrollFlags="scroll|exitUntilCollapsed" 13 android:layout_width="match_parent" 14 android:layout_height="match_parent"> 15 <ImageView 16 app:layout_collapseMode="parallax" 17 android:scaleType="center" 18 android:src="@mipmap/timg" 19 android:layout_width="match_parent" 20 android:layout_height="match_parent" /> 21 <android.support.v7.widget.Toolbar 22 app:layout_collapseMode="pin" 23 android:id="@+id/toolbar" 24 android:layout_width="match_parent" 25 android:layout_height="?attr/actionBarSize"> 26 </android.support.v7.widget.Toolbar> 27 </android.support.design.widget.CollapsingToolbarLayout> 28 </android.support.design.widget.AppBarLayout> 29 <android.support.v7.widget.RecyclerView 30 app:layout_behavior="@string/appbar_scrolling_view_behavior" 31 android:id="@+id/recycler" 32 android:layout_width="match_parent" 33 android:layout_height="match_parent"> 34 </android.support.v7.widget.RecyclerView> 35 36 </android.support.design.widget.CoordinatorLayout>
注意:第11行:app:contentScrim设置折叠之后的颜色;
第12行,flag必须设置成 scroll|exitUntilCollapsed;
第16行 app:layout_collapseMode 设置成 parallax,表示图片会随着滚动开始渐变;
第22行:设置成pin表示toolbar会停留在最上方
此时如果要设置文字必须从CollapsingToolbarLayout入手
<android.support.design.widget.FloatingActionButton app:layout_anchor="@id/appbar" app:layout_anchorGravity="right|bottom|end" android:layout_width="wrap_content" android:layout_height="wrap_content" />
实现floatingActionButton与AppbarLayout一同消失和呈现
以上是关于Android控件大全——CoordinatorLayout的主要内容,如果未能解决你的问题,请参考以下文章
Android Material Design 史上最全的材料设计控件大全
Android Material Design新UI控件使用大全 二