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

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

(三十七)FloatingActionButton、CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 基本使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 本文纯个人学习笔记,由于水平有限,难免有所出错,有发现的可以交流一下。 一、FloatingActionButton1.demo布局文件...
  • qq_18983205
  • qq_18983205
  • 2017年12月08日 21:58
  • 40

CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用

关于Toolbar和TabLayout的使用,如果不了解的话,可以先看看者两篇文章: ToolBar的使用 TabLayout的使用今天要实现的效果如下图所示: 当ToolBar滚出屏幕的...
  • mChenys
  • mChenys
  • 2016年05月29日 23:17
  • 6459

coordinatorLayout 和AppBarLayout的踩坑记

5.0的材质化引入了很多的新东西,网上的资料也有很多http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html 介绍了...
  • u013424496
  • u013424496
  • 2017年01月23日 17:26
  • 925

CoodinatorLayout+Tablayout标题栏和下拉刷新放冲突问题

问题: 当我们使用coordinatorlayout 要显示带有下拉刷新并且,向上滑动式卡住tablayout同时标题栏要跟着滑出 去,问题来了,滑上去是没有冲突的,但是下滑的时候是想把标题栏下...
  • heimaer
  • heimaer
  • 2017年04月10日 11:58
  • 811

CoordinatorLayout、AppBarLayout、 Toolbar、CollapsingToolbarLayout、NestedScrollView 综合使用,详细解析

这篇文章主要介绍CoordinatorLayout、AppBarLayout、 Toolbar、CollapsingToolbarLayout、NestedScrollView的使用。看上去很多,其实...
  • xx326664162
  • xx326664162
  • 2017年03月22日 17:51
  • 1115

CoordinatorLayout + AppBarLayout + SwipeRefreshLayout在eclipse上使用的方法和问题记录

项目开始使用的eclipse进行开发。 需求 在做一个界面时 状态栏下面是标题栏,黄色的图片是头部的viewpager,再下面是fragment的名字的tab,tab下面是viewpager...
  • vpractical
  • vpractical
  • 2016年07月28日 11:36
  • 3479

Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar

ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout  ...
  • u010687392
  • u010687392
  • 2015年07月12日 19:28
  • 25452

CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+ViewPager滑动效果,以及代码处理是否推动效果

布局文件
  • sinat_35541927
  • sinat_35541927
  • 2016年10月17日 20:56
  • 1049

CoorDinatorLayout+AppBarLayout+TabLayout实现界面

在上一个项目的开发中,遇到了一个比较复杂的界面。之后研究之后采用5.0之后的design包下的控件实现。 首先上效果图。在这个简单的demo中,我把这个View分为两个部分。 1、常驻部分。定义在...
  • qq_31151273
  • qq_31151273
  • 2015年12月20日 13:38
  • 3618

CoordinatorLayout + AppBarLayout实现滑动隐藏ToolBar

先看效果   官方推出了实现联动的ViewGroup:CoordinatorLayout ,CoordinatorLayout 实现了NestedScrollingParent接口,Co...
  • HiJson
  • HiJson
  • 2017年01月12日 14:57
  • 1296
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CoordinatorLayout 使用综述系列(二)与AppBarLayout结合上下联动效果
举报原因:
原因补充:

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