Material Design Support 学习笔记

Android自从5.0更新以来，发布了全新的设计理念Material Design（材料设计），github上也有了许多的关于Meterial Design的开源库。但是许许多多的开源库一个一个收集比较麻烦，谷歌官方推出了Material Design Support Library。其中共有八项

• Color Palette(调色板)
• Toolbar(标题栏)
• AppBarLayout
• CollapsingToolbarLayout
• CoordinatorLayout
• DrawerLayout、NavigationView
• Floating Action Button (FAB)
• Snackbar
• TabLayout
• TextInputLayout

1.Color Palette

关于Color Palette，我们可以定义状态栏，导航栏等的颜色，通过values/style.xml可以定义

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimary</item>        <item name="colorAccent">@color/colorAccent</item> </style>

colorPrimary是标题栏，colorPrimaryDark是状态栏，colorAccent是背景颜色，具体可以参考下图
这里可以具体的设置各种颜色

2.ToolBar

toolbar是被用来代替actionbar的，既然代替ActionBar，那就得先取消ActionBar
有两种方式
1在style.xml文件中定义属性

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

2 设置主题为android:theme="@style/Theme.Design.NoActionBar"

然后这是布局：

<android.support.v7.widget.Toolbar     android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="?android:attr/actionBarSize"     app:navigationIcon="?android:attr/homeAsUpIndicator"></android.support.v7.widget.Toolbar>

这里有几个属性 可以在XML中定义，也可以在代码中定义，首先在代码中定义一个：

Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        toolbar.setTitle("toolbar");        toolbar.setSubtitle("title");

ToolBar中还有一个属性是navigationIcon这个是标题栏最左边的图标
关于Material Design中，库里包含了很多可以直接使用的图标，在AS中打开design界面，右边有一个View All properties，找到navigationIcon然后就可以找到那些图标，不必费力气自己找图标了。

如果ToolBar仅仅是这样完全没创意，谷歌提供了更多的使用方式：

3.AppBarLayout

它与ToolBar是一起使用的。

AppBarLayout继承自LinearLayout，布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作.

简单的来说，就是在你滑动的时候决定里面的子View是否滚动，怎么决定呢，就是在子View中设置这行代码app:layout_scrollFlags=""，来决定是否滚动
具体的话是有五个值，分别通过值和图片来详细的看效果
1. scroll，设置这个值就代表子View可以滚动，效果如下
2. enterAlways，设置这个值代表当scrollView滚动的时候，先截获了滚动事件，子View直接滚动，然后scrollView才滚动。（同时设置srcoll和enterAlways）效果如下
这是布局代码：

app:layout_scrollFlags="scroll|enterAlways"

3

exitUntilCollapsed：值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。

我的理解是scrollView向上滑动的时候，ScrollView暂时不滑动，而是让标题栏滑动，直到滑动到标题栏最小高度的时候ScrollView才开始，这里将ToolBar的高度设置为300，以下为效果图

以下为布局代码：

<android.support.design.widget.AppBarLayout        android:id="@+id/barlaout"        android:layout_width="match_parent"        android:layout_height="wrap_content">    <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="200dp"             app:layout_scrollFlags="scroll|exitUntilCollapsed|"         android:minHeight="?android:attr/actionBarSize"        </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout>

4

enterAlwaysCollapsed：是enterAlways的附加选项，一般跟enterAlways一起使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束。

布局代码为：

app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed"

4.NestedScrollView

前面一直讲到scrollView和ToolBar如何如何，但是具体该怎么做呢？这时候要用到CoordinateLayout布局，将他们作为CoordinateLayout的子View，然后为NestedScrollView指定behavior即可。关于这个behavior谷歌已经帮我们写好了，就是这个类@string/appbar_scrolling_view_behavior
代码布局为：

<android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <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">       <!--将你的内容放在这里-->    </android.support.v4.widget.NestedScrollView>

这样的话如果设置一个listView的话就可以直接实现效果
app:layout_behavior="@string/appbar_scrolling_view_behavior",它就是指定Behavior的

5.CollapsingToolbarLayout

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

其中有这些属性：

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

(2)内容纱布（Content scrim）：根据滚动的位置是否到达一个阀值，来决定是否对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片.意思就是当View滑动到一个高度的时候是否设置一个图片或者颜色来覆盖掉View，简单的来说就是当滑动到只剩标题栏的时候，是否隐去原有的View而将标题栏设置一个颜色或者图片
XML文件中有这么属性来设置contentScrim

(3)状态栏纱布（Status bar scrim)：根据滚动位置是否到达一个阀值决定是否对状态栏“盖上纱布”，你可以通过setStatusBarScrim(Drawable)来设置纱布图片，
XML文件中的属性为：statusBarScrim 属性值为颜色或者图片

(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"            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/material_img"                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"        android:paddingTop="50dp"        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>

效果

在这里还有一点可以设置

 app:contentScrim="@android:color/transparent" app:statusBarScrim="@android:color/transparent"

并且在java代码中设置
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)将状态栏设置为透明

ViewPager中的Fragment如果想要滑动，最外层必须是NestedScrollView