MaterialDesign（完整）帶你體驗藝術般互動體驗

先看看Demo的示範效果：

1.Toolbar

Toolbar是代替Actionbar的使用，因為在繼承了Actionbar的所有功能以外，靈活性更高，并且可以配合其他的一些控件實作MaterailDesign的效果，是以官方推薦使用Toolbar。
要使用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。
如何使用：

先配置主題為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才剛剛開始。

先看看效果：

MaterialDesign（完整）帶你體驗藝術般互動體驗

具體實作：

先在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

滑動菜單，通過滑動将菜單欄滑動出來。

先看看效果：

MaterialDesign（完整）帶你體驗藝術般互動體驗

下來介紹如何實作上面的效果：

<?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 ", )
                        .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是為了相容以下的系統-->

    </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是為了相容以下的系統-->

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

因為AppBarLayout通過檢視源碼是繼承自LinearLayout,則我們可以将AppBarLayout看做事垂直方向的LinearLayout進行使用。因為是MaterialDesign設計效果，是以我們配合RecycleView進行使用，因為recycleView的滑動會被AppBarLayout監聽到，是以我們通過給RecycleView設定一個内定的布局行為

給Toolbar設定

“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的使用是一樣的。

填充狀态欄的空間

想要使用和設定狀态欄，我們隻需要這行代碼就行

當然設定了這行以後，還需要将你的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

MaterialDesign（完整）帶你體驗藝術般互動體驗

MaterialDesign（完整）帶你體驗藝術般互動體驗

先看看Demo的示範效果：

1.Toolbar

2.DrawerLayout

3. CoordinatorLayout

4.AppBarLayout

5.CollapsingToolbarLayout

NestedScrollView

填充狀态欄的空間

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯