代码小疯子

你眼睛看到的不一定是真的

CoordinatorLayout 使用综述系列(二)与AppBarLayout结合上下联动效果

CoordinatorLayout 使用综述系列(二)

在 gradle 文件中引入 meterial design 库:

compile 'com.android.support:design:22.2.0'

CoordinatorLayout 实现了多种Material Design中提到的滚动效果

CoordinatorLayout 与 AppBarLayout结合使用

图2.1

<?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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">


        <!--        这里写头部移动的布局(例如这里的搜索) -->


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

        <android.support.design.widget.TabLayout
            android:id="@+id/tl_home_header_tab"
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:layout_marginLeft="0dp"
            android:layout_marginRight="0dp"
            android:background="@color/baseHeaderBackgroundColor"
            app:tabIndicatorColor="#fff"
            app:tabIndicatorHeight="2dp"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#fff"
            app:tabTextColor="#d7d7d7"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_home_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
视图层级说明
  • 整个视图被包含在 android.support.design.widget.CoordinatorLayout节点中
  • 响应滑动事件移动的布局 在 android.support.design.widget.AppBarLayout 节点中
  • android.support.design.widget.AppBarLayout 节点中有随着移动而被隐藏的布局,也有固定不动的布局
  • 随着移动而被隐藏的布局在 android.support.design.widget.CollapsingToolbarLayout 节点中,CollapsingToolbarLayout 可以理解为子条目布局的封装,需要注意的是,在这里设置了CollapsingToolbarLayout节点的 app:layout_scrollFlags=”scroll|enterAlways” 属性

图2.2

  • CollapsingToolbarLayout节点的 layout_scrollFlags属性一般有如下的取值

enterAlways: 一旦向上滚动这个view就可见。
enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。

图2.1中显示的效果就是 layout_scrollFlags属性值设置为 enterAlways时的效果,一般也同时设置scroll 为响应事件,在这里,CollapsingToolbarLayout节点响应的滑动联动事件是 下面所(所设置app:layout_behavior=”@string/appbar_scrolling_view_behavior”)的视图

当设置 app:layout_scrollFlags=”scroll|enterAlwaysCollapsed” 时,向上滑动时,CollapsingToolbarLayout 节点中布局隐藏,当再下拉时,移动隐藏的布局不会再回到原来的位置 ,而是停留在边缘 如图2.3 中所示效果

图2.3

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zl18603543572/article/details/78260917
文章标签: Coordinato
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭