Android Material 支持庫：Electric Boogaloo的提示與技巧

如果你之前閱讀過我先前的博客文章和鏈接的教程，那么你應該有這樣一個應用程序，它使用Material 支持庫，并且看起來非常得體。這篇文章的重點是幫你的設(shè)計增加一些亮點，并且讓它更接近Google Material 設(shè)計指南。最好的部分是：這些設(shè)計不需要設(shè)計師或新的資產(chǎn)。

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/Rr32ynHS1.png" alt="Rr32ynHS1.png" />

連鎖反應

每個人都喜歡按鈕上的以及使一切事物擁有反饋的令人滿意的連鎖反應。我將向您展示如何添加這個效果。注意連鎖反應只會出現(xiàn)在運行 Lollipop 的設(shè)備中，而在以前的版本中呈現(xiàn)為一個靜態(tài)的高亮區(qū)。

按鈕

大多數(shù)按鈕是由幾個畫板組成的。一般來說有一個按鍵，正常版本中有用的代碼如下：

/drawable/button.xml:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>
            <item android:drawable="@drawable/button_normal"/>
    </selector> 

為了得到你的連鎖反應，在 drawable-21 上重寫你的按鈕，在你的正常按鈕上添加一個連鎖反應效果。使用?android:colorControlHighlight可以使你添加的連鎖反應與應用程序中內(nèi)置的連鎖反應顏色一致。

/drawable-21/button.xml:

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="?android:colorControlHighlight">
            <item android:drawable="@drawable/button_normal" />
    </ripple>   

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/RippleDrawable.gif" alt="johnybot" />

如果你不喜歡默認的灰色，你可以指定在你的主題中colorControlHighlight的顏色。但是，對于這點我提出警示，因為它會偏離你應用程序的內(nèi)容，并且?guī)缀鯖]有 Google 設(shè)計的應用程序會這樣做。

可點擊的視圖

如果你有一個視圖，想給它添加一個連鎖反應，那么應該怎么做呢?一種常見的情況是有幾個可點擊的項目的 LinearLayout 。你可以用<ripple>元素創(chuàng)建自己的畫板，但是還有一種更簡單的方法。只需要給?attr/selectableItemBackground設(shè)置背景。

In XML:

    <View
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground" /> 
In code: 

    int[] attrs = new int[]{R.attr.selectableItemBackground};
    TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
    int backgroundResource = typedArray.getResourceId(0, 0);
    view.setBackgroundResource(backgroundResource);   

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/selectableItemBackground.gif" alt="hootsuite" />

如果你想使連鎖反應來擴展之前的視圖的邊界，那么你就可以使用 ?attr/selectableItemBackgroundBorderless。它與 ImageButtons 和部分大視圖的較小的 Buttons 能很好的兼容。

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/selectableItemBackgroundBorderless.gif" alt="Material" />

帶有風格的對話框

當 AlertDialogs 和 ProgressDialogs 在 Lollipop 設(shè)備中運行時，AlertDialogs 和ProgressDialogs 與 material 設(shè)計應該自動顯示不幸的是,除非你手動改變它們，否則它們就會呈現(xiàn)為默認的藍綠色。如果你喜歡藍綠色，那么就這樣設(shè)置即可——但是我們可以很容易地使對話框與應用程序的主題相匹配。

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/DialogNew-300x148.png" alt="Material" />

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/ProgressOld-300x84.png" alt="Material" />

全部對話框

想讓你的按鈕適合你的主題非常簡單，只需要創(chuàng)建一個風格，然后將它添加到你的主題中。在AlertDialog 中的按鈕以及 ProgressDialog 中的 ProgressBar 的顏色是由 colorAccent 屬性決定的。

styles.xml:

    <style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/primary</item>
    </style> 

themes.xml: 

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="android:alertDialogTheme">@style/AlertDialogCustom</item>
    </style> 

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/DialogNew-300x148.png" alt="Material" />

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/ProgressNew-300x101.png" alt="Material" />

破壞性的對話框

當 Material設(shè)計指南 首次發(fā)布時，其中包括一個為破壞性對話框的單獨的設(shè)計。這個設(shè)計有一個紅色的按鈕，它是用來強調(diào)正在執(zhí)行的操作具有破壞性的。要想實現(xiàn)這一功能，你可以在你的對話框主題中重寫 buttonBarPositiveButtonStyle 屬性：

styles.xml:

    <style name="AlertDialogCustom.Destructive">
        <item name="android:buttonBarPositiveButtonStyle">@style/DestructiveButton</item>
    </style>

    style name="DestructiveButton"
            parent="android:Widget.DeviceDefault.Button.Borderless">
        <item name="android:textColor">@color/red</item>
    </style> 

想要為特定的 AlertDialog 使用這一風格，你需要在 AlertDialog.Builder 構(gòu)造函數(shù)中指定一個主題：

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/DialogDestructive-300x150.png" alt="Material" />

在每個平臺上的Material 對話框

如果你想讓你的對話框擁有跨所有 Android 版本的 Material 外觀，你需要自定義對話框風格或庫。我不喜歡白費力氣做重復工作，所以我建議使用一個可用的庫：

• https://github.com/afollestad/material-dialogs
• https://github.com/fengdai/AlertDialogPro/
• https://github.com/drakeet/MaterialDialog

導航制圖工具

瀏覽 Navigation Drawers 的 Material 設(shè)計部分，會為你設(shè)計 DrawerLayout 提供一個好的指南。它為得到一個基本的 Material 風格的制圖工具提供了所需要的圖紙?zhí)畛洹⑽谋敬笮∫约邦伾?/p>

文本顏色

指南指示，應為你選定的制圖工具項目使用主要顏色或者黑色。你可以檢測在代碼中哪個項目被選中了或者哪個項目改變了文本顏色，但是還有一種更簡單的方式。通過使用 ColorStateList ，就可以指定當文本被選中或沒被選中時的顏色。

color/menu_text.xml:

and in your layout file:

    <TextView
            android:id="@+id/menu_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/Text.Title"
            android:textColor="@color/menu_selector" /> 

圖標顏色

你也可以改變菜單圖標的顏色使之與文本匹配。如果你使用 v-21 或更高的版本，就可以簡單的設(shè)置 “android:tint” 屬性，使它與之前的 ColorStateList 相同。但是，當你使用 Material 支持庫時，你就需要更廣泛的方案來解決這個問題。

一個解決方案是每個圖像有兩個屬性，一個是選中，一個是未選中。這是一個不錯的解決方案，但是如果你想對圖片編輯軟件改變顏色或者得到一些使用經(jīng)驗，那么這兩個屬性都需要改變。一種編程的方法是通過 ColorFilter 來為你的圖標上色：

iconView.setColorFilter(getResources().getColor(R.color.primary_dark)); 

This Stack Overflow 向你展示了一種很好的方式來改變圖標顏色，它是基于其狀態(tài)，通過創(chuàng)建 ImageView 的一個子類實現(xiàn)的。你也可以重用你的 ColorStateList ，如使用 v-21 tint：

http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/DrawerHighlight-300x137.png" alt="Material" />

總結(jié)

讓你的應用程序遵循 Google 的 Material 設(shè)計指南基本方針并不是特別困難的。許多事情甚至都不需要設(shè)計師。有了這些基礎(chǔ)知識，你就可以學習更加復雜的概念，如 animation and elevation。

瀏覽 Hootsuite 的新的 Android 設(shè)計，現(xiàn)在在 Play Store 中可用。