CoordinatorLayout笔记

CoordinatorLayout 的基本使用

CoordinatorLayout相信很多人都用过,功能很强大,最近想比较深入的学习这东西。写几篇博客记录下。由于个人喜欢知其然后知其所以然,所以先讲讲用法。再说说CoordinatorLayout的源码。

CoordinatorLayout 是什么?

  1. 首先他是一个继承于FrameLayout 的ViewGroup。
  2. 它可以通过设置子View(直接子View) 的Behavior 或者设置Achor使得子View 之间可以相互作用。
  3. Behavior可以自定义,有些特定的View有默认的Behavior(如AppBarView、FloatingActionButton)。

一个常见的例子Toolbar的例子

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_fastexit"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways"
        app:title="快速返回"
        app:titleTextColor="@android:color/white"
        />

</android.support.design.widget.AppBarLayout>

 <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/teststring"
            android:textSize="20sp" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

下面是效果图:

这里写图片描述

scroll_Flags 的五种值介绍

  1. scroll可以让你的当前控件(Toolbar)响应sv(可滑动控件下同)的滑动事件;其他flag都得和这个一起用才有效果;如果当前控件(Toolbar)的兄弟子控件(比如AppBarLayout 里面还有一个TextView)未设置这个值则它不会生效。


  2. enterAlways 当sv向下滑动时可现实当前view 这是一种“快速返回” 的模式,个人感觉搜索、导航栏可以用这个值。


  3. enterAlwaysCollapsed 这个值要和enterAlways 一起用才有效果。首先要设置这个view 的minheight 在sv向下滑动时将不全部呈现,而是显示view 底部minheight 的部分。


  4. exitUntilCollapsed 这个值也要view 的minheight属性,当sv向上滑动时view 不完全退出,会保留底部mingheight部分。


  5. snap 这个值可以是让view 出现一种阻尼效果。停止滑动前如果view 呈现出25%则sv 会自动向上滑动直到view 消失;停止滑动前如果view 呈现出75%则sv 会自动向下滑动直到view 完全展现在视野里。

scroll|enterAlways|enterAlwaysCollapsed

   <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_fastexit"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="70dp"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
        app:title="Toolbar"
        android:gravity="bottom"
        app:titleTextColor="@android:color/white"
        />

</android.support.design.widget.AppBarLayout>

效果图

这里写图片描述

scroll|exitUntilCollapsed

 <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_fastexit"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="70dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:title="Toolbar"
        android:gravity="bottom"
        app:titleTextColor="@android:color/white"
        />

</android.support.design.widget.AppBarLayout>   

效果图

这里写图片描述

scroll|snap

  <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_fastexit"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:minHeight="70dp"
        app:layout_scrollFlags="scroll|snap"
        app:title="Toolbar"
        android:gravity="center_horizontal"
        app:titleTextColor="@android:color/white"
        />

</android.support.design.widget.AppBarLayout>

效果图

这里写图片描述

CoordinatorLayout做视差效果

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="300dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="@color/colorPrimary"
        app:expandedTitleMarginEnd="72dp"
        app:expandedTitleMarginStart="20dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:scrimAnimationDuration="300">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/chen"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.1" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_test"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:title="Collapse"
            />

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>
效果图:

这里写图片描述

AppBar相关说明:

AppBarLayout 要设置具体高度,这个高度就是整个头部展开的高度。

CollapsingToolbarLayout 相关说明:

  1. layout_scrollFlags 必须是exitUntilCollapsed 但是不用设置minheight 会把pin 元素的高度设置为它的minheight 。
  2. 这个title(Collpase) 我是在toolbar 里面设置的,其实也可以直接设置,CollapsingToolbarLayout 的title 属性和titleEnable(个人建议用CollapsingTollBarLayout 的属性,因为有些时候pin 控件有可能不是toolbar 而是其他东西)。
  3. expandedTitleMarginStart 和expandedTitleMarginEnd 是title变化的起始、结束高度。
  4. scrimAnimationDuration是视差动画的持续时长。
  5. contentScrim 是控件折叠之后的背景颜色,这个要是不设置折叠之后会造成pin 控件的背景还是图片。
  6. v21的手机可以通过设置statusBarScrim属性来设置折叠之后statusbar 的颜色。
  7. layout_collapseMode 又两种值:pin:折叠之后最终显示的view;parallax 在滑动过程中能产生视差效果后退出界面。
  8. layout_collapseParallaxMultiplier 视差效果系数,这个值越大,视差效果越明显。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值