第一行程式碼——第十二章：最佳的UI體驗——Material Design實戰

阿新 • • 發佈：2019-01-06

知識點：

12.1 什麼是 Material Design

Material Design是由谷歌的設計工程師基於優秀的設計原則，結合豐富的創意和科學技術所發明的一套全新的介面設計語言，包含了視覺、運動、互動效果等特性。

12.2 Toolbar

雖然對於Toolbar你暫時應該還是比較陌生的，但是對於ActionBar，你就應該有點熟悉了，由於其設計的原因，被限定只能位於活動的頂部，從而不能實現一些 Material Design 的效果，因此官方已不建議使用 ActionBar 了，而推薦使用 Toolbar。

首先修改預設主題，隱藏ActionBar：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

修改佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

</FrameLayout>

接下來修改活動中的程式碼如下：

public class MaterialDesignActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);// 將 Toolbar 的例項傳入
    }
}

如此即可。

接下來新增一些action按鈕，右擊 res 目錄→New→Directory，建立一個 menu 資料夾。然後右擊 menu 資料夾→New→Menu resource file，建立一個toolbar.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/backup"
        android:icon="@mipmap/backup"
        android:title="Backup"
        app:showAsAction="always"
        />
    <!--螢幕空間足夠顯示-->
    <item
        android:id="@+id/delete"
        android:icon="@mipmap/delete"
        android:title="Delete"
        app:showAsAction="ifRoom"
        />
    <!--永遠顯示在(選單)中-->
    <item
        android:id="@+id/settings"
        android:icon="@mipmap/settings"
        android:title="Settings"
        app:showAsAction="never"
        />
</menu>

在活動頁面新增相關操作

@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, "Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "Settings", Toast.LENGTH_SHORT).show();
                break;
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
        }

        return true;
    }

12.3 滑動選單

滑動選單可以說是Material Design中最常見的效果之一了，雖說這個功能看起來挺複雜的，不過藉助谷歌提供的各種工具，我們可以輕鬆的實現這個炫酷的功能了。

12.3.1 DrawerLayout

藉助DrawerLayout實現滑動選單，首先它是一個佈局，在佈局中允許放入兩個直接子控制元件，第一個子控制元件施主螢幕中顯示的內容，第二個子控制元件是滑動選單中顯示的內容。

佈局程式碼：

<?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"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--********** 第一個子控制元件 主螢幕顯示 ***********-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    <!--********** 第二個子控制元件 滑動選單顯示 **********-->
    <!-- 注意：屬性 android:layout_gravity 是必須指定的 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="這是滑動選單" 
        android:background="#fff"/>
    
</android.support.v4.widget.DrawerLayout>

接下來在導航欄上新增左側按鈕：

  void initActionBar() {
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.mipmap.menu);
        }
    }

對於側滑選單做一些處理：

在按返回鍵時：

  @Override
    public void onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

在按導航鍵時：

      case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;

12.3.2 NavigationView

使用 NavigationView，在滑動選單頁面定製任意佈局

首先，將 Design Support 庫以及開源專案 CircleImageView（實現圖片圓形化，專案主頁地址：https://github.com/hdodenhof/CircleImageView ）引入到專案中：

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

在使用 NavigationView 之前，還需要準備兩個東西：在 NavigationView 中用來顯示具體選單項的 menu 和顯示頭部佈局的 headerLayout。

（1）準備 menu。在 menu 資料夾下建立一個 nav_menu.xml 檔案，編寫程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <!--checkableBehavior指定為single表示組中的所有選單項只能單選 -->
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@mipmap/call"
            android:title="Call"/>
        <item
            android:id="@+id/nav_friends"
            android:icon="@mipmap/friends"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_location"
            android:icon="@mipmap/location"
            android:title="Location"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@mipmap/mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_task"
            android:icon="@mipmap/task"
            android:title="Task"/>
    </group>
</menu>

（2）準備 headerLayout。在 layout 資料夾下建立一個佈局檔案 nav_header.xml，編寫程式碼如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <!--*************** 頭像 ****************-->
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/nav_icon"
        android:layout_centerInParent="true"/>
    
    <!--*************** 郵箱 ****************-->
    <TextView
        android:id="@+id/mail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:text="[email protected]"
        android:textColor="@color/white"
        android:textSize="14sp"/>

    <!--*************** 使用者名稱 ****************-->
    <TextView
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mail"
        android:gravity="center"
        android:text="開心wonderful"
        android:textColor="@color/white"
        android:textSize="14sp"/>

</RelativeLayout>

準備好 menu 和 headerLayout 後，可以使用 NavigationView 了，修改佈局程式碼，將之前的 TextView 替換成 NavigationView，如下：

<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_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--******** 第一個子控制元件 主螢幕顯示 ********-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    <!--******** 第二個子控制元件 滑動選單顯示 ********-->
    <!-- 注意：屬性 android:layout_gravity 是必須指定的 -->
    <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:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

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

最後，修改活動中的程式碼，新增處理選單項的點選事件，如下：

public class MaterialDesignActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_material_design);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);// 將 Toolbar 的例項傳入

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true); //讓導航按鈕顯示出來
            actionBar.setHomeAsUpIndicator(R.mipmap.menu);//設定導航按鈕圖示
        }
        navView.setCheckedItem(R.id.nav_call);//設定預設選中項
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();//關閉抽屜
                ToastUtils.showShort("點選了"+item.getTitle());
                return true;
            }
        });
    }

    . . .
}

12.4 懸浮按鈕和可互動提示

立體設計是 Material Design 中一條非常重要的思想，也就是說，按照Material Design的理念，應用程式的介面不僅僅是一個平面，而應該是有立體效果的。

12.4.1 FloatingActionButton

FloatingActionButton 是 Design Support 庫中提供的一個控制元件，可以比較輕鬆地實現懸浮按鈕地效果。它預設使用 colorAccent 作為按鈕的顏色。下面來具體實現下。

佈局新增如下：

  <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:itemIconTint="@color/colorAccent"
        app:menu="@menu/nav_menu" />

設定點選事件：

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            Toast.makeText(Main4Activity.this, "Data resotred", Toast.LENGTH_SHORT).show();
            }
        });

12.4.2 SnackBar

SnackBar 允許咋提示當中加入一個可互動的按鈕，當用戶點選按鈕的死後可以執行一些額外的邏輯操作。

比如（防止誤刪）：

 Snackbar.make(view, "Data delete", Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Toast.makeText(Main4Activity.this, "Data resotred", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();

效果如下（提示遮擋了內容，不急，繼續往下看）：

12.4.3 CoordinatorLayout

CoordinatorLayout 是 Design Support 庫提供的一個加強版的 FrameLayout 佈局，它可以監聽其所有子控制元件的各種事件，然後自動幫我們做出最為合理的響應。

修改佈局如下：

<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_layout"
    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.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <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="@mipmap/done"
            app:elevation="8dp"/>
    </android.support.design.widget.CoordinatorLayout>

    . . .

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

效果如下：

12.5 卡片式佈局

卡片式佈局是 Material Design 中提出的一個新概念，它可以讓頁面中的元素看起來就像在卡片中一樣，並且還能擁有圓角和投影。

12.5.1 CardView

是 appcompat-v7 庫提供的用於實現卡片式佈局效果的重要控制元件，它也是一個 FrameLayout，只是額外提供了圓角和陰影等效果，有立體感。

<!-- app:cardCornerRadius 指定卡片圓角的弧度，值越大弧度越大
     app:elevation 指定卡片的高度，值越大投影範圍越大，效果越淡-->
<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:elevation="5dp">
    <TextView
        android:id="@+id/info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>

12.5.2 AppBarLayout

Design Support 庫提供的一個垂直方向的 LinearLayout，它在內部做了很多滾動事件的封裝，並應用了一些 Meterial Design 的設計理念。

一會會解決下面列表遮擋問題，主要是

app:layout_behavior="@string/appbar_scrolling_view_behavior"

<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="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
            
        </android.support.design.widget.AppBarLayout>
        
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_one_piece"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

12.6 下拉重新整理

在 Meterial Design 中，SwipeRefreshLayout 是用於實現下拉重新整理的核心類，它由 support-v4 庫提供，把要實現下拉重新整理功能的控制元件放置到 SwipeRefreshLayout 中，就能讓這個控制元件支援下拉重新整理。

在內容外巢狀：

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

            <!--appbar_scrolling_view_behavior 唯一的作用是把自己（使用者）放到AppBarLayout的下面-->
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

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

上述程式碼值得注意的是，由於 RecyclerView 變成了 SwipeRefreshLayout 的子控制元件，因此之前用 app:layout_behavior 宣告佈局行為要移到 SwipeRefreshLayout 中才行。

修改活動：

// 下拉重新整理
        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        swipeRefresh.setColorSchemeResources(R.color.colorPrimary);//設定重新整理進度條顏色
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                // 處理重新整理邏輯
                refreshPartner();
            }
        });

處理重新整理邏輯（模擬）

/**
     * 下拉重新整理資料（為簡單起見沒和網路互動）
     */
    private void refreshPartner() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        initPartner();//重新生成資料
                        adapter.notifyDataSetChanged();//通知資料變化
                        swipeRefresh.setRefreshing(false);//隱藏重新整理進度條
                    }
                });
            }
        }).start();
    }

12.7 可摺疊式標題欄

12.7.1 CollapsingToolbarLayout

CollapsingToolbarLayout 是 Design Support 庫提供的一個作用於 Toolbar 基礎之上的佈局，它可讓 Toolbar 的效果變得更加豐富。

不過，CollapsingToolbarLayout 是不能獨立存在的，只能作為 AppBarLayout 的直接子佈局來使用。而 AppBarLayout 又必須是 CoordinatorLayout 的子佈局。

新建活動修改佈局頁面：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appBar"
        >
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/coolapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <!--app:layout_collapseMode="parallax"  摺疊模式 pin始終不變 parallax 錯位偏移   -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:id="@+id/fruit_image_view"
                android:fitsSystemWindows="true"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                >


            </android.support.v7.widget.Toolbar>


        </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"
            >
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="35dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="4dp"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/fruit_content_text"
                    android:layout_margin="10dp"
                    />


            </android.support.v7.widget.CardView>

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

    <!--layout_anchor 指定錨點  gravity 右下角-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:src="@mipmap/tele"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end"
        />

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

12.7.2 充分利系統狀態列空間

讓背景圖和狀態列融合到一起

藉助 android:fitsSystemWindows 這個屬性實現。將 ImageView 佈局結構中的所有父控制元件都設定上這個屬性並且指定為 True，修改 activity_partner.xml 如下：

<android.support.design.widget.CoordinatorLayout
    . . .
    android:fitsSystemWindows="true">

    <!--******************* 標題欄的介面 ****************-->
    <android.support.design.widget.AppBarLayout
        . . .
        android:fitsSystemWindows="true">

       <android.support.design.widget.CollapsingToolbarLayout
            . . .
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/partner_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true"/>

            . . .

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

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

然後還要在程式的主題中將狀態列顏色指定為透明色才行，即在主題中將屬性 **android:statusBarColor **的值指定為 @android:color/transparent 就可以了，但問題是這個屬性在 Android 5.0 系統開始才有的，因此需要準備兩個同名不同內容的主題來實現。

針對5.0及以上的系統，在 res 目錄下建立一個 values-v21 目錄，然後在此目錄建立一個 styles.xml 檔案如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="PartnerActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

針對5.0以下的系統，還需要在 value/styles.xml 檔案定義一個同名主題，但內容為空，如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
     <!-- 5.0以下使用主題 -->
    <style name="PartnerActivityTheme" parent="AppTheme">
    </style>
</resources>

最後修改 AndroidManifest.xml 中的程式碼，讓 PartnerActivity 使用這個主題，如下：

<activity 
    android:name=".chapter12.PartnerActivity"
    android:theme="@style/PartnerActivityTheme">
</activity>

12.8 小結與點評

郭霖總結：

學完了本章的所有知識，你有沒有覺得無比興奮呢?反正我是這麼覺得的。本章我們的收穫實在是太多了，從一個什麼都沒有的空專案，經過一章的學習，最後實現了一個功能如此豐富、介面如此華麗的應用，還有什麼事情比這個更讓我們有成就感嗎?

本章中我們充分利用了Design Spport庫. spport-v4庫、appcompat-v7庫，以及一些開源專案來實現一個了高度Material化的應用程式，能將這些庫中的相關控制元件熟練掌握，你的Material Design技術就算是合格了。

不過說到底。我們仍然還是在以個開發者的思維給你講解 Material Desing側重於如何去實現這些效果。而實際上，Materila Design 的設計思維和設計理念才是更加重要的東西，當然這部分內容應該是Ui設計人員去學習的，如果你也感興趣的話，可以參考一下Material Design的官方文章：https://material.google.com/

現在你已經足足學習了12章的內容，對Android 應用程式開發的理解應該比較深刻了。目前系統性的知識幾乎都已經講完了，但是還有一些零散的高階技巧在等待著你，那麼就讓我們趕快進入到下一張的學習當中吧。

我的總結：

在我看完這12章的時候確實是比較累的，後來也是有些偷懶了，沒有去敲程式碼，這樣的學習效率是不高的，在我寫這篇文章時，對於之前學的很多東西，腦子裡都記不起來，或許是年級的問題，也或許是我學習方式不對，下不為例。

第一行程式碼——第十二章：最佳的UI體驗——Material Design實戰

目錄：

知識點：

12.1 什麼是 Material Design

12.2 Toolbar

12.3 滑動選單

12.3.1 DrawerLayout

12.3.2 NavigationView

12.4 懸浮按鈕和可互動提示

12.4.1 FloatingActionButton

12.4.2 SnackBar

12.4.3 CoordinatorLayout

12.5 卡片式佈局

12.5.1 CardView

12.5.2 AppBarLayout

12.6 下拉重新整理

12.7 可摺疊式標題欄

12.7.1 CollapsingToolbarLayout

12.7.2 充分利系統狀態列空間

12.8 小結與點評

第一行程式碼——第十二章：最佳的UI體驗——Material Design實戰

第一行程式碼——第十一章：Android特色開發——基於位置的服務

第一行程式碼——第十章：後臺默默的勞動者——探究服務

卜若的程式碼筆記系列-Web系列-SpringBoot-第十二章：Swagger的批註詳解-3212

第十二章：查找與處理文件

第十二章：類的無參方法

第十二章：部署Django

演算法導論第十二章：二叉查詢樹筆記（二叉查詢樹、查詢二叉查詢樹、插入和刪除、隨機構造的二叉查詢樹）

“全棧2019”Java第十二章：變量

“全棧2019”Java第十二章：變數

SpringBoot | 第十二章：給大家推薦8個SpringBoot精選專案

Java程式設計思想第十二章：通過異常處理錯誤

作業系統概念（高等教育出版社，第七版）複習——第十二章：大容量儲存器的結構

第十二章：Java中的介面

資料庫系統概念（機械工業出版社，第六版）複習——第十二章：事務管理

Flask 教程第十二章：日期和時間

GObject學習教程---第十二章：GObject 訊號機制——訊號註冊

第十二章：重做日誌和歸檔

《Apache MINA 2.0 使用者指南》第十二章：日誌過濾器

【Python程式設計：從入門到實踐】第十二章：武裝飛船

第一行程式碼——第十二章：最佳的UI體驗——Material Design實戰

目錄：

知識點：

12.1 什麼是 Material Design

12.2 Toolbar

12.3 滑動選單

12.3.1 DrawerLayout

12.3.2 NavigationView

12.4 懸浮按鈕和可互動提示

12.4.1 FloatingActionButton

12.4.2 SnackBar

12.4.3 CoordinatorLayout

12.5 卡片式佈局

12.5.1 CardView

12.5.2 AppBarLayout

12.6 下拉重新整理

12.7 可摺疊式標題欄

12.7.1 CollapsingToolbarLayout

12.7.2 充分利系統狀態列空間

12.8 小結與點評

相關推薦