Android 协调者布局 CoordinatorLayout简单认识

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"


  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值