本文介绍Design Support Library中CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用.

先列出了Design Support Library中的Features, 然后如何set up, 最后附有Demo程序, 介绍CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用.

Design Support Library Features

Design Support Library中有

Design Support Library Setup

  1. android {
  2. compileSdkVersion 23 // needs to be consistent with major support libs used
  3. }
  4. ext {
  5. supportLibVersion = '23.4.0' // variable that can be referenced to keep support libs consistent
  6. }
  7. dependencies {
  8. compile "com.android.support:appcompat-v7:${supportLibVersion}"
  9. compile "com.android.support:design:${supportLibVersion}"
  10. }

CoordinatorLayout, AppBarLayout使用

CoordinatorLayout

实际上是一个更强大的FrameLayout, 可以通过Behavior 来控制其中各个child view的交互行为. 也可以指定anchor来指定floating view相对于其他某个View的位置. 比如Floating Action Button在显示Snackbar的时候自动向上移动.

为了使Toolbar响应滚动事件, 我们需要给它外边包一个AppBarLayout.

它是一个纵向的LinearLayout, 必须要作为CoordinateLayout的直接child使用.

然后, 我们需要定义AppBarLayout和我们scroll的内容View的关系.

这里可以是一个RecyclerView, 或者其他支持嵌套scrolling的view, 比如NestedScrollView

(实际上View类就有方法setNestedScrollingEnabled(), 但是还是需要View自己实现nested scrolling的功能, 否则这个开关也没有效果.)

support library提供了@string/appbar_scrolling_view_behavior, 它映射到AppBarLayout.ScrollingViewBehavior.

它是用来告诉AppBarLayout下面那个scroll view上的scroll事件什么时候发生.

所以这个属性必须在触发事件的view上指定, 比如:

  1. <android.support.v7.widget.RecyclerView
  2. android:id="@+id/rvToDoList"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. app:layout_behavior="@string/appbar_scrolling_view_behavior">

当CoordinatorLayout看到自己的child(比如RecyclerView)声明了这个属性, 就会在自己的其他child中寻找相关的view(AppBarLayout).

这样, 当RecyclerView发生scroll事件的时候, AppBarLayout和其中的views都会被通知到.

滚动事件怎么通知到AppBarLayout的呢? 还需要一个属性: app:layout_scrollFlags.

  1. <android.support.design.widget.AppBarLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:fitsSystemWindows="true"
  5. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  6. <android.support.v7.widget.Toolbar
  7. android:id="@+id/toolbar"
  8. android:layout_width="match_parent"
  9. android:layout_height="?attr/actionBarSize"
  10. app:layout_scrollFlags="scroll|enterAlways"/>
  11. </android.support.design.widget.AppBarLayout>

app:layout_scrollFlags属性中:

  • scroll必须有, 这样scroll的任何效果才能生效.
  • enterAlways: 表示只要列表上方内容滚动出现, View就应该出现. 适用的情形: 当把列表滚到底部时, Toolbar被隐藏了, 一旦回滚一点儿, Toolbar就应该立即出现. 如果不设置这个flag, 默认的行为是一直要把列表滚到顶部, Toolbar才会出现.
  • enterAlwaysCollapsed: 正常情况下, 如果只有enterAlways被指定, 在列表向下滚动的过程中Toolbar将会一直展开.

    如果同时指定了enterAlwaysCollapsedminHeight, 那么开始滚动以后, 只滚动到minHeight为止, 直到滚动到达列表顶部的时候, view才会展开到全部高度.
  • exitUntilCollapsed: 正常只指定scroll的情况下, scrolling down(即显示列表底部)将会使得整个Toolbar移动到不见.

    如果同时指定了exitUntilCollapsedminHeight, 那么将会收缩到minHeight为止, Toolbar不会一直滚动和退出屏幕.
  • snap: 使用了这个属性, 等scroll事件结束的时候, View可见的尺寸小于它的50%, 则它会直接消失, 如果大于50%, 则它会完整地出现.

还可以用app:layout_scrollInterpolator属性指定滚动动画效果的插值器.

折叠效果

如果想要折叠Toolbar的效果, 可以在Toolbar外面包一层CollapsingToolbarLayout

这个类必须作为AppBarLayout的直接child使用.

  1. <android.support.design.widget.CollapsingToolbarLayout
  2. android:id="@+id/collapsing_toolbar"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:fitsSystemWindows="true"
  6. app:contentScrim="?attr/colorPrimary"
  7. app:expandedTitleMarginEnd="64dp"
  8. app:expandedTitleMarginStart="48dp"
  9. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  10. <android.support.v7.widget.Toolbar
  11. android:id="@+id/toolbar"
  12. android:layout_width="match_parent"
  13. android:layout_height="?attr/actionBarSize"
  14. app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>
  15. </android.support.design.widget.CollapsingToolbarLayout>

包了这个类之后, setTitle要调用这个类的方法:

  1. CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
  2. collapsingToolbar.setTitle("Title");

背景图平行淡出

这个类使得我们可以做更高级的动画效果, 比如放一个ImageView, 它在折叠的时候淡出.

这时候需要把ImageView的app:layout_collapseMode属性置为parallax.

  1. <android.support.design.widget.AppBarLayout
  2. android:id="@+id/appbar"
  3. android:layout_width="match_parent"
  4. android:layout_height="200dp"
  5. android:fitsSystemWindows="true"
  6. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  7. <android.support.design.widget.CollapsingToolbarLayout
  8. android:id="@+id/collapsing_toolbar"
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:fitsSystemWindows="true"
  12. app:contentScrim="?attr/colorPrimary"
  13. app:expandedTitleMarginEnd="64dp"
  14. app:expandedTitleMarginStart="48dp"
  15. app:layout_scrollFlags="scroll|exitUntilCollapsed"
  16. app:layout_scrollInterpolator="@anim/hero_image_interpolator">
  17. <ImageView
  18. android:id="@+id/logo"
  19. android:layout_width="match_parent"
  20. android:layout_height="match_parent"
  21. android:contentDescription="@null"
  22. android:fitsSystemWindows="true"
  23. android:scaleType="fitCenter"
  24. android:src="@drawable/android_logo"
  25. app:layout_collapseMode="parallax"
  26. app:layout_collapseParallaxMultiplier="0.1" />
  27. <android.support.v7.widget.Toolbar
  28. android:id="@+id/toolbar"
  29. android:layout_width="match_parent"
  30. android:layout_height="?attr/actionBarSize"
  31. app:layout_collapseMode="pin"
  32. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  33. </android.support.design.widget.CollapsingToolbarLayout>
  34. </android.support.design.widget.AppBarLayout>

项目

这里推荐Demo: AndroidDesignWidgetsSample

附图:

本文地址: CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout使用

Reference

Handling Scrolls with CoordinatorLayout

Material Design: scrolling techniques

Design Support Library

Mastering the Coordinator Layout

CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout使用的更多相关文章

  1. Android----Material Design之(FloatActionButton,CoordinatorLayout,CollapsingToolbarLayout,AppBarLayout,TabLayout等)

    Material Design 的一些UI 平常开发还是用的比较多的,以前没写,最近总结一下,写一篇博客,要求版本在5.0以上. 主要介绍了FloatActionButton,CoordinatorL ...

  2. 【转】Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用

    Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用 分类: Android UI ...

  3. [Android] Android利用Coordinatorlayout+AppbarLayout实现折叠式布局

    折叠式布局在App中相当常见,给人一种科技感,充满良好的用户体验. 本文就以两个简单的例子,来举例说明基本折叠式布局: 首先需要在app/build.gradle下添加如下依赖: compile 'c ...

  4. Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)

    在新的Android Support Library里面,新增了CoordinatorLayout, AppBarLayout等. 实现的效果: 向下滚动RecylerView,Tab会被隐藏,向上滚 ...

  5. DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout的使用--AndroidSupportDesign练手

    先po一张效果图 PS:原谅题主的懒惰吧.. 看着是不是很酷炫,那是因为5.0的动画做得好,代码其实没有多少,搞清楚这个布局的层次关系很重要. 废话不多说了,先来看布局文件 最外层是一个DrawerL ...

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

    ok,今天继续更新Material Design系列!!! 废话不说,先看看效果图吧: 好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout  该控件也是De ...

  7. Android学习之CoordinatorLayout+AppBarLayout

    •AppBarLayout 简介 AppbarLayout 是一种支持响应滚动手势的 app bar 布局: 基本使用 新建一个项目,命名为 TestAppBarLayout: 修改 activity ...

  8. 【Android - MD】之CoordinatorLayout的使用

    CoordinatorLayout是Android 5.0新特性--Material Design中的一个布局控件,主要用来协调各个子视图之间的工作,也可以用来作为顶部布局.CoordinatorLa ...

  9. CoordinatorLayout的使用

    最近项目有一个需求,做出类似闲鱼鱼塘界面的效果.如下图: 所以想到用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout去搭建此界面. Coor ...

随机推荐

  1. OAuth2 理解

    OAth2 是为了某个应用向第三方应用开放服务时,控制权限的. 因为不可以直接将账户体系开放出去,要求重新登录. 其实本质是让用户在客户端来判断是否要给该应用开放平台的权限,如果用户同意,那么可以拿到 ...

  2. Android Secret Code

    我们很多人应该都做过这样的操作,打开拨号键盘输入*#*#4636#*#*等字符就会弹出一个界面显示手机相关的一些信息,这个功能在Android中被称为android secret code,除了这些系 ...

  3. [译]ZOOKEEPER RECIPES-TWO PHASED COMMIT

    两段式提交 两段式提交协议可以让所有分布式系统中的客户端达成协议同时提交或回滚事务. 在ZooKeeper中你可以通过协调者(coordinator)创建一个事务节点来实现两段式提交.例如" ...

  4. [转]Linux下g++编译与使用静态库(.a)和动态库(.os) (+修正与解释)

    在windows环境下,我们通常在IDE如VS的工程中开发C++项目,对于生成和使用静态库(*.lib)与动态库(*.dll)可能都已经比较熟悉,但是,在linux环境下,则是另一套模式,对应的静态库 ...

  5. tornado上手

    http://www.tornadoweb.org/en/stable/ http://www.cnblogs.com/fanweibin/p/5418697.html import tornado. ...

  6. JavaScript权威设计--JavaScript语言核心(简要学习笔记一)

    1.对象名/值得映射 var book={ top:"a", fat:true }   2.访问对象属性 book.top book["fat"] 3.通过赋值 ...

  7. ASP.NET MVC5+EF6+EasyUI 后台管理系统(18)-权限管理系统-表数据

    系列目录 这一节,我们插入数据来看看数据流,让各位同学,知道这个权限表交互是怎么一个流程,免得大家后天雾里来雾里去首先我再解释一些表,SysUser和SysRole表不用解释了. SysRoleSys ...

  8. [Keras] Develop Neural Network With Keras Step-By-Step

    简单地训练一个四层全连接网络. Ref: http://machinelearningmastery.com/tutorial-first-neural-network-python-keras/ 1 ...

  9. spring aop

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),它利用一种称为“横切”的技术,剖解开封装的对象内部,并将那些影响了多个类的公共行为封装到一个可重用模块,并将 ...

  10. WebComponent魔法堂:深究Custom Element 之 面向痛点编程

    前言  最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得到的结果是:"资料99%是英语 ...