首页 > 资讯 > Android > 正文

Android之带你认识并使用Material Design

17-06-12 来源：[db:作者]

收藏我要投稿

Android之带你认识并使用Material Design。本文主要以简云Note为例来讲述Material Design的使用。

一、Color—颜色的选择

1、灵感来源

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

2、建议颜色

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

3、如何应用

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


    #03a9f4   // 主色，建议饱和度500
    #0288d1 // 暗色，建议饱和度700
    #FF4081 // 强调色，建议饱和度A200

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

二、Icon—图标的设计

定义：系统图标的设计要简洁友好，有潮流感，有时候也可以设计的古怪幽默一点。要把很多含义精简到一个很简化的图标上表达出来，当然要保证在这么小的尺寸下，图标的意义仍然是清晰易懂。

设计原则：展示一些黑体的几何形状。一个简洁的黑体图形在采用对称一致的设计时，一样能够拥有独一无二的品质。

网格、比例和大小：图标网格是所有图标的基准网格并且具有特定的组成和比例。图标由一些对齐图标网格的平面几何形状组成。基本的平面几何形状有四种，具有特定尺寸以保证所有图标有一致的视觉感和比例。
两种形状相同尺寸不同的图标集供您在应用程序中使用：状态栏、上下文图标集和操作栏、桌面图标集。

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

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

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

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

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

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

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

StudyJams图标生成器

阿里的Iconfont

官方网站，图标下载

三、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：




  //引用主题
   // ...

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

注：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("这是一个标题"); //设置标题
}

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

在res/menu下创建xxx.xml：

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);
    }

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

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

2、SwipeRefreshLayout + RecyclerView + CardView

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

每一条item的CardView：

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

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

3、TextInputLayout

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

4、SncakBar 和 FloatingActionButton

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

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

FloatingActionButton浮动按钮：

5、DrawerLayout + NavigationView




    

     //设置菜单项

6、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：

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

res/drawable/selector_button.xml：

res/drawable-v21/selector_button.xml：


//这里是扩散水波纹的色值

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

点击复制链接与好友分享!回本站首页