最近项目有一个需求,做出类似闲鱼鱼塘界面的效果。如下图:

所以想到用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout去搭建此界面。

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.v4.widget.NestedScrollView
android:id="@+id/nsv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v4.view.ViewPager
android:id="@+id/vp_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.v4.widget.NestedScrollView>

当CoordinatorLayout看到自己的child(比如NestedScrollView)声明了这个属性, 就会在自己的其他child中寻找相关的view(AppBarLayout).
这样, 当NestedScrollView发生scroll事件的时候, AppBarLayout和其中的views都会被通知到.

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

  • scroll:该view显示时,只有在滚动视图顶部向上滚动时,该view才会慢慢消失。 该view消失后,只有在滚动视图顶部向下滚动时,该view才会慢慢出现。
  • enterAlways:表示只要列表上方内容滚动出现, View就应该出现. 适用的情形: 当把列表滚到底部时, Toolbar被隐藏了, 一旦回滚一点儿, Toolbar就应该立即出现. 如果不设置这个flag, 默认的行为是一直要把列表滚到顶部, Toolbar才会出现.
  • enterAlwaysCollapsed:正常情况下, 如果只有enterAlways被指定, 在列表向下滚动的过程中Toolbar将会一直展开.如果同时指定了enterAlwaysCollapsedminHeight, 那么开始滚动以后, 只滚动到minHeight为止, 直到滚动到达列表顶部的时候, view才会展开到全部高度.
  • exitUntilCollapsed: 正常只指定scroll的情况下, 向下滑动将会使得整个Toolbar移动到不见.如果同时指定了exitUntilCollapsedminHeight, 那么将会收缩到minHeight为止, Toolbar不会一直滚动和退出屏幕.
  • snap:使用了这个属性, 等scroll事件结束的时候, View可见的尺寸小于它的50%, 则它会直接消失, 如果大于50%, 则它会完整地出现.

若要实现Toolbar折叠的效果,需在Toolbar外面包一层CollapsingToolbarLayout,这个类必须作为AppBarLayout的直接child使用。

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:collapsedTitleGravity="center"
app:collapsedTitleTextAppearance="@style/yuquan_collapsed_text"
app:contentScrim="@color/white"
app:expandedTitleGravity="top"
app:expandedTitleMarginStart="60dp"
app:expandedTitleMarginTop="35dp"
app:expandedTitleTextAppearance="@style/yuquan_expanded_text"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
  <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="@dimen/toolbar_size"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"> <ImageView
android:id="@+id/iv_yuquan_back"
android:layout_width="@dimen/toolbar_size"
android:layout_height="@dimen/toolbar_size"
android:layout_gravity="left"
android:clickable="true"
android:padding="12dp"
android:src="@drawable/icon_yuquan_back_gray" /> <ImageView
android:id="@+id/iv_yuquan_more"
android:layout_width="@dimen/toolbar_size"
android:layout_height="@dimen/toolbar_size"
android:layout_gravity="right"
android:clickable="true"
android:padding="12dp"
android:visibility="gone"
android:src="@drawable/icon_yuquan_more_gray" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>

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

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

这里可以设置ImageView折叠展开的效果:

  layout_collapseMode属性设置为parallax,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和app:layout_collapseParallaxMultiplier属性(设置视差因子)搭配使用,其值为0~1;设置上为pin,则不会有滚动效果。

说一说遇到的坑吧:

因为项目框架搭建的列表全部使用ListView,所以最初viewpager里面放的也是ListView。因为Listview在Coordinatorlayout中无法响应滚动事件,所以自己实现NestedScrollingChild的功能,待全部写完,测试时发现在5.0以下系统竟然只能滑动一屏!

Google一圈才发现,这只对5.0+系统有效,最好的解决办法是用RecyclerView,因为内部实现了NestedScrollingChild,处理了“与父view交互”的嵌套滑动。

所以在使用Coordinatorlayout时,最好最好最好配合RecyclerView使用。

By LiYing.

CoordinatorLayout的使用的更多相关文章

  1. 【知识必备】一文让你搞懂design设计的CoordinatorLayout和AppbarLayout联动,让Design设计更简单~

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

  2. 安卓Design包之超强控件CoordinatorLayout与SnackBar的简单使用

    在前面的Design中,学习使用了TabLayout,NavigationView与DrawerLayout实现的神奇效果,今天就带来本次Design包中我认为最有意义的控件CoordinatorLa ...

  3. CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout使用

    本文介绍Design Support Library中CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout的使用. 先列出了Design S ...

  4. 使用 CoordinatorLayout 出错 inflating class android.support.design.widget.CoordinatorLayout

    ava.lang.RuntimeException: Unable to start activity ComponentInfo{com.czr.ianpu/com.czr.ianpu.MainAc ...

  5. 协调者布局:CoordinatorLayout

    layout_scrollFlag属性: scroll:需要哪个View滚动就需要设置该属性: exitUntilCollapsed:向上推动屏幕的时候滑动的部分折叠起来,只有下滑到最低端的时候折叠部 ...

  6. 使用 CoordinatorLayout 实现复杂联动效果

    GitHub 地址已更新: unixzii / android-FancyBehaviorDemo CoordinatorLayout 是 Google 在 Design Support 包中提供的一 ...

  7. CoordinatorLayout+TabLayout+ViewPager

    <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.C ...

  8. Android开发学习之路-Android Design Support Library使用(CoordinatorLayout的使用)

    效果图: 上面的这个图有两个效果是,一个是顶部的图片,在上滑之后会隐藏起来并且显示出一个ToolBar(ToolBar类似于ActionBar,但是只有ToolBar是兼容Material Desig ...

  9. CoordinatorLayout自定义Bahavior特效及其源码分析

    @[CoordinatorLayout, Bahavior] CoordinatorLayout是android support design包中可以算是最重要的一个东西,运用它可以做出一些不错的特效 ...

  10. 自定义CoordinatorLayout Behavior 隐藏Footer View

    在用新的控件中,我们可以用Toolbar与CoordinatorLayout实现 向上滚动隐藏的效果,可是官方并没有找到向上隐藏底部导航的功能,有一些第三方的框架实现了. 在Android M,Coo ...

随机推荐

  1. leetcode Binary Tree Right Side

    Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...

  2. Jsp敏感词过滤

    Jsp敏感词过滤 大部分论坛.网站等,为了方便管理,都进行了关于敏感词的设定. 在多数网站,敏感词一般是指带有敏感政治倾向(或反执政党倾向).暴力倾向.不健康色彩的词或不文明语,也有一些网站根据自身实 ...

  3. MyBatis实现Mysql数据库分库分表操作和总结

    前言 作为一个数据库,作为数据库中的一张表,随着用户的增多随着时间的推移,总有一天,数据量会大到一个难以处理的地步.这时仅仅一张表的数据就已经超过了千万,无论是查询还是修改,对于它的操作都会很耗时,这 ...

  4. css一长串连续英文字符的换行

    在标签内,中文的换行是没有什么问题的,但英文的换行就有问题.当出现一长串连续的英文字符时,换行就失效了,内容会溢出.解决这个问题只需要一行css就够了: p{ word-wrap: break-wor ...

  5. R的数据图形

    R支持4种图形类型: base graphics, grid graphics, lattice graphics,  ggplot2. Base graphics是R的默认图形系统. 一.  基本图 ...

  6. Node.js之错误处理与断言处理

    Node.js之错误处理与断言处理 1. 使用 domain 模块处理错误 try..catch 多用于捕捉同步方法中的抛出错误,但不能用try..catch捕捉异步方法中抛出de错误 如: 1 va ...

  7. mint-ui —— navbar和tab-container的区别

    navbar的具体实现 <template> <div class="page-navbar"> <div class="page-titl ...

  8. 怎么检测JDK环境变量是否配置正确

    怎么检测JDK环境变量是否配置正确.. 点击开始--运行--输入cmd,点击确定. 在命令行窗口输入java  然后Enter.没有出现java既不是内部命令也不是外部命令.说明配置是正确的. 在命令 ...

  9. 一文看懂web服务器、应用服务器、web容器、反向代理服务器区别与联系

    我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web服务器/Web容器/Web应用程序服务器/反向代理有点像四胞胎,在网络上经常一起出现.本文将带读者对这四个相似概念如何区分. 1 ...

  10. Java - 9个处理异常的最佳准则

    其实工作这么久了一直都没搞清楚到底如何来处理异常,偶然看到一篇外文感觉还不错,便把它翻译了下来,原文链接位于本文末尾处. 在java中处理异常并不是一件简单的事,不止初学者觉得它难以理解甚至连有经验的 ...