javaee论坛

普通会员

225648

帖子

335

回复

349

积分

楼主
发表于 2017-09-08 14:51:11 | 查看: 316 | 回复: 1
从这篇文章开始,和大家一起聊聊design包中的AppBarLayout和CoordinatorLayout。至此,Android Material Design系列的学习已进行到第四篇,大家可以点击以下链接查看之前的文章:

AppBarLayout


从名字上可以看出,AppBarLayout的设计精髓在于,与导航栏(也就是Toolbar)、顶部标签栏(即TabLayout)一起使用,来达到MD风格中App Bar的一些滚动交互设计效果。至于能实现哪些效果,在后文中我会举出几种常见的例子和实现方式。

这里写图片描述

从上图继承结构上可以看出,AppBarLayout从本质上就是一个垂直的LinearLayout,只是它为了实现交互动画效果增加了一些滑动特性,基本上严重依赖于协调者布局CoordinatorLayout。如果你将AppBarLayout放置在一个其它的ViewGroup中,这些滑动特性将不起作用,而此处的AppBarLayout也就是失去了原本存在的意义。

定义在AppBarLayout中的Children应该明确设置各自的scrolling behavior,也就是滑动行为。在代码中,可以使用setScrollFlags(int)方法,在布局中可以使用app:layout_scrollFlags属性。setScrollFlags的参数取值是系统定义好的五个常量,位于AppBarLayout.LayoutParams类中。这五个常量的含义从名字中也可以看出一二,这里就不干巴巴的念叨了,后续结合着实际案例分别介绍,这样理解也会深刻一些:

  • SCROLL_FLAG_SCROLL
  • SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
  • SCROLL_FLAG_ENTER_ALWAYS
  • SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED
  • SCROLL_FLAG_SNAP

CoordinatorLayout


协调者布局,Google将其解释为一个超级FrameLayout:

CoordinatorLayout is a super-powered FrameLayout.

这里写图片描述

CoordinatorLayout存在的意义就是通过自定义Children的Behaviors(行为)来实现控件之间的交互动画效果。而像前文所提到的FloatingActionButton和AppBarLayout都有自己的DefaultBehavior(默认行为),所以,这两个控件更适合与CoordinatorLayout联合使用。当然,我们在使用CoordinatorLayout时,也可以自己动手编写Behavior来实现一些复杂的交互效果。

CoordinatorLayout到底有多强大?接下来我会通过一些常见案例来一一展示它的使用,绝对让你看到过瘾,本文就先讲述FAB和Snackbar的例子。

CoordinatorLayout 与 FAB 与 Snackbar


在这个例子中,我们要实现这样一个效果,界面左下角又一个FloatingActionButton按钮,点击弹出Snackbar,效果图如下:

这里写图片描述

只需要使用CoordinatorLayout和design包中FAB就能达到这个效果,布局代码如下:

<?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:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab_add"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="@dimen/dp_16"        android:src="@mipmap/ic_toolbar_add"        android:onClick="onClickFab"        android:layout_gravity="end|bottom"        app:backgroundTint="@color/fab_ripple"/></android.support.design.widget.CoordinatorLayout>

然后在代码中编写FAB的点击事件,弹出Snackbar,代码如下:

public void onClickFab(View v){        Snackbar.make(findViewById(R.id.fab_add), "Show The Snackbar", Snackbar.LENGTH_SHORT).show();    }

前面我们提过,android design包的FAB控件自带了默认的behavior,所以配合着CoordinatorLayout能够实现这个交互动画效果。如果你使用普通的Button控件取代FAB,或者其他的ViewGroup取代CoordinatorLayout,Snackbar显示时会遮挡住这个底部按钮,效果如下:

FAB 02.gif

使用这个例子必须特别强调两个问题,也是个人走过的坑,和大家分享一下, 避免你们和我走一样的弯路:

  • Snackbar.make参数问题
    前文我介绍Snackbar时提到了make方法的三个参数,特别是第一个View类型的参数,我使用了getWindow().getDecorView(),表示Snackbar展示的父窗口。在这个例子中,必须改为FAB对象或者CoordinatorLayout对象,否则Snackbar的出现还是会覆盖FAB,出现上图中的错误效果。

  • design包版本问题
    截止目前,design包已经更新到23.3.0版本了,一般我们都会使用最新版本的API,但是这个案例中如果你选择了最新版本,会出现另一种问题,Snackbar消失后,FAB按钮停留在上移的位置,不会向下移动回去,如图所示:
    FAB 03.gif
    而在23.1.0版本的design包中不存在这个问题,估计下个版本的design包会修复这个问题吧。所以,如果你也想实现这个效果,千万要记得不要使用目前最新版本23.3.0的design包,而是:

compile 'com.android.support:design:23.1.0'

示例源码


我在GitHub上建立了一个Repository,用来存放整个Android Material Design系列控件的学习案例,会伴随着文章逐渐更新完善,欢迎大家补充交流,Star地址:

https://github.com/Mike-bel/MDStudySamples


普通会员

0

帖子

305

回复

319

积分
沙发
发表于 2024-01-17 20:06:52

谢谢

您需要登录后才可以回帖 登录 | 立即注册

触屏版| 电脑版

技术支持 历史网 V2.0 © 2016-2017