Material Design on Android

1.   Pre.

UI设计一直是我们码农比较头疼的事情，自己想做app，但是又设计不出好的UI，做不出好看的控件。2014年谷歌推出了一套新的UI框架：Material Design（翻译为原质化设计），这是一套很新颖的设计框架，它的设计目标为：

n  具有实体感

n  鲜明、形象、深思熟虑

n  有意义的动画效果

Google希望创造一种独一无二的底层系统，在这个系统的基础之上，构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则，同时支持触摸、语音、鼠标、键盘等输入方式。

Google还打算把MaterialDesign做成行业UI设计标准。但是在我们无线端，想要自己按照他的那套标准做出那种效果，非常难，因为牵涉到很多动画、美术、显示的效果，非专业人员很难到达。不过，幸运的是在今年前不久的Google I/O大会上，谷歌推出了Android Design Support Library框架，提供了一些的MaterialDesign UI控件，这对我们来说简直就是福音啊啊啊啊。虽然组件不多，但是都是比较实用的，相信Google之后会继续扩充这个Library。下面我们来一一介绍这些MaterialDesign的组件。

 

PS：完成以下操作之前，需要依赖一个库：

com.android.support:design:22.2.0

 

2.   FAB (FloatingActionButton)

这是一种带阴影的圆形悬浮按钮，具有很好的阴影效果和点击质感，可以很方便的调整它的阴影大小。

 

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:src="@drawable/ic_plus"
    app:fabSize="normal"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"

app:backgroundTint="@color/nav_item_icon_tint_color"    />

fabSize :调整按钮的大小的提供了 mini和normal两种值。

elevation:没有触碰按钮时阴影的大小，默认值（推荐值）是6dp。

pressedTranslationZ:按下按钮时阴影的大小，默认值（推荐值）是12dp。

backgroundTint:圆形按钮的颜色可以很方便的调整。

3.   Snackbar

这是一种类似Toast的用于展示短消息的黑色小条，它位于屏幕的底部，和Toast不同的是，第一，它是在屏幕中显示的，而不是像Toast一样浮于屏幕之上，换句话说他是的屏幕的一部分；第二，他可以向右滑动移除信息。第三他可以点击触发事件，这点与Notification有点像。

Snackbar.make(drawerLayout,"Hello. I am Snackbar!",Snackbar.LENGTH_LONG).        setAction("do", new View.OnClickListener() {            @Override            public void onClick(View v) {            }        }).show();

它的用法很简单，和Toast很相似，make（someview view, String string, time t）用于创造一个Snackbar，view是你想显示在的那个界面，string是要显示的信息，t是要显示的时间，和Toast一样只支持长、短两种显示时间。

setAction(String string, OnClickListener())方法是一个可选项，如果调用了，则在Snackbar的又边创建一个Text=string，该Text可以点击，点击后Snackbar马上下滑消失。同时可以在onClick()里执行其他操作，跳转或者进行其他事件。

有一个问题是这样显示的Snackbar显示的时候会覆盖FAB，如果想让他们不覆盖的相互显示，需用到下一个控件CoordinatorLayout。

4.   CoordinatorLayout

如其名字，是为了让在它里面的某些特定的子控件协调的工作的，这些特定的控件包括Snackbar和FAB和其他一些AppBarLayout。将Snackbar和FAB一同放在CoordinatorLayout之后，它们两的显示就不会重叠了，而会和谐的出现在一个屏幕里。值得注意的是，所有在CoordinatorLayout内部的控件，都必须是Coordinator的，如果不满足这个条件，那么其显示将会出问题。如果需要在CoordinatorLayout放置android原有的控件如Button或者Textview等，那么可以在他们外面套上AppBarLayout。如果有布局，则在相应的布局上加上属性：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

 

所有的Coordinator控件包括： FAB、Snackbar、AppBarLayout、NestedScrollView、RecyclerView、CardView、Navigation Drawer、TextInputLayout等。

5.   Toolbar

Toolbar其实不属于Android DesignSupport Library，但是能够很好的与其他Material design的控件结合起来，使效果更为美观。相比Actionbar Toolbar最明显的一点就是变得很自由，可随处放置，因为它是作为一个ViewGroup来定义使用的，

首先需要在style里隐藏ActionBar。

<style name="AppTheme.WithoutActionBar">    <item name="windowActionBar">false</item>    <item name="windowNoTitle">true</item></style>

然后在布局文件里面，CoordinatorLayout里加入Toolbar.

<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="?attr/actionBarSize"        android:background="?attr/colorPrimary"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /></android.support.design.widget.AppBarLayout>

由于Toolbar不是Coordinator的控件，所以需要在他外面套一层Coordinator的控件，例如AppBarLayout。

然后在java里

toolbar =(Toolbar)findViewById(R.id.toolbar);setSupportActionBar(toolbar);

setSupportActionBar()一下，就可以了。

 

 

6.   TabLayout

Tab 是在 Android 应用程序中用户体验最佳实践的一部分。在以前，如果我们想要使用新的材料设计风格的 Tab，我们需要自己去为项目中下载 SlidingTabLayout 和 SlidingTabStrip 的源码。现在，我们只需要使用这个库提供的 TabLayout，它也有很多可以调整的选项。

它应该在阴影部分的上面。所以，我们将其放在AppBarLayout 里面，沿着Toolbar。这是可以做到的，因为AppBarLayout是继承自一个垂直的LinearLayout。

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="center"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    />

app:theme这个参数可以改变tab的颜色。

 

app:tabMode 如果你想在屏幕上显示出每个单独的 tab，就设置 tab 为 fixed 的。它适合只有少数 tab 的时候，但是如果有很多的 tab 的时候这是一个完全错误的选择。在这种情况下你是不确定所有的 tab 是否能很好的在同一时间显示出来的。所以，你可以设置这个属性为 scrollable 让用户去滚动tab，就像Google Play Store那样。

app:tabGravity -如果你想要分配所有的可用空间给每个tab，就设置这个属性为 fill。如果你想要所有的 tab 在屏幕的中间，就设置这个属性为 center。如果 tabMode是设置成scrollable的，则这个属性将会被忽略。

 

接着还要在java代码中添加一些代码

 

tabLayout= (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

 

tablayout就完成了，一般tablayout还需要与viewpager联用。

 

viewPager=(ViewPager)findViewById(R.id.vPager);
PagerAdapteradapter = newPagerAdapter(getSupportFragmentManager(),tabLayout.getTabCount());
viewPager.addOnPageChangeListener(newTabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener()
{
    @Override
    public void onTabSelected(TabLayout.Tab tab)
    {
        viewPager.setCurrentItem(tab.getPosition());
    }

     ……
});
viewPager.setAdapter(adapter);

 

在这里有一些额外的用法：

如果在toolbar下的页面是一个可以向下拉动的页面，如类似ListView或者ScrollView（为什么说类似，因为这里ListView和ScrollView都不是Coordinate的，直接用不会有效果，所以ListView要用RecyclerView代替，ScrollView要用NestedScrollView代替），那么在Toolbar或者Tablayout中加入app:layout_scrollFlags属性，可以选择它是否随着向下拉动或者向上拉动的被移除，或者停在某个位置。

app:layout_scrollFlags有四个属性，分别是以下：

 

Scroll：要设置这个view随着内容滚动，就必须加上这个属性。

enterAlways：这个标志确保了任何向下滚动的操作都会让这个view变得可见，达到“快速返回”的效果。

enterAlwaysCollapsed ：这个标志定义了 View 是如何回到屏幕的。当你的 view 已经声明了一个最小高度(minHeight) 并且你使用了这个标志，你的 View 只有在回到这个最小的高度的时候才会展开。

exitUntilCollapsed：View 将关闭滚动直到它被折叠起来(minHeight) 并且一直保持这样。

7.   CollapsingToolbarLayout

现在Toolbar可以展开和折叠，但是你会看到它还不是很完美。Toolbar 仍然离开了屏幕，最好的体验是让这些 icon留在屏幕内。

Design SupportLibrary 已经为这个准备好了。用 CollapsingToolbarLayout 你可以像魔术一样让 Toolbar 折叠起来，就像其他组件一样，它是非常容易使用的，具体操作步骤如下：

n  用 CollapsingToolbarLayout 包裹 Toolbar，但仍然在 AppBarLayout 中

n  从 Toolbar 中删除 layout_scrollFlags

n  为 CollapsingToolbarLayout声明 layout_scrollFlags，并且将 layout_scrollFlags 设置成 scroll|exitUntilCollapsed

n  改变 AppBarLayout 扩张状态时的布局高度大小。在这个例子中，我用256dp。

n  在toolbar中设置属性layout_collapseMode="pin"以锁定tool icons。

 

 

这样设置之后，Toolbar的标题会消失，这时候我们必须通过在Java代码中手动设置 setTitle(String) 来实现。

collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);collapsingToolbarLayout.setTitle("Design Library");

由于CollapsingToolbarLayout的特点，应用的标题文字在收缩和展开状态是会自动过渡的。如果你想要在展开状态改变标题文字的位置，你可以这样做：

 

通过设置组件的 margin 的4个属性： 

app:expandedTitleMargin、

app:expandedTitleMarginBottom、

app:expandedTitleMarginEnd、

app:expandedTitleMarginStart。

 

如果你想要在折叠和展开状态时改变文本的显示。可以设置

app:collapsedTitleTextAppearance 和 

app:expandedTitleTextAppearance 来设置。

 

在某些情况下，我们想要用一张美丽的图片作为App Bar的背景，而不只是像现在这样的一个普通的颜色。幸运的是CollapsingToolbarLayout是继承自 FrameLayout所以我们可以轻松的添加一个ImageView作为 Toolbar的背景图层，就像这样：

<ImageView    android:layout_width="match_parent"    android:layout_height="match_parent"    android:scaleType="centerCrop"    android:src="@drawable/header"    app:layout_collapseMode="parallax" />    /><android.support.v7.widget.Toolbar

 

移除了Toolbar里面的属性：android:background="?attr/colorPrimary"，

可以让Toolbar的颜色变成图片的颜色。

我们可以使用视差模式让它变得更优雅一些，像下面这样在ImageView里加上一个属性：app:layout_collapseMode="parallax"

你也可以设置视差的系数，介于 0.0-1.0之间。

app:layout_collapseParallaxMultiplier="0.7"

 

最后你可能会注意到App Bar 的背景总显示一张图片。你可以让它在收缩的时候自动的变化到普通的颜色，通过声明属性像下面这样来实现：

app:contentScrim="?attr/colorPrimary"

 

8.   NavigationView

现在从左侧拉出Drawer Menu 仍然只是一个空白的面板。在以前，实现这个菜单是非常麻烦的，因为我们不得不手动的用 LinearLayout 或者 ListView 去实现。

在 Android DesignSupport Library 中提供了 NavigationView，实现它变得更容易了。

首先，为 Drawer Menu 创建一个标题布局文件和一个菜单资源文件再使用NavigationView 与两个资源文件绑定起来。

<android.support.design.widget.NavigationView    android:id="@+id/navigation"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:layout_gravity="start"    app:headerLayout="@layout/nav_header"    app:itemIconTint="#333"    app:itemTextColor="#333"    app:menu="@menu/navigation_drawer_items" />

NavigationView 就是为了 Drawer Menu 而特别设计的。所以，所有的东西都会被创建并且自动测量包括菜单的宽度等，我们自己定义案例来配置以前的设计。

为了处理这些菜单项的点击事件，你可以声明

 setNavigationItemSelectedListener 来监听，就像下面这样：

navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {    @Override    public boolean onNavigationItemSelected(MenuItem menuItem) {        int id = menuItem.getItemId();        switch (id) {            case R.id.navItem1:                break;            case R.id.navItem2:                break;            case R.id.navItem3:                break;        }        return false;    }});

 

9.   TextInputLayout

你可以改变一个旧的 EditText 的风格，让它变得更时髦，即：总是会显示一个提示或者一个错误信息。

要做到这一点，只需要简单的用TextInputLayout 包裹住一个 EditText ，就这么简单！

<android.support.design.widget.TextInputLayout    android:layout_width="match_parent"    android:layout_height="wrap_content">    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Password" /></android.support.design.widget.TextInputLayout>

 

 

 

 

 

以上是Android Design Support Library 22.0支持的MaterialDesign组件，其实还有一些Material Desgin的组件在android5.0中，以下三个控件：CardView、RecyclerView和Paletter有单独的引用库，可以直接去引用。

10.        CardView

CardView 是一个新的View，继承自FrameLayout，以卡片式显示一致的外观，它可以有阴影和圆角。使用它需要依赖：'com.android.support:cardview-v7:22.2.0'。

 

<android.support.v7.widget.CardView    xmlns:card_view="http://schemas.android.com/apk/res-auto"    android:id="@+id/card_view"    android:layout_gravity="center"    android:layout_width="match_parent"    android:layout_marginLeft="5dp"    android:layout_marginRight="5dp"    android:layout_height="70dp"    card_view:cardCornerRadius="4dp">    <TextView        android:id="@+id/info_text"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center"        android:text="haha"/></android.support.v7.widget.CardView>

如上面所示，CardView使用起来特别方便，你可以把他当做一个ListView的item来显示。

 

11.        RecyclerView

RecyclerView是ListView的升级版，它提供了更好的性能和灵活性而且更容易使用。RecyclerView这个控件是一个可以装载大量的视图集合，并且可以非常效率的进行回收和滚动。当你list中的元素经常动态改变时可以使用RecyclerView控件。

RecyclerView非常容易使用，它提供了如下两个功能：

为每个条目位置提供了layout管理器（RecyclerView.setLayoutManager）为每个条目设置了操作动画（RecyclerView.setItemAnimator）。

RecyclerView.Adapter为默认自带和基于ViewHolder的新的适配器，只不过回调方法稍有不同，但本质都是一样的。

RecyclerView可以很方便的实现：GridView、横向ListView、横向ScrollView的功能。它可以通过setLayoutManager()来调用对应的Layout属性，来改变RecyclerView。

 

而RecyclerView的强大在于：

n  实现瀑布流效果

n  方便的增加和移除item动画

实现瀑布流只需要设置layoutManager为StaggeredGridLayoutManager，然后把每个item设置为随机高度即可出现瀑布流。

 

添加动画：mRecyclerView.setItemAnimator(new DefaultItemAnimator());

这里有一点与ListView不一样的是，这里如果想使用动画不是用notifyDataSetChanged()，而是用notifyItemInserted()与notifyItemRemoved() 来替代。

public voidaddData(intposition)
{
    mDatas.add(position,"Insert One");
    mHeights.add( (int) (100+ Math.random() * 300));
    notifyItemInserted(position);
}

public void removeData(intposition)
{
    mDatas.remove(position);
    notifyItemRemoved(position);
}

 

使用RecyclerView需要需要添加库：com.android.support:recyclerview-v7:22.2.0

 

12.        Palette

我觉得Palette是MaterialDesign里面让我很surprise的设计，它能让你从图像中提取突出的颜色，来决定标题的颜色和标题栏的背景色，这样视觉上更具有冲击力和新鲜感。

你可以直接传递一个位图对象给Palette.generate()静态方法。或者，如果你需要在网络上加载图片，则调用Palette.generateAsync()方法，异步监听图像，并且提供一个监听器去替代。一旦图像加载好了则会获取对应的颜色。

 

Palette.generateAsync(bitmap,
        new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch vibrant =
                       palette.getVibrantSwatch();
                if (vibrant != null) {
                    holder.relativeLayout.setBackgroundColor(
                           vibrant.getRgb());
                    holder.photoAuthor.setTextColor(
                           vibrant.getTitleTextColor());
                }
            }
        });

 

Pattle能提取的颜色有以下几种：

Vibrant(充满活力的)

Vibrant dark(充满活力的黑)

Vibrant light(充满活力的亮)

Muted(柔和的)

Muted dark(柔和的黑)

Muted lighr(柔和的亮)

 

使用相应的色彩能够使你的app提高一个层次。

compile'com.android.support:palette-v7:22.2.0'

13.        Sum

Android 5.0lollipop上其实还提供了一系列的Material Design。包括了：

n  Material主题和布局

n  View视图和阴影

n  Animation动画

其中我觉得动画是扩充最大的地方，使android5.0完全变成了另一种体验。

由于时间关系上面的几个东西还来不及研究，后面有时间会研究完。

Material Design提供了一个新的设计设计框架，这种设计框架必将成为行业标准。

……………………………………………………………………………………………………………………………………………………………………

去年实习的时候写的文章，现在发出来