Android Design Support Library(5)- CoordinatorLayout的入门使用
来源:互联网 发布:nagios源码 编辑:程序博客网 时间:2024/06/05 09:09
原创文章,转载请注明 http://blog.csdn.net/leejizhou/article/details/50533020
这篇文章介绍下Android Design Support Library中的CoordinatorLayout的使用,如果你还不知道怎么使用这个Design Library请参考 http://blog.csdn.net/leejizhou/article/details/50479934,CoordinatorLayout是Design Library中比较重要也是最难的一部分,Coordinator顾名思义,它是用来组织它的子views之间协作的一个父ViewGroup,CoordinatorLayout 实现了多种Material Design中的滚动效果,目前这个框架提供了几种不用写动画代码就能实现的动画和滚动效果,下面看看几个入门效果。
1:Toolbar跟随滚动显示与隐藏
看下Layout代码
<?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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/appbar" android:theme="@style/ThemeOverlay.AppCompat.Dark" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" /> </android.support.design.widget.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" > <TextView android:layout_margin="8dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/textString" android:textSize="20sp" /> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>
这个布局最外层用到了CoordinatorLayout起到协调子View的作用,然后用的是v7的Toolbar而不是已经过时的Actionbar,为了能够让Toolbar响应滚动事件需要在Toolbar外面放AppBarLayout的布局容器 ↓ 。
//代码片段 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/appbar" android:theme="@style/ThemeOverlay.AppCompat.Dark" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" /> </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" > <TextView android:layout_margin="8dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/textString" android:textSize="20sp" /> </android.support.v4.widget.NestedScrollView>
AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性,就可以在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView滚动事件发生的时候会被触发↓:
//代码片段 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" />
Toolbar中的app:layout_scrollFlags属性里面必须至少启用scroll,这样Toolbar才会滚动出屏幕,否则它将一直固定在顶部。
enterAlways:一旦向上滚动这个view就可见
2:Toolbar跟随滚动折叠效果
看下Layout代码
<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" > <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="300dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/p" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <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.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" > <TextView android:layout_margin="8dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/textString" android:textSize="20sp" /> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@android:drawable/btn_star" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end" /></android.support.design.widget.CoordinatorLayout>
为了使Toolbar具有折叠的效果,Toolbar外面还要放一个CollapsingToolbarLayout布局容器,CollapsingToolbarLayout里面放了一个ImageView和一个Toolbar,并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。↓
<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/p" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <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>
CollapsingToolbarLayout的属性
- layout_scrollFlags=”scroll|exitUntilCollapsed”:向上滚动时收缩View,但可以固定Toolbar,使Toolbar一直在上面
- contentScrim: 当CollapsingToolbarLayout折叠后背景颜色
CollapsingToolbarLayout子view,ImageView属性
- layout_collapseMode=”parallax”:使ImageView跟随滚动的时候具有视差效果
- layout_collapseParallaxMultiplier=”0.7”:视差因子,设置视差滚动因子,值为:0~1
CollapsingToolbarLayout子view,Toolbar属性
- layout_collapseMode=”pin”:当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
OK CoordinatorLayout的入门使用就讲解完了,由于代码比较复杂,这次上源码下载地址 http://download.csdn.net/detail/leejizhou/9407558
- Android Design Support Library(5)- CoordinatorLayout的入门使用
- Android Support Design Library - CoordinatorLayout
- Android Design Support Library--使用CoordinatorLayout来处理滚动
- Android Design Support Library(二):CoordinatorLayout、AppBarLayout简单用法
- Android Design Support Library之CoordinatorLayout,AppBarLayout
- Android Support Design Library之CoordinatorLayout
- (4.1.43.4)design support library: CoordinatorLayout的使用如此简单
- 【Android】Android Design Support Library 的使用
- Android Design Support Library--TextInputLayout的使用
- Android Design Support Library的使用
- Android Design Support Library的简单使用
- Android Design Support Library的初步使用
- Android Design Support Library(1)- FloatingActionButton的使用
- Android Design Support Library(2)- TextInputLayout的使用
- Android Design Support Library(3)- Snackbar的使用
- Android Design Support Library(4)- TabLayout的使用
- Android Design Support Library 库的使用(一)
- Android Design Support Library 库的使用(二)
- 代理总结
- LeetCode:Bulb Switcher
- libevent的安装
- 最新版 CocoaPods 的安装流程
- (二)计算机网络体系结构与参考模型
- Android Design Support Library(5)- CoordinatorLayout的入门使用
- org.hibernate.PersistentObjectException: detached entity passed to persist
- 恭喜自己获得了准博客专家
- 最长不降子序列(LIS)
- iOS 真机测试
- iOS开发调用相机拍摄多张照片
- 手机web图片左右滑动动画效果分享
- caffe训练测试自己的数据集
- (一)1月14日直播视频