MaterialDesign（完整） 带你体验艺术般交互体验

先看看Demo的演示效果：

one.gif

1.Toolbar

  1. Toolbar是代替Actionbar的使用，因为在继承了Actionbar的所有功能以外，灵活性更高，并且可以配合其他的一些控件实现MaterailDesign的效果 ，因此官方推荐使用Toolbar。
  2. 要使用Toolbar,则必须要要配置当前Activity的主题为“***.NoActionBar”,否则会报一个"This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead."的异常，就是提醒，已经有actionbar,不能再使用toolBar。
  3. 如何使用：
    先配置主题为noActionbar
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>

Activity的中的代码

        //如果不设置，则不会出现标题
        Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
        //不设置会显示label的属性,也可以在清单文件中进行配置
//      tbAtToolbar.setTitle(" I am toolbar ");
        setSupportActionBar(tbAtToolbar);

布局文件中的代码：

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

这里我们使用"android:theme"去指定和ActionBar的主题一样。app:popupTheme是为了兼容5.0一下的系统使用的主题，因为MaterailDesign是在5.0以后才出现的。到这一步，Toolbar的简单使用已经介绍完毕。
但是，如果只是这样实现的话，你可能会有疑问，和Actionbar有个毛线的不同，别急，高级定制Toolbar才刚刚开始。
先看看效果：


toolbar.png

具体实现 ：
先在res中创建menu文件夹，然后创建toolbarmenu.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/add"
        android:icon="@drawable/ic_menu_camera"
        android:title="add"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="delete"
        app:showAsAction="never"/>

    <item
        android:id="@+id/tb_setting"
        android:title="@string/action_settings"
        android:icon="@drawable/ic_menu_manage"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"/>
</menu>

先介绍一下 app:showAsAction这个属性：'ifRoom'表示如果空间充足则显示，如果不充足，则不显示，'always'一直显示，'never'则表示不出现，点击，则先会出现title的属性，即为3个小白点。
然后去重写Activity的onCreateOptionsMenu()方法去加载toolbarmenu.xml配置文件，重写onOptionsItemSelected()去实现菜单的点击事件


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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                dlAtDrawLayout.openDrawer(Gravity.START);
                break;
            case R.id.add:
                Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.tb_setting:
                Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

到这里，关于toolbar的使用就完全介绍完毕咯。

2.DrawerLayout

滑动菜单，通过滑动将菜单栏滑动出来。
先看看效果：


DrawLayout.png

下来介绍如何实现上面的效果：

<?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/dl_at_draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.it.onex.materialdesigndemo.ToolbarActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <!-- 菜单选项布局 -->
    <ScrollView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"/>

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

如果要定制菜单选项栏，只需要替换ScrollView的布局，但是一定要保留android:layout_gravity="start"属性，并不一定要用"start",也可以使用left和right属性，表示从那边进行滑动出来菜单。但是如果不添加任何的标记的话，用户一般不会发现这个菜单，所以最好是添加一个菜单指示器。
这里介绍2中方式：
第一种：完全自定义：没有效果和button的点击事件类似

     ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
        }

   @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                dlAtDrawLayout.openDrawer(Gravity.START);
                break;
        }
        return true;
    }

第二种：使用ActionBarDrawerToggle类进行添加

  ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, dlAtDrawLayout, tbAtToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        dlAtDrawLayout.addDrawerListener(toggle);
        toggle.syncState();

strings.xml

<resources>
    <string name="app_name">MaterialDesignDemo</string>

    <string name="navigation_drawer_open">Open navigation drawer</string>
    <string name="navigation_drawer_close">Close navigation drawer</string>

    <string name="action_settings">Settings</string>
</resources>

则会出现滑动菜单栏指示器，并且自动监听是否闭合的监听。

3. CoordinatorLayout

CoordinatorLayout可以理解为一个加强版的FrameLayout,如果使用常规的控件，使用和效果和FrameLayout没有多大的效果，但是如果使用一些Design Support中的另外一些控件使用，就体现出它的强大之处了。
CoordinatorLayout为什么强大，因为她可以监听所有它的子View的各种事件，并且会通过这些事件的监听，会动态的去调整布局，比如，我们在屏蔽右下角使用FloatingActionButton，并添加一个弹出Snackbar的提示，如果使用的FrameLayout,则Snackbar会挡住FloatingActionButton,但是如果使用CoordinatorLayout，则不会出现，它会动态的将布局整体上移。

       FloatingActionButton fabButton = (FloatingActionButton) findViewById(R.id.fab_at_action);
        fabButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "snack action ", 1000)
                        .setAction("Toast", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(ToolbarActivity.this, " to do ", Toast.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });

在看一个例子：

    <android.support.design.widget.CoordinatorLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.it.onex.materialdesigndemo.ToolbarActivity">


        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_at_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>


        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_at_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <!-- 使用popupTheme是为了兼容5.0以下的系统-->

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

加入我们使用上面的这种布局，我们会发现RecycleView会将Toolbar挡住，类似于这种效果，
不难理解，因为CoordinatorLayout在前面提到过是类似于FrameLayout的使用，所以，RecycleView会挡住Toolbar的一部分，我们如何解决呢？如果不在添加任何的materialDesign的效果，我们可以添加Margin效果，实现想要的效果，但是Google肯定提供了解决方案，那就是使用AppBarLayout的布局，我们在下面继续。

4.AppBarLayout

针对上面出现的bug，我们提到了AppBarLayout的使用，这里先看看如何使用，我们在Toolbar的最外面进行嵌套了一层AppBarLayout,然后再看效果，是不是解决了上面出现的bug

   <android.support.design.widget.CoordinatorLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.it.onex.materialdesigndemo.ToolbarActivity">



        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/tb_at_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </android.support.design.widget.AppBarLayout>


        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_at_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
        <!-- 使用popupTheme是为了兼容5.0以下的系统-->

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

因为AppBarLayout通过查看源码是继承自LinearLayout,则我们可以将AppBarLayout看做事垂直方向的LinearLayout进行使用。因为是MaterialDesign设计效果，所以我们配合RecycleView进行使用，因为recycleView的滑动会被AppBarLayout监听到，所以我们通过给RecycleView设置一个内定的布局行为

app:layout_behavior="@string/appbar_scrolling_view_behavior"

给Toolbar设置

app:layout_scrollFlags="scroll|enterAlways"

“scroll”代表：RecycleView向上滚动时，toolbar也会向上滑动，直到隐藏，“enterAlways”属性代表：当RecycleView向下滚动时，Toolbar也会向下滑动，并且重新显示。“snap”属性代表：当Toolbar还没有完全隐藏或显示的时候，会根据当前滑动的距离，自动选择隐藏或者显示。
看看运行的效果：

5.CollapsingToolbarLayout

如果你见过类似的效果，那么绝大多数是使用的这个布局，即可折叠标题栏
先看看效果：

从命名规则上面看出，它是作用于Toolbar上面的折叠布局，但是，它的作用范围有限，即CollapsingToolbarLayout不能单独使用，即CollapsingToolbarLayout必须作为AppbarLayout的直接子布局进行使用，AppbarLayout又是CoordinatorLayout的子布局，所以看看我们的布局文件

<android.support.design.widget.CoordinatorLayout
        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="450dp"
            android:fitsSystemWindows="true">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true">


                <ImageView
                    android:id="@+id/iv_movie_icon"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/ic"
                    app:layout_collapseMode="parallax"
                    android:transitionName="basic"
                    android:fitsSystemWindows="true"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/tb_amd_toolbar"
                    android:layout_width="match_parent"
                    app:titleTextColor="#ff4081"
                    app:subtitleTextColor="#ff4081"
                    android:layout_height="?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="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                
                <TextView
                    android:id="@+id/tv_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"/>

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

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/add"
            app:layout_anchor="@id/appBar"
            app:layout_anchorGravity="bottom|end"/>

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

解释一下几个属性： app:layout_scrollFlags="scroll|exitUntilCollapsed"
“scroll” 表示随着recycleView的滚动，CollapsingToolbarLayout也进行滚动，“exitUntilCollapsed”属性代表：随着滚动完成折叠以后保留在屏幕上，不再移出界面。 app:contentScrim="?attr/colorPrimary"指定当CollapsingToolbarLayout折叠完成以后Toolbar的背景颜色。

NestedScrollView

NestedScrollView类似于一个ScrollView，将其app:layout_behavior="@string/appbar_scrolling_view_behavior"和之前RecycleView的使用是一样的。

填充状态栏的空间

想要使用和设置状态栏，我们只需要这行代码就行

android:fitsSystemWindows="true"

当然设置了这行以后，还需要将你的Activity的主题的状态栏的背景设置为透明
即：

    <style name="MovieDetailActivityTheme" parent="AppTheme.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

RecycleView和SwipeRefreshLayout、FloatingActionButton的使用这里不用介绍了，因为太多了。在这个Demo中也都有，所以不做介绍了，也相对的比较简单。
最后看看整体的效果
最后附上Github地址：https://github.com/OnexZgj/MaterialDesign

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

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,032评论 25赞 707
  • 12.3滑动菜单 （DrawerLayout）
    滑动菜单可以说是Material Desgin中最常见的效果之一了，在许多著名的应用中，都有滑动菜单的功能...
    AndYMJ阅读 2,501评论 2赞 4
  • CoordinatorLayout
    CoordinatorLayout与滚动的处理 CoordinatorLayout实现了多种Material De...
    cxm11阅读 6,578评论 1赞 15
  • 犬心犬意①
    如果你有一条狗，它不是很聪明！但很二，会逗你开心，你是否对它一心一意？坚决不三心二意？如果你有一条狗，它非常聪明！...
    西瓜popo阅读 218评论 0赞 1
  • 小多是个恋旧的孩子
    小多过年前买的那双冬鞋已经脱胶了，鞋底鞋面分开来了，而且上面的毛皮已经烂了，当时卖给我的那双鞋的店老板还说是真皮的...
    胖多阅读 202评论 0赞 0