Android Material Design新UI控件使用大全 三

序言

在我们对NavigationView侧滑,TextInputLayout输入框,Snackbar弹出提示框,FloatingActionBar圆形button,TabLayout顶部导航栏及CoordinatorLayout有了一定的了解后,我们最后将对AppBarLayout,CollapsingToolbarLayout进行最后的分析,我们先看两张效果图,(因为暂时没找到好的方法来录制gif,先借用网上的图)

AppBarLayout

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的内容都作为AppBar, 支持手势滑动操作,可以管理其中的控件在内容滚动时的行为,如图所示:


实现这样效果的代码布局如下:

<android.support.design.widget.AppBarLayout
     android:id="@+id/appbar"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:fitsSystemWindows="true">

     <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|enterAlways" />

      <android.support.design.widget.TabLayout
          android:id="@+id/appbar_tab_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:tabTextColor="@android:color/white"             app:tabSelectedTextColor="@android:color/holo_red_light"
          app:tabGravity="fill" />

  </android.support.design.widget.AppBarLayout>

注意:这里我们将Toolbar和TabLayout共同组成AppbarLayout的内容,并且AppbarLayout必须作为ToolBar的父布局

CoordinatorLayout与AppbarLayout的结合使用

我们知道,AppBarLayout是支持我们的手势滑动操作的,不过需要跟CoordinatorLayout一起搭配使用,我们先看两张效果图,然后再进行分析:

左侧是我们初始化的代码,从上至下分别为Toolbar,TabLayout,ViewPager,底部为一个FloatingActionBar,我们现在来看一下xml文件布局的代码:

<?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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/appbar_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextColor="@android:color/white"
            app:tabSelectedTextColor="@android:color/holo_red_light"
            app:tabGravity="fill" />

    </android.support.design.widget.AppBarLayout>

    <!--可滑动的布局内容,内部必须包含一个RecyclerView-->
    <android.support.v4.view.ViewPager
        android:id="@+id/appbar_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:borderWidth="0dp"
        android:layout_margin="20dp"
        android:src="@drawable/floating_icon" />

</android.support.design.widget.CoordinatorLayout>

我们现在来分析一下整个布局中CoordinatorLayout的作用:

  1. 因为CoordinatorLayout是一个超级的FrameLayout,所以我们只要设置android:layout_gravity="bottom|end"这个属性即可将FloatingActionBar放置在底部靠右的位置;
  2. 如果我们想要在手指向上滑动的时候Toolbar隐藏,就需要给Toolbar设置一个属性,app:layout_scrollFlags="scroll|enterAlways",来确定滚动出屏幕时候的动作,我们现在来解释一些这些参数:
    • scroll: 所有想滚动出屏幕的view**都需要**设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
    • enterAlways: 配合scroll使用,设置这个flag时，任意向下的滚动都会导致该view变为可见，当向上滑的时候Toolbar就隐藏，下滑的时候显示，启用快速“返回模式”。
    • enterAlwaysCollapsed: 这个flag定义的是何时进入（已经消失之后何时再次显示）,配合scroll使用,当你的视图已经设置minHeight属性又使用此标志时，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候完全展开。
    • exitUntilCollapsed: 这个flag是定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。
    • 注意:这些flag的模式一般是前两个一起使用或者 scroll与enterAlwaysCollapsed 一起使用,而最后一个flag只有在CollapsingToolbarLayout中才有用,所以这些flag的使用场景,一般都是固定的;
  3. 当然,为了使Toolbar可以滚动,还需要一个条件,就是CoordinatorLayout布局下需要包裹一个可以滑动的布局，比如 RecyclerView或者NestedScrollView(ListView及ScrollView不支持),CoordinatorLayout包含的子布局中带有滚动属性的View需要设置app:layout_behavior属性。示例中Viewpager设置了此属性:app:layout_behavior="@string/appbar_scrolling_view_behavior",这样一来AppBarLayout就能响应RecyclerView中的滚动事件,CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了;

总结:如果想让Toolbar划出屏幕,需要做到以下4点

  1. CoordinatorLayout作为顶层的父布局
  2. 需要给Toolbar也就是想要划出屏幕的view设置flag值,app:layout_scrollFlags=”scroll|enterAlways”
  3. 需要给可滑动的组件设置一个layout_behavior的属性,示例中为viewpager,app:layout_behavior="@string/appbar_scrolling_view_behavior"
  4. 可滑动的组件目前经测试支持RecyclerView,NestedScrollView,示例中viewpager中包含的就是一个RecyclerView

CollapsingToolbarLayout–可折叠的Toolbar

我们知道如果在某些详情页面,我们只是在AppbarLayout中使用了可隐藏/展示的Toolbar的话, 只能固定到屏幕顶端并且不能做出好的动画效果,而且无法控制不同元素如何响应collapsing(折叠)的细节，所以为了达到此目的，CollapsingToolbarLayout就应运而生.

CollapsingToolbarLayout一般都是需要包括一个Toolbar,这样就可以实现一个可折叠的Toolbar,一般都是作为AppbarLayout的子view使用,CollapsingToolbarLayout的子视图类似于LinearLayout垂直方向排放。

CollapsingToobarLayout的属性及用法:

  1. Collapsing title：ToolBar的标题，CollapsingToolbarLayout和Toolbar在一起使用的时候，title会在展开的时候自动变得比较大，而在折叠的时候让字体变小过渡到默认值。注意，你必须在CollapsingToolbarLayout上调用setTitle()，而不是在Toolbar上进行设置。
  2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
  3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。
  4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉因子，可以通过属性app:layout_collapseParallaxMultiplier=”0.7”来改变。值的范围[0.0,1.0]，值越大视差越大。
  5. CollapseMode ：子视图的折叠模式，需要在子视图设置;
    • “pin”：固定模式，在折叠的时候最后固定在顶端；
    • “parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。
  6. layout_anchor : 这个是CoordinatorLayout提供的属性,与layout_anchorGravity 一起使用,可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）或者头像

我们先来看看实现的效果图:

我们现在看看布局文件的写法:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="suericze.coordinatoreps.CollapsingToobar.CollapsingToobarActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_collaps_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorPrimary"

            >

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/example"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6" />

            <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>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">
             <include layout="@layout/card_view" />
        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/floating_icon"
        app:backgroundTintMode="multiply"
        app:layout_anchor="@id/appbar"
        android:layout_margin="20dp"
        app:layout_anchorGravity="bottom|end|right"/>

</android.support.design.widget.CoordinatorLayout>

注意:

  1. 我们使用了下面的参数设置了FloatingActionButton的位置，两个属性共同作用使得浮动按钮可以随着手势能折叠消失和展现。

    app:layout_anchor=”@id/appbar”

    app:layout_anchorGravity=”bottom|right|end”

  2. AppBarLayout 的高度layout_height固定，不能 “wrap_content”，如果不固定的话动画效果不友好
  3. CollapsingToolbarLayout的子视图设置layout_collapseMode属性
  4. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

源码地址: GitHub

OK,到这里我们已经将Materil Design的常用控件介绍完毕,下次我们将对自定义的Behavior进行解析,我们将会实现更加酷炫好看的效果,愿大家都有美好的一天…

时间： 2025-01-07 00:21:04

Android Material Design新UI控件使用大全 三的相关文章

Android Material Design新UI控件使用大全 二

序言 上一篇中我们介绍了几个简单的新UI控件,相信很多小伙伴对Materil Design的视觉效果有了一定的了解,今天我们就继续介绍其他几个控件的玩儿法,让我们一探Materil Design的究竟,我们先来看一下我们今天要介绍的CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout及TabLayout, ok,我们接下来就逐一对这些控件进行解析,揭开他们神秘的面纱,来为我们服务,Let's Go. TabLayout 我们先来看官方的介绍

Android Material Design新UI控件使用大全 一

序言 自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们

【Android】开源项目UI控件分类汇总之ProgressBar

Android开发的宝库越来越多,我开发中有需要的组件,主要参考Trinea的大作Android开源项目分类汇总(包含了后面的绝大多数).CSDN上直接拿来用!最火的Android开源项目还有CSDN上的直接拿来用!十大Material Design开源项目,受益匪浅,但是,有的分类项目太多,不是每个项目都有预览,不容易找到什么是最想要的,而且有一些项目不容易顺利地导入,我把同类的Demo做到一个app里,供大家下载参考.不过顺序没有按Trinea的大作来,当下需要什么控件,就优先写哪些,先从最

Android Material Design带UI变化

谷歌Matias Duarte称,"Material Design是漂亮和大胆的.由于干净的排版和布局简单且easy理解.内容才是焦点. 谷歌I/O 014开发人员大会上宣布全新的设计语言"Material Design",适用于旗下全部平台,包含 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是漂亮和大胆的,由于干净的排版和布局简单且easy理解.内容才是焦点. " Material De

【Android】开源项目UI控件分类汇总之Dialog

接前文ProgressBar:Android开发的宝库越来越多,我开发中有需要的组件,主要参考Trinea的大作Android开源项目分类汇总(包含了后面的绝大多数).CSDN上直接拿来用!最火的Android开源项目还有CSDN上的直接拿来用!十大Material Design开源项目,受益匪浅,但是,有的分类项目太多,不是每个项目都有预览,不容易找到什么是最想要的,而且有一些项目不容易顺利地导入,我把同类的Demo做到一个app里,供大家下载参考.本文介绍几种Dialog.Dialog相关的

Android Studio中关于UI控件的边框问题

1.首先在drawable目录中创建一个文件  例如shape.xml 2.可填写内容如下: 1 <!-- shape定义形状,shape="rectangle"表示形状为长方形 --> 2 <shape 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:shape="rectangle" > 5 <!-- 设置框内填充颜色

ANDROID L——Material Design详解（UI控件）

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

Android Material Design系列之主题样式介绍说明

今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个项目时,系统自带了三个属性的颜色,现在就重点介绍这三个颜色属性的意义和作用.讲明白这个,留着以后讲别的用. 最常用的三个颜色属性 colorPrimary colorPrimaryDark colorAccent 这三个分别代表什么意思呢? colorPrimaryDark 是状态栏底色 colorPrimary 如果你不手动自己去修改t

Android进阶——Material Design新控件之初识TabLayout（一）

引言 Google I/O 2015 推出的 Android Design Support Library令人非常激动.Material Design的推出确实振奋了不少 Android开发者以及用户的心.以前Google给我的感觉就像是他并没太在乎他们的UI(或者审美不同,Gmail不忍吐槽),但是当Material Design伴随Android5.0发布之后,一切好像就都变了个样,Google好像意识到了设计的重要性以及自己以往的种种不足,决定也要迎头赶上,不仅仅只是推出一套Materia