MaterialDesign（完整） 帶你體驗(yàn)藝術(shù)般交互體驗(yàn)

先看看Demo的演示效果：

one.gif

1.Toolbar

  1. Toolbar是代替Actionbar的使用，因?yàn)樵诶^承了Actionbar的所有功能以外，靈活性更高，并且可以配合其他的一些控件實(shí)現(xiàn)MaterailDesign的效果 ，因此官方推薦使用Toolbar。
  2. 要使用Toolbar,則必須要要配置當(dāng)前Activity的主題為“***.NoActionBar”,否則會(huì)報(bào)一個(gè)"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."的異常，就是提醒，已經(jīng)有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的中的代碼

        //如果不設(shè)置，則不會(huì)出現(xiàn)標(biāo)題
        Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
        //不設(shè)置會(huì)顯示label的屬性,也可以在清單文件中進(jìn)行配置
//      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一下的系統(tǒng)使用的主題，因?yàn)镸aterailDesign是在5.0以后才出現(xiàn)的。到這一步，Toolbar的簡(jiǎn)單使用已經(jīng)介紹完畢。
但是，如果只是這樣實(shí)現(xiàn)的話，你可能會(huì)有疑問(wèn)，和Actionbar有個(gè)毛線的不同，別急，高級(jí)定制Toolbar才剛剛開(kāi)始。
先看看效果：


toolbar.png

具體實(shí)現(xiàn) ：
先在res中創(chuàng)建menu文件夾，然后創(chuàng)建toolbarmenu.xml,并編寫(xiě)以下代碼

<?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這個(gè)屬性：'ifRoom'表示如果空間充足則顯示，如果不充足，則不顯示，'always'一直顯示，'never'則表示不出現(xiàn)，點(diǎn)擊，則先會(huì)出現(xiàn)title的屬性，即為3個(gè)小白點(diǎn)。
然后去重寫(xiě)Activity的onCreateOptionsMenu()方法去加載toolbarmenu.xml配置文件，重寫(xiě)onOptionsItemSelected()去實(shí)現(xiàn)菜單的點(diǎn)擊事件


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

到這里，關(guān)于toolbar的使用就完全介紹完畢咯。

2.DrawerLayout

滑動(dòng)菜單，通過(guò)滑動(dòng)將菜單欄滑動(dòng)出來(lái)。
先看看效果：


DrawLayout.png

下來(lái)介紹如何實(shí)現(xiàn)上面的效果：

<?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>

    <!-- 菜單選項(xiàng)布局 -->
    <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>

如果要定制菜單選項(xiàng)欄，只需要替換ScrollView的布局，但是一定要保留android:layout_gravity="start"屬性，并不一定要用"start",也可以使用left和right屬性，表示從那邊進(jìn)行滑動(dòng)出來(lái)菜單。但是如果不添加任何的標(biāo)記的話，用戶一般不會(huì)發(fā)現(xiàn)這個(gè)菜單，所以最好是添加一個(gè)菜單指示器。
這里介紹2中方式：
第一種：完全自定義：沒(méi)有效果和button的點(diǎn)擊事件類似

     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類進(jìn)行添加

  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>

則會(huì)出現(xiàn)滑動(dòng)菜單欄指示器，并且自動(dòng)監(jiān)聽(tīng)是否閉合的監(jiān)聽(tīng)。

3. CoordinatorLayout

CoordinatorLayout可以理解為一個(gè)加強(qiáng)版的FrameLayout,如果使用常規(guī)的控件，使用和效果和FrameLayout沒(méi)有多大的效果，但是如果使用一些Design Support中的另外一些控件使用，就體現(xiàn)出它的強(qiáng)大之處了。
CoordinatorLayout為什么強(qiáng)大，因?yàn)樗梢员O(jiān)聽(tīng)所有它的子View的各種事件，并且會(huì)通過(guò)這些事件的監(jiān)聽(tīng)，會(huì)動(dòng)態(tài)的去調(diào)整布局，比如，我們?cè)谄帘斡蚁陆鞘褂肍loatingActionButton，并添加一個(gè)彈出Snackbar的提示，如果使用的FrameLayout,則Snackbar會(huì)擋住FloatingActionButton,但是如果使用CoordinatorLayout，則不會(huì)出現(xiàn)，它會(huì)動(dòng)態(tài)的將布局整體上移。

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

在看一個(gè)例子：

    <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以下的系統(tǒng)-->

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

加入我們使用上面的這種布局，我們會(huì)發(fā)現(xiàn)RecycleView會(huì)將Toolbar擋住，類似于這種效果，
不難理解，因?yàn)镃oordinatorLayout在前面提到過(guò)是類似于FrameLayout的使用，所以，RecycleView會(huì)擋住Toolbar的一部分，我們?nèi)绾谓鉀Q呢？如果不在添加任何的materialDesign的效果，我們可以添加Margin效果，實(shí)現(xiàn)想要的效果，但是Google肯定提供了解決方案，那就是使用AppBarLayout的布局，我們?cè)谙旅胬^續(xù)。

4.AppBarLayout

針對(duì)上面出現(xiàn)的bug，我們提到了AppBarLayout的使用，這里先看看如何使用，我們?cè)赥oolbar的最外面進(jìn)行嵌套了一層AppBarLayout,然后再看效果，是不是解決了上面出現(xiàn)的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以下的系統(tǒng)-->

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

因?yàn)锳ppBarLayout通過(guò)查看源碼是繼承自LinearLayout,則我們可以將AppBarLayout看做事垂直方向的LinearLayout進(jìn)行使用。因?yàn)槭荕aterialDesign設(shè)計(jì)效果，所以我們配合RecycleView進(jìn)行使用，因?yàn)閞ecycleView的滑動(dòng)會(huì)被AppBarLayout監(jiān)聽(tīng)到，所以我們通過(guò)給RecycleView設(shè)置一個(gè)內(nèi)定的布局行為

app:layout_behavior="@string/appbar_scrolling_view_behavior"

給Toolbar設(shè)置

app:layout_scrollFlags="scroll|enterAlways"

“scroll”代表：RecycleView向上滾動(dòng)時(shí)，toolbar也會(huì)向上滑動(dòng)，直到隱藏，“enterAlways”屬性代表：當(dāng)RecycleView向下滾動(dòng)時(shí)，Toolbar也會(huì)向下滑動(dòng)，并且重新顯示?！皊nap”屬性代表：當(dāng)Toolbar還沒(méi)有完全隱藏或顯示的時(shí)候，會(huì)根據(jù)當(dāng)前滑動(dòng)的距離，自動(dòng)選擇隱藏或者顯示。
看看運(yùn)行的效果：

5.CollapsingToolbarLayout

如果你見(jiàn)過(guò)類似的效果，那么絕大多數(shù)是使用的這個(gè)布局，即可折疊標(biāo)題欄
先看看效果：

從命名規(guī)則上面看出，它是作用于Toolbar上面的折疊布局，但是，它的作用范圍有限，即CollapsingToolbarLayout不能單獨(dú)使用，即CollapsingToolbarLayout必須作為AppbarLayout的直接子布局進(jìn)行使用，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>

解釋一下幾個(gè)屬性： app:layout_scrollFlags="scroll|exitUntilCollapsed"
“scroll” 表示隨著recycleView的滾動(dòng)，CollapsingToolbarLayout也進(jìn)行滾動(dòng)，“exitUntilCollapsed”屬性代表：隨著滾動(dòng)完成折疊以后保留在屏幕上，不再移出界面。 app:contentScrim="?attr/colorPrimary"指定當(dāng)CollapsingToolbarLayout折疊完成以后Toolbar的背景顏色。

NestedScrollView

NestedScrollView類似于一個(gè)ScrollView，將其app:layout_behavior="@string/appbar_scrolling_view_behavior"和之前RecycleView的使用是一樣的。

填充狀態(tài)欄的空間

想要使用和設(shè)置狀態(tài)欄，我們只需要這行代碼就行

android:fitsSystemWindows="true"

當(dāng)然設(shè)置了這行以后，還需要將你的Activity的主題的狀態(tài)欄的背景設(shè)置為透明
即：

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

RecycleView和SwipeRefreshLayout、FloatingActionButton的使用這里不用介紹了，因?yàn)樘嗔?。在這個(gè)Demo中也都有，所以不做介紹了，也相對(duì)的比較簡(jiǎn)單。
最后看看整體的效果
最后附上Github地址：https://github.com/OnexZgj/MaterialDesign

one.gif
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,234評(píng)論 25贊 708
  • 滑動(dòng)菜單可以說(shuō)是Material Desgin中最常見(jiàn)的效果之一了，在許多著名的應(yīng)用中，都有滑動(dòng)菜單的功能...
    AndYMJ閱讀 2,783評(píng)論 2贊 4
  • CoordinatorLayout與滾動(dòng)的處理 CoordinatorLayout實(shí)現(xiàn)了多種Material De...
    cxm11閱讀 6,819評(píng)論 1贊 15
  • 如果你有一條狗，它不是很聰明！但很二，會(huì)逗你開(kāi)心，你是否對(duì)它一心一意？堅(jiān)決不三心二意？如果你有一條狗，它非常聰明！...
    西瓜popo閱讀 262評(píng)論 0贊 1
  • 小多過(guò)年前買的那雙冬鞋已經(jīng)脫膠了，鞋底鞋面分開(kāi)來(lái)了，而且上面的毛皮已經(jīng)爛了，當(dāng)時(shí)賣給我的那雙鞋的店老板還說(shuō)是真皮的...
    胖多閱讀 239評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容