Android之带你认识并使用Material Design

作者: Shawpoo的 | 来源:发表于2017-06-11 21:34 被阅读201次

2017Google Study Jams China：Google Study Jams活动官网

转载请注明出处：http://www.jianshu.com/p/f496ee6b3214
本文出自Shawpoo的简书
我的博客：CSDN博客

前言

习惯性的在文章开始先来一段介(fei)绍(hua)。Material Design是在Google I/O 2014提出的一套全新的设计语言规范。其目的是专为设计适用于多个平台和设备的视觉、运动与互动效果而制定的综合指南。 Android 现在已支持 Material Design 应用。如果要在Android 应用中使用 Material Design，请遵循Material Design 规范内定义的指导方针，并使用Android 5.0(API级别21)及以上版本所提供的新组件和功能。

另外对于这次Study Jams举报的第二届Android开发者活动，我已经完成了结业APP—简云Note。一款很简单很水的APP，主要目的是为了应用Material Desian的组件和配色。欢迎各位小伙伴体验、点评：

Google Play下载
 应用宝下载

所以本文主要以简云Note为例来讲述Material Design的使用。

简云Note

一、Color—颜色的选择

1、灵感来源

颜色Material Design的色彩从当代建筑、路标、人行横道以及运动场馆中获取灵感，由此引发出大胆的颜色表达激活了色彩，与单调乏味的周边环境形成鲜明的对比。强调大胆的阴影和高光。引出意想不到且充满活力的颜色。

2、建议颜色

首先我们要选择APP的色彩、主题色等，这里推荐一个调色板网站，通过下图可以看到在这些基础的颜色真的很大胆鲜艳。其次点击某一项颜色的时候，会列举出以当前基础色为准的其他对比色，在左上角都标出了一个饱和度。官方建议我们以饱和度500的颜色作为APP的主色(colorPrimary)，通过颜色的对比又发现饱和度700更适合作为状态栏的颜色，即比主色更暗一点的颜色(colorPrimaryDark)，我还通过网上的一个教程说建议使用饱和度A200的颜色作为强调色(colorAccent)。有了这些建议我们可以更方便，快速的选择所要搭配的颜色。当然这只是一个建议，我个人觉得只要能将调色板上的这些颜色很好的搭配起来即可。

调色板

3、如何应用

在Android Studio新建项目之后，我们会发现项目中res/values/colors.xml中有三个默认的颜色，所以我们可以直接引用：

<resources>
    <color name="colorPrimary">#03a9f4</color>   // 主色，建议饱和度500
    <color name="colorPrimaryDark">#0288d1</color> // 暗色，建议饱和度700
    <color name="colorAccent">#FF4081</color> // 强调色，建议饱和度A200
</resources>

下图为简云Note首页运行图，可以看到除了主色、暗色和强调色之外，在左侧每一个字的背景又选择了其他饱和度为500的颜色，字体的颜色采用了黑色和灰色：

二、Icon—图标的设计

定义：系统图标的设计要简洁友好，有潮流感，有时候也可以设计的古怪幽默一点。要把很多含义精简到一个很简化的图标上表达出来，当然要保证在这么小的尺寸下，图标的意义仍然是清晰易懂。
设计原则：展示一些黑体的几何形状。一个简洁的黑体图形在采用对称一致的设计时，一样能够拥有独一无二的品质。
网格、比例和大小：图标网格是所有图标的基准网格并且具有特定的组成和比例。图标由一些对齐图标网格的平面几何形状组成。基本的平面几何形状有四种，具有特定尺寸以保证所有图标有一致的视觉感和比例。
两种形状相同尺寸不同的图标集供您在应用程序中使用：状态栏、上下文图标集和操作栏、桌面图标集。

了解了图标的这些规则之后，好像还是没有什么卵用，我还是不知道该怎么用，当然这些只是了解一下就可以了，我们又不是美工，不会做图。我们可以使用现有的资源来帮助我们独立完成开发所需要的icon：

1、使用Android Studio创建icon(矢量图片)：

在 Android 5.0（API 级别 21）及更高版本中，可自己定义矢量图片，而且图片可在不损失清晰度的情况下缩放。只需一个资产文件即可创建一个矢量图像，而位图图像则需要为每个屏幕密度提供一个资产文件。如果要创建一个矢量图像，请您在 <vector> XML 元素中定义形状的详情。

在res/drawable右击选择 New->Vector Asset：

创建icon

可以看到Android Studio为我们提供了Material icon，而且可以选择大小，颜色的填充饱和度，以及各种icon供我们选择：

选择icon.png

创建之后会在drawable下生成一个xxx.xml的文件，我们可以在通过@drawable/xxx直接引用。文件内容如下，通过这种方式创建图标的话，优点在于节省资源，而且可以通过控制代码来直接更换颜色。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"  //可以更换填充的颜色
        android:pathData="M11.99,2C6.47,2 2,6.47 2,12s4.47,10 9.99,10S22,17.53 22,12 17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zM16.18,7.76l-1.06,1.06 -1.06,-1.06L13,8.82l1.06,1.06L13,10.94 14.06,12l1.06,-1.06L16.18,12l1.06,-1.06 -1.06,-1.06 1.06,-1.06zM7.82,12l1.06,-1.06L9.94,12 11,10.94 9.94,9.88 11,8.82 9.94,7.76 8.88,8.82 7.82,7.76 6.76,8.82l1.06,1.06 -1.06,1.06zM12,14c-2.33,0 -4.31,1.46 -5.11,3.5h10.22c-0.8,-2.04 -2.78,-3.5 -5.11,-3.5z"/>
</vector>

2、推荐几个下载Icon的网站(支持png、svg)：

三、Components—组件的实践

1、Toolbar

a、在app的build.gradle中添加所需依赖包(新建项目默认有)：


dependencies {
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support:design:25.3.1'
}

b、确保每个使用Toolbar的Activity继承AppCompatActivity(默认)：

public class MyActivity extends AppCompatActivity {
  // ...
}

c、使用NoActionBar主题，去除默认的ActionBar：

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

<!--manifest.xml中配置-->
<application
        android:name=".app.NoteApp"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">  //引用主题
   // ...
</application>

d、在Activity的布局中添加Toolbar：

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp" // 仰角
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

注：Material Design 规范建议标题栏具有4dp的仰角。

e、将Toolbar设置为Activity的标题栏：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(myToolbar);
    getSupportActionBar().setTitle("这是一个标题"); //设置标题
}

Toolbar

f、为Toolbar添加Action Button(菜单操作按钮)：

在res/menu下创建xxx.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_done"
        android:orderInCategory="100"
        android:title="@string/menu_note_done"
        android:icon="@mipmap/ic_action_done"
        app:showAsAction="always" /> 
</menu>

ps： app:showAsAction的属性值：
always： 无论是否溢出，总是显示；ifRoom： 根据屏幕的宽度来定是否显示；never：总是显示在溢出菜单中。

在Activity中重写onCreateOptionsMenu()关联菜单：


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.meun_add_or_edit, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_done) {
           //点击菜单选项进行的操作
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

Action Button

拓展：APP中经常会实现沉浸式(透明式)状态栏，请参考我的另一篇文章：

Android4.4+教你轻松打造沉浸式/透明式状态栏

2、SwipeRefreshLayout + RecyclerView + CardView

下拉刷新：SwipeRefreshLayout为v4包下的一个组件，其动画也符合Material Design设计，通过给RecyclerView的addOnScrollListener()设置滑动监听来实现上拉加载更多。每一个item是一个CardView，可以设置阴影，按下的动画等等。

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical">

        </android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.SwipeRefreshLayout>

每一条item的CardView：

在app的build.gradle中添加所需依赖包：

dependencies {
   compile 'com.android.support:cardview-v7:25.3.1'
}

<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

3、TextInputLayout

TextInputLayout的使用只需要在EditText外层嵌套一个布局即可，可以友好的提示用户输入框所填写的内容的要求：

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:hintTextAppearance="@style/MyHintText">

            <EditText
                android:id="@+id/ed_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="top|left"
                android:hint="@string/input_title_hint"
                android:maxLines="1"
                android:theme="@style/MyEditText" />
</android.support.design.widget.TextInputLayout>

TextInputLayout的使用

4、SncakBar 和 FloatingActionButton

SncakBar是Toast的替代品，在页面底部弹出：

Snackbar.make(view, "这massage",Snackbar.LENGTH_LONG).show();

FloatingActionButton浮动按钮：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:tag="@color/colorAccent"
        app:rippleColor="@color/click_bg"
        app:layout_anchor="@id/content"
        app:layout_anchorGravity="bottom|right"
        app:srcCompat="@mipmap/ic_action_add"/>

SncakBar 和 FloatingActionButton

5、DrawerLayout + NavigationView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_main"  //设置头布局
        app:menu="@menu/activity_main_drawer" /> //设置菜单项

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

侧滑菜单

6、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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/note_detail_bg"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                style="@style/SimpleToolbarStyle"
                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">
           //...                 
            </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_detail_favorite"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        android:src="@mipmap/ic_action_favorite_border"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end" />

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

CoordinatorLayout的应用

7、过渡动画

采用第三方库，添加相关依赖：

compile 'com.github.XunMengWinter:CircularAnim:0.3.4'

代码中应用：

CircularAnim.fullActivity(MainActivity.this, view)
                .colorOrImageRes(R.color.colorPrimary)
                .duration(300)
                .go(new CircularAnim.OnAnimationEndListener() {
                    @Override
                    public void onAnimationEnd() {
                        //具体操作
                    }
                });

8、高度(Z轴)、阴影和触摸反馈

Toolbar：设置android:elevation="4dp"来设置仰角高度，且点击Aciton Buttn时Toolbar自带触摸按下效果。
CardView设置android:clickable="true"和android:foreground="?android:attr/selectableItemBackground"可以出现一个触摸反馈，其次还可以增加Z轴的考虑，当我们点击CardView的时候，给一个抬起的操作，通过 android:stateListAnimator="@animator/selector_cardview"进行引用：

在res下新建animator文件夹，然后新建xxx.xml：

<!-- res/animtor/xxx.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item   android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="6dp"
            android:valueType="floatType"></objectAnimator>
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType"></objectAnimator>
    </item>

</selector>

CardView点击反馈

Button点击反馈，apiv21+显示水波纹操作，apiv21以下显示渐变，通过设置android:background=“@drawable/selector_button”来自动进行版本兼容：

res/drawable/selector_button.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/shape_btn_pressed" android:state_pressed="true"/>
    <item android:drawable="@color/disable_gray" android:state_enabled="false"/>
    <item android:drawable="@drawable/shape_btn_normal"/>
</selector>

res/drawable-v21/selector_button.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorPrimaryDark">//这里是扩散水波纹的色值
    <!--<item android:drawable="@drawable/shape_btn_normal"/>-->
    <item>
        <selector>
            <item
                android:drawable="@drawable/shape_btn_normal"
                android:state_pressed="false">
            </item>
            <item
                android:drawable="@color/disable_gray"
                android:state_enabled="false">
            </item>
        </selector>
    </item>
</ripple>

apiv21+按钮点击反馈

建议：如果想要更深入的学习Material Design，请参考Material Design的最佳实例APP—Google Play。

参考阅读

Material Design中文版
 Android开发者官网-Material Design
Material Design官网
 Material Design简介
 Material Design标准色(500)
Material Design配色
 Material Design图标(png、svg等)
Android4.4+教你轻松打造沉浸式/透明式状态栏