Material Design系列风格控件之(一)----AppBarLayout实现上滑隐藏ToolBar

一、简介

Material Design是Google推出的一个全新的设计语言，它的特点就是拟物扁平化。谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和"其他平台"提供更一致、更广泛的"外观和感觉"。

Material Design包含了很多内容，大致分为四部分：

1.主题和布局
2.视图和阴影
3.UI控件
4.动画

UI控件中常用的大概有这么14种:

1、AppBarLayout----是一个垂直的LinearLayout,实现了Material Design中app bar的scrolling gestures特性。

2、ToolBar----工具条。

3、DrawerLayout----抽屉菜单。

4、NavigationView----NavigationView就是左边抽屉拉出来后的布局。

5、RecyclerView----RecyclerView 是 ListView 的升级版本，更加先进和灵活。

6、CardView----这控件其实就是一个卡片。

7、AutoScrollViewPager----是一个Android ViewPager类库,实现页面间的自动滚动和循环轮播,也可以在ViewPager嵌套ViewPager。

8、CoordinatorLayout----只要使用CoordinatorLayout作为基本布局,将自动产生向上移动的动画。

9、CollapsingToolbarLayout----提供一个可以折叠的Toolbar。

10、TabLayout----TabLayout是MaterialDesign之后推出的自定义控件，可以用来完成tab切换 横向滑动 下标显示当前页等等以前很复杂实现的功能。

11、TextInputLayout----是一个用于在EditText上显示floating效果的辅助控件,其效果与扔物线的MaterialEditText效果相似。

12、FloatingActionButton----简称FAB,是浮动操作按钮，一般作为进阶操作的开关，在用户界面中通常是一个漂浮的小圆圈，它有自身独特的动态效果，比如变形、弹出、位移等等，代表着在当前页面上用户的特定的操作。

13、Snackbar----提供了一个介于Toast和AlertDialog之间轻量级控件,它可以很方便的提供消息的提示和动作反馈。

14、NestedScrollView----在MD中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他们两个都可以用来跟ToolBar交互，实现上拉下滑中ToolBar的变化。在NestedScrollView的名字中其实就可以看出他的作用了，Nested是嵌套的意思，而ToolBar基本需要嵌套使用。

如何在Android使用Material Design库?

只要之配置文件中加入Material Design依赖进行了。

二、AppBarLayout 

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作，它的布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。

AppBarLayout的子View应该声明想要具有的“滚动行为”，这可以通过layout_scrollFlags属性或是setScrollFlags()方法来指定。

AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作，为了让AppBarLayout能够知道何时滚动其子View，我们还应该在CoordinatorLayout布局中提供一个可滚动View，我们称之为scrolling view。scrolling view和AppBarLayout之间的关联，通过将scrolling view的Behavior设为AppBarLayout.ScrollingViewBehavior来建立。

请注意：上面提到的某个可滚动View，可以理解为某个ScrollView。怎么理解上面的话呢？就是说，当某个ScrollView发生滚动时，你可以定制你的“顶部栏”应该执行哪些动作（如跟着一起滚动、保持不动等等）。那某个可移动的View到底是哪个可移动的View呢？这是由你自己指定的！如何指定，我们后面说。

AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用,所以我们先来看下Toolbar。

(1)、Toolbar

Toolbar是android L引入的一个新控件，可以理解为action bar的替换品：提供了action bar类似的功能，但是更灵活。不像actionbar那么固定，Toolbar更像是一般的View元素，可以被放置在view树体系的任意位置，可以应用动画，可以跟着scrollView滚动，可以与布局中的其他view交互。当然，你还可以用Toolbar替换掉actionbar，只需调用 Activity.setActionBar()。

所以我们在使用Toolbar之前要把ActionBar给隐藏掉。

隐藏ActionBar的方法有很多，可以通过代码的方式隐藏，也可以通过配置文件的方式，我们主要是通过配置文件的方式来隐藏。在我们的styles.xml文件中的AppTheme标签中加入如下两行：

<item name="windowActionBar">false</item><item name="windowNoTitle">true</item>

然后修改布局文件:

<android.support.v7.widget.Toolbar        xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:app="http://schemas.android.com/apk/res-auto"        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="70dp"        android:minHeight="?attr/actionBarSize"        android:background="?attr/colorPrimary"        app:layout_collapseMode="pin"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        android:fitsSystemWindows="true"        ></android.support.v7.widget.Toolbar>

最后将Toobar作为“ActionBar”来用

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        toolbar.setTitle("这里是Title");        toolbar.setSubtitle("这里是子标题");        toolbar.setLogo(R.mipmap.ic_launcher);        setSupportActionBar(toolbar);

效果如下:

示例:http://download.csdn.net/detail/u011781521/9826953

(2)、AppBarLayout


功能：让子View（AppBar）可以选择他们自己的滚动行为。


注意：需要依赖CoordinatorLayout作为父容器，同时也要求一个具有可以独立滚动的兄弟节点（或兄弟节点的子view可以滚动）才能发挥其功能。

2.1将AppBarLayout与ScrollView关联起来

前面说过只有当"ScrollView"滚动时才起效果,那么如何将AppBarLayout与ScrollView关联起来呢?

这个时候我们就可以用NestedScrollView这个来解决这个问题,然后上面还说到AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作,所以我们把NestedScrollView作为CoordinatorLayout的子类。

修改布局文件如下:

<?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.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?android:attr/actionBarSize"            android:background="?attr/colorPrimary"            app:layout_scrollFlags="scroll" />    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="@string/my_txt"            android:textSize="20sp" />    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

运行结果如下:

往上一划,toolbar就隐藏了。示例:http://download.csdn.net/detail/u011781521/9826965

三、CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。

主要功能大概有:

(1) 折叠Title（Collapsing title）：当布局内容全部显示出来时，title是最大的，但是随着View逐步移出屏幕顶部，title变得越来越小。你可以通过调用setTitle函数来设置title。

(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.

(3)状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，但是只能在LOLLIPOP设备上面有作用。

(4)视差滚动子View(Parallax scrolling children):子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动。（PS:其实就是让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点）。将布局参数app:layout_collapseMode设为parallax

(5)将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。

大概页面布局如下:

<?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.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:expandedTitleMarginEnd="64dp"            app:expandedTitleMarginStart="48dp"            android:id="@+id/ctb"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/main.backdrop"                android:layout_width="wrap_content"                android:layout_height="300dp"                android:scaleType="centerCrop"                android:src="@drawable/fk_as"                app:layout_collapseMode="parallax" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?android:attr/actionBarSize"                app:layout_collapseMode="pin" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="@string/my_txt"            android:textSize="20sp" />    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

运行效果如下:

示例:http://download.csdn.net/detail/u011781521/9828929