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

原创 2017年10月17日 15:19:27

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AppbarLayout实现基本的头部跟随列表滚动效果

AppBarLayout继承自LinearLayout,布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料...

Android4.4沉浸状态栏结合CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout等使用详解

上一篇我们说了Android4.4沉浸状态栏的使用详解 Android4.4沉浸状态栏全解析 现在我们要把它结合CoordinatorLayout,AppBarLayout,Collapsing...
  • jeffleo
  • jeffleo
  • 2016年06月24日 23:07
  • 3561

AppBarLayout与CoordinatorLayout实现toobar各种效果

AppBarLayout是一个Bar容器,它把里面的组件全部作为AppBar。而CoordinatorLayout则是可以协调里面view行为的一个布局。它们连用可以实现AppBar的各种效果...

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现app的折叠效果

做程序的,一定要脾气暴躁,别说话,上图—– 由于这个页面的业务逻辑比较复杂(真想把产品拖出去打死,如果我们有产品的话),下面看我手绘的分析图最外层跟布局是android.support.design...

Android Design Library(二)使用CoordinatorLayout布局实现联动效果

使用CoordinatorLayout布局实现联动效果,下面先看下效果图,开始、滑动中和滑动完成效果图如下: 接下来我们具体来看下怎样实现这种效果 首先在项目的buil...

一文彻底搞懂 Design 设计的 CoordinatorLayout 和 AppbarLayout 联动,让 Design 设计更简单~

一、写在前面 其实博主在之前已经对 Design 包的各个控件都做了博文说明,无奈个人觉得理解不够深入,所以有了这篇更加深入的介绍,希望各位看官拍砖~ 二、从是什么开始 1、首先我们得知道 Co...

CoordinatorLayout结合AppBarLayout的基本属性

Android中MaterialDesign使用 (四)CoordinatorLayout的初识Android中MaterialDesign使用 (一)TabLayout+Fragment实现顶部选项...

Android进阶之路 - CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、Toolbar的详细使用

默默的对自己说声抱歉,现在才学习了这些知识,不知不觉写了挺多,感觉在此博文复制全部代码的话,会给大家带来阅读疲劳,所以代码之后会上传在github,同时会提供下载地址,当然我会把遇到的问题与解决方案,...

Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用

【转载请注明出处:http://blog.csdn.net/feiduclear_up/article/details/46514791 CSDN 废墟的树】上一篇博客我们学习了Android Des...

CoordinatorLayout、AppBarLayout、TableLayout、CollapsingToolbarLayout、NestedScrollView的使用

一、TabLayout:标签/选项卡,在2015年谷歌正式将该控件官方化。效果图如下所示: 1.使用:1):添加依赖库,该控件被谷歌官方纳入了desigh库中 2):在xml布局文件中引用...
  • cy62423
  • cy62423
  • 2016年05月20日 11:42
  • 1725
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CoordinatorLayout 使用综述系列(二)与AppBarLayout结合上下联动效果
举报原因:
原因补充:

(最多只允许输入30个字)