Material Design 实战

1.Toolbar

由于ActionBar被限定智能位于活动的顶部，从而不能实现一些MaterialDesign的效果，因此官方现在已经不再建议使用ActionBar。
Toolbar的强大之处在于，不仅继承了ActionBar的所有功能，而且可以配合其他空间来完成一些MaterialDesign的效果。

Toolbar的实现

1.1 指定一个不带ActionBar的主题
打开res/values/styles.xml文件
修改AppTheme 的 parent属性为Theme.AppCompat.NoActionBar(深色)或者 Theme.AppCompat.Light.NoActionBar(淡色)
修改Xml布局文件

<android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                />

在Activity添加代码

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

我们还可以在Toolbar上添加一些按钮来让Toolbar更丰富一些。

首先，在res文件夹下添加menu文件夹，新建一个Menu resource file文件。

<?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/backup"
        android:title="BackUp"
        app:showAsAction="always"
        android:icon="@mipmap/backup"
        />
    <item
        android:id="@+id/delete"
        android:title="Delete"
        app:showAsAction="ifRoom"
        android:icon="@mipmap/delete"
        />
    <item
        android:id="@+id/settings"
        android:title="Settings"
        android:icon="@mipmap/setting"
        app:showAsAction="never"/>
</menu>

接下来在Activity中重写onCreateOptionsMenu和onOptionsItemSelected方法，与普通的菜单项添加方法一样。

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.backup:
                Toast.makeText(this,"点击了备份",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"点击了删除",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"点击了设置",Toast.LENGTH_SHORT).show();
                break;
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);

        }
        return true;
    }

附：

添加xmlns:app="http://schemas.android.com/apk/res-auto"可以让item使用ap:前缀的语句。
app:showAsAction 的三个属性always代表按钮总是显示，ifRoom代表按钮如果有空间才显示，没空间则显示在菜单中，never代表只显示在菜单中。

效果图：

只需要关注Toolbar，其他下面详细说明

2.滑动菜单(抽屉)

所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是在主屏幕上，可以通过滑动的方式将菜单显示出来。
先介绍一下DrawerLayout的用法，在布局中允许放入两个直接的子控件。第一个控件是主屏幕中显示的内容，可以使用一个布局包裹其他子控件来作为DrawerLayout的第一个子控件。DrawerLayout的第二个子控件是滑动菜单中显示的内容。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout  //第一个子控件，主屏幕的内容
        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.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_scrollFlags="snap|scroll|enterAlways" />
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            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"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.v4.widget.SwipeRefreshLayout>


        <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="16dp"
            android:src="@drawable/done" />

    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView  //第二个子控件，菜单内容
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />


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

控件中的代码在后面会详细说明。

在Acitivity中添加代码

DrawerLayout drawerLayout = (DrawerLayout)findViewById(R.id.drawer);

ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true); //在toolbar添加HomeAsUp按钮，点击可以打开抽屉
        }

在onOptionsItemSelected方法中添加代码

case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);//打开抽屉

附：

HomeAsUp按钮的id默认为 android.R.id.home （不用声明）

3. NavigationView

NavigationView是严格按照MaterialDesign的要求来进行设计的一个控件，使用NavigationView使滑动菜单页面的实现变得非常简单。
NavigationView的设计分为menu设计和header设计。

首先添加依赖

compile 'com.android.support:design:25.3.1'
compile 'de.hdodenhof:circleimageview:2.1.0'

第一个是design support库，第二个是一个开源项目，可以实现图片圆形化。

然后设计menu，即活动菜单中的菜单项

<?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/backup"
        android:title="BackUp"
        app:showAsAction="always"
        android:icon="@mipmap/backup"
        />
    <item
        android:id="@+id/delete"
        android:title="Delete"
        app:showAsAction="ifRoom"
        android:icon="@mipmap/delete"
        />
    <item
        android:id="@+id/settings"
        android:title="Settings"
        android:icon="@mipmap/setting"
        app:showAsAction="never"/>
</menu>

编写的方法与上面的一样。

然后设计header
新建XML布局文件(nav_header.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/headicon"
        android:id="@+id/icon_image"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mail"
        android:text="uhsdiahdsi@qq.com"
        android:textColor="#ffffff"
        android:textSize="14sp"
        android:layout_alignParentBottom="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:layout_above="@id/mail"
        android:text="zjj"
        android:textSize="14sp"
        android:textColor="#ffffff"/>
</RelativeLayout>

布局的设计与普通的布局设计一样，只需把ImageView改为de.hdodenhof.circleimageview.CircleImageView，把图片裁剪为圆形。

修改布局文件，把滑动菜单的主控件改为NavigationView,代码在上面已经贴出。

  <android.support.design.widget.NavigationView  //第二个子控件，菜单内容
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start" //滑动菜单从哪个方向滑出，start为按系统语言的方向
        app:headerLayout="@layout/nav_header" //header的ID
        app:menu="@menu/nav_menu"//menu的ID 
/>

5.在Activity中添加代码

NavigationView navView = (NavigationView) findViewById(R.id.nav_view);

navView.setCheckedItem(R.id.nav_call); //设置默认选择项
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                drawerLayout.closeDrawers();
                return true;
            }
        }); // 选择的监听事件

效果图：

Drawer

4.悬浮按钮和可交互提示

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="16dp"
            android:src="@drawable/done" />

代码很好理解，就不罗嗦了。还可以使用app:elevation设置悬浮的高度，高度影响投影的深浅和大小。

然后再Acitivity中添加悬浮按钮的点击事件，方法其实与普通按钮一样。

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                    }
                }).show(); 
            }
        });//可交互的提示

Snackbar(可交互提示)

代码在上面。
与Toast很类似，但是第一个参数是一个View类型的值，而不是Context值。它可以通过View值获得其最外层的父布局。
Snackbar的出现可以防止用户操作失误，例如当用户需要删除图片的时候，可以询问用户是否确认删除。而不是Toast那样直接返回删除成功与否。

效果图：

Snackbar ，Undo可以点击

5. CoordinatorLayout

CoordinatorLayout是一个加强版的FrameLayout，把他作为主屏幕的主控件，可以确保Snackbar的出现不会遮挡住悬浮按钮。
代码在上面出现过。

6. 卡片式布局

CardView可以让人看上去每一个RecyclerView子项有立体的感觉。RecyclerView在这里就不详细说明，以后我会在新的文章中系统的说明。

首先添加依赖

compile 'com.android.support:recyclerview-v7:25.3.1' //RecyclerView的依赖
compile 'com.android.support:cardview-v7:25.3.1' //卡片式布局
compile 'com.github.bumptech.glide:glide:3.7.0' //图片加载库，轻松加载网络图片

2.添加RecyclerView
新增Dog类

package com.example.peek_mapdemotest.materialdesign;

/**
 * Created by Administrator on 2017/7/25.
 */

public class Dog {
    private String name;
    private String introduce;
    private int pic;

    public Dog(String name, String introduce, int pic) {
        this.name = name;
        this.introduce = introduce;
        this.pic = pic;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getIntroduce() {
        return introduce;
    }

    public void setIntroduce(String introduce) {
        this.introduce = introduce;
    }

    public int getPic() {
        return pic;
    }

    public void setPic(int pic) {
        this.pic = pic;
    }
}

新增适配器

package com.example.peek_mapdemotest.materialdesign;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Administrator on 2017/7/25.
 */

public class DogAdapter extends RecyclerView.Adapter<DogAdapter.ViewHolder> {
    private ArrayList<Dog>  mDogList;
    private Context mContext;
    public DogAdapter(ArrayList<Dog> dogList){
        mDogList = dogList;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(mContext == null){
            mContext = parent.getContext();
        }
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.dog_item,parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Dog dog = mDogList.get(position);
        holder.dogImage.setImageResource(dog.getPic());
        holder.dogIntroduce.setText(dog.getIntroduce());
        holder.dogName.setText(dog.getName());

    }

    @Override
    public int getItemCount() {
        return mDogList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView dogImage;
        TextView dogName;
        TextView dogIntroduce;

        public ViewHolder(View itemView) {
            super(itemView);
            dogImage= (ImageView) itemView.findViewById(R.id.dog_image);
            dogName = (TextView) itemView.findViewById(R.id.dog_name);
            dogIntroduce = (TextView) itemView.findViewById(R.id.introduce);
        }
    }
}

在Activity中添加数据源

 private void initData() {
        Dog dog1 = new Dog("哈士奇","西伯利亚雪橇犬是原始的古老犬种，在西伯利亚东北部、格陵兰南部生活。",R.drawable.hashiqi);
        dogList.add(dog1);
        dogs.add(dog1);
        Dog dog2 = new Dog("博美","头部相当短小，头盖宽广且平，形状像狐狸头。眼睛大小中等，古铜色，略成椭圆形，两眼间距适中黑色眼眶。鼻端部较细，呈楔形，鼻子和被毛同色。耳朵小，两耳间距较近，多为直立耳，就如狐狸的耳朵。",R.drawable.bomei);
        dogs.add(dog2);
        dogList.add(dog2);
        Dog dog3 = new Dog("贵宾","贵宾犬，Poodle，也称“贵妇犬”，又称“卷毛狗”",R.drawable.guibin);
        dogList.add(dog3);
        dogs.add(dog3);
        Dog dog4 = new Dog("牛头梗","牛头梗是为绅士们饲养的，为此这些绅士强烈要求公平竞赛，大家不要与弄虚作假的人进行比赛。牛头梗被教以勇敢地进行自卫和保护它的主人，但决不允许它去尝试挑战——白色的品种被称作“白色的骑士”，这是它保持至今的荣誉。",R.drawable.niutougeng);
        dogList.add(dog4);
        dogs.add(dog4);
        Dog dog5 = new Dog("牧羊犬","国内血统比较好的边境牧羊犬如乾通名犬俱乐部繁育的卡尔，都是国内顶尖级别的血统，多次在美国西敏寺犬展中获得优异成绩。",R.drawable.muyangquan);
        dogList.add(dog5);
        dogs.add(dog5);
        Dog dog6 = new Dog("柴犬","柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡，拥有灵敏的感官，使得柴犬屡次成为上乘的狩猎犬。",R.drawable.chaiquan1);
        dogList.add(dog6);
        dogs.add(dog6);
        Dog dog7 = new Dog("巴哥","巴哥犬是体贴，可爱的小型犬种",R.drawable.bage);
        dogList.add(dog7);
        dogs.add(dog7);

    }

声明RecyclerView，把RecyclerView设置为瀑布型。

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
         adapter = new DogAdapter(dogList);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);

7.AppBarLayout

你做了上面的操作会发现RecyclerView会把ToolBar遮挡住，主要是因为CoordinatorLayout是一个加强版的FrameLayout，所以默认在左上角开始摆放控件。
添加了AppBarLayout之后会解决到这种问题，并且可以设计出，当往上滑动的时候，ToolBar会隐藏了。因为此时，用户的注意力会放在RecyclerView上，隐藏ToolBar会更适合用户的体验。

修改代码，在ToolBar上加一层AppBarLayout布局。并且在Recyclerview中添加以下属性，这样可以解决遮挡问题。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

然后再RecyclerView中添加以下属性，这样可以设计出Toolbar隐藏效果。

app:layout_scrollFlags="snap|scroll|enterAlways"

scroll指当RecyclerView向上滚动的时候，Toolbar会隐藏。enterAlways表示当RecyclerView向下滚动的时候，Toolbar会一起滚动。snap表示当Toolbar还没有完全隐藏或者显示的时候，会根据当前滚动的距离，自动选择隐藏还是显示。

效果图：

Toolbar在向上滚动的过程中隐藏了

8.下拉刷新

在RecyclerView的外层添加

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

注意，在RecyclerView中的布局行为要移动到SwipeRefreshLayout布局中。

然后在Activity中添加代码，声明SwipeRefreshLayout。

  swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshDog();
            }
        });

添加下拉刷新的逻辑

private void refreshDog() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        randomData();
                        adapter.notifyDataSetChanged();
                        swipeRefreshLayout.setRefreshing(false);
                    }
                });
            }
        }).start();
    }

public void randomData(){
        int j =dogs.size();
        dogList.clear();
        for(int i= 0;i<=8;i++){
            Random random = new Random();
            int index = random.nextInt(j);
            dogList.add(dogs.get(index));
        }
    }

下拉刷新的效果只是模拟出来，因为读取的是本地数据，所以很快完成，看不到效果。因此，在线程中sleep了2秒，模拟从网络服务器拉数据下来的过程。

效果图:

下拉刷新中

总结：
Material design的设计规范细致入微，需要消化好一阵子。虽然今天只是学习Material design的第一天，但是越读越感受到它的妙处。这只是Material design的冰山一角。假如每个细节都严格遵照Material design的思想来设计，哪怕你不是设计人员，你的产品也一定不会难用和难看。

学习资料:重磅教程！帮你全面彻底搞定MATERIAL DESIGN的学习笔记

最后编辑于：2017.12.09 02:28:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,636评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,890评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,680评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,766评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,665评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,045评论 1赞 276
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,515评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,182评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,334评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,274评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,319评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,002评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,599评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,675评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,917评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,309评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,885评论 2赞 341

Material Design 实战

1.Toolbar

Toolbar的实现

2.滑动菜单(抽屉)

3. NavigationView

4.悬浮按钮和可交互提示

FloatingActionButton

Snackbar(可交互提示)

5. CoordinatorLayout

6. 卡片式布局

7.AppBarLayout

8.下拉刷新

推荐阅读更多精彩内容