本文介绍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

android {
compileSdkVersion 23 // needs to be consistent with major support libs used
} ext {
supportLibVersion = '23.4.0' // variable that can be referenced to keep support libs consistent
} dependencies {
compile "com.android.support:appcompat-v7:${supportLibVersion}"
compile "com.android.support:design:${supportLibVersion}"
}

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上指定, 比如:

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

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

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

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

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/> </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使用.

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout>

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

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

背景图平行淡出

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

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

    <android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:layout_scrollInterpolator="@anim/hero_image_interpolator"> <ImageView
android:id="@+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:src="@drawable/android_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1" /> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </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. nuget常用命令

    nuget命令的用法: 一.安装 1.安装指定版本类库install-package <程序包名> -version <版本号> 2.安装到指定的项目install-packa ...

  2. 技术笔记:Indy IdSMTP支持腾讯QQ邮箱邮件发送

    1.腾讯QQ邮箱的授权码问题 因为腾讯邮箱折腾了个底朝天,其要搞什么授权码登录第三方客户端,否则会报这个错误: 'Error: 请使用授权码登录.详情请看: http://service.mail.q ...

  3. 机器指令翻译成 JavaScript —— No.3 流程分割

    上一篇 我们讨论了跳转指令,并实现「正跳转」的翻译,但最终困在「负跳转」上.而且,由于线程模型的差异,我们不能 1:1 的翻译,必须对流程进行一些改造. 当初之所以选择翻译,而不是模拟,就是出于性能考 ...

  4. 【月入41万】Mono For Android中使用百度地图SDK

    借助于Mono For Android技术,.Net开发者也可以使用自己熟悉的C#语言以及.Net来开发Android应用.由于Mono For Android把Android SDK中绝大部分类库都 ...

  5. Python 黑帽编程大纲(变化中)

    Python 黑帽编程大纲(预览版) 教程说明: 本系列教程,采用的大纲母本为<Understanding Network Hacks Attack and Defense with Pytho ...

  6. Speedment -- 利用lambda编写SQL

    众所周知Java8中加入了lambda语法,这一特性也帮助Java开发者极大的简化了开发.Speedment是一个利用lambda表达式操作数据库的框架,相比Java世界中现在非常流行的mybatis ...

  7. 如何用 MEF 扩展应用程序

    最近在写一篇关于如何扩展 Visual Studio 编辑器的文章时,用到了 MEF,因此打算写一篇文章提一下这个技术点.本篇文章并不打算详细介绍 MEF,只是一个最简单的入门,相信您在阅读本篇文章后 ...

  8. ASP.NET AntiXSS的使用

    下载类库: http://wpl.codeplex.com 添加程序集引用 在web.config文件中将AntiXSS类库注册为应用程序的编码器           在<system.web& ...

  9. Entity Framework中使用IEnumerable<T>、IQueryable<T>及IList<T>的区别

    1. IEnumerable<T> IEnumerable<T> :对于在内存中集合上运行的方法,返回的可枚举对象将捕获传递到方法的参数.在枚举该对象时,将使用查询运算符的逻辑 ...

  10. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...