Material Design開發文章系列1：AppCompat V21：將 Materia Design 兼容到于5.0之前的設備

doem7186 8年前發布 | 30K 次閱讀 Android開發移動開發

----------------------------系列文章概要---------------------------------------

Material Design出現之后國外網站上出現和很多關于Material Design的設計與開發文章，有很多是重復的，google官方博客將這些文章搜集整理成了幾篇比較經典的文章，我認為對于開發者來講，只需要知道其中三篇就能掌握絕大多數知識了。這三篇文章的原文地址分別是（當然KX上網是必須的）：

http://android-developers.blogspot.hk/2014/10/appcompat-v21-material-design-for-pre.html

http://android-developers.blogspot.hk/2014/10/implementing-material-design-in-your.html

http://android-developers.blogspot.hk/2014/10/material-design-on-android-checklist.html

還好這三篇文章都被翻譯了出來，而且還算是比較優質的翻譯。后兩篇主要從整體設計介紹了一個標準的Material Design的App應該遵循哪些設計標準，并告訴你如何在你的代碼中實現，并介紹了如何向前兼容。其實后兩篇在整體結構上是差不多的，只是在Implementing material design in your Android app中，側重的是Material Design的設計標準，而Material Design on Android Checklist則側重的是實現細節和注意事項.

其余兩篇譯文非別是：

Material Design開發文章系列2：在你的App中實現Material Design

Material Design開發文章系列3:Material Design Check List

-------------------------------------------------------------------------

正文

Material Design開發文章系列-：AppCompat V21：將 Materia Design 兼容到于5.0之前的設備

android 5.0今天發布。在很多很棒的更新中，包括了新的UI組件和創建 Material Design 主題的能力。為了使你能夠將新的設計中更新到舊的系統中，

我們同時更新了包含 AppCompat 的support libraries。在這篇文章中，我將總體說明一下appCompat的新特性并介紹一下如何應用于你的app中。

AppCompat (aka ActionBarCompat)是為了Android 4.0中的ActionBar的向后兼容到 Gingerbread（2.3）系統。在兼容性實現和
Framework實現的上層提供了一個通用的API層。這個最新的 21Version appcompat 提供一些5.0的API和特性設置。

Android5.0引入了一個新的ToolBar widget，這是一個ActionBar模式的衍生，但為你的使用提供了更多的控制和便利性。

Toolbar 和你的View層級關系中的其它View一樣。但它使得界面更容易的與其它部分交互，比如View，動畫，Scroll事件的響應。

添加依賴

如果你正在使用Gradle，只要把appcompat作為一個依賴庫添加到你的build.gradle中即可。

dependencies {
    ...
    compile "com.android.support:appcompat-v7:21.0.0"
}

新的集成

如果你現在沒有使用AppCompat，或者完全是從頭開始，請參考下面幾個步驟：
1.所有的Activities都必須繼承自ActionBarActivity，它繼承自v4包的FragmentActivity，因此你可以繼續使用fragments。
2.所有的主題必須繼承Theme.AppCompat. 這里有一些變量，包括Light和NoActionBar。
3.當你要通過ActionBar來展示任何東西的時候（比如用于List導航的SpinnerAdapter），請確保你使用了ActionBar的主題上下文，你可以通過
getSupportActionBar().getThemedContext().來獲取。
4.對于所有的MenuItem action的調用，你必須使用靜態方法MenuItemCompat。

ActionBar API 指南（http://developer.android.com/guide/topics/ui/actionbar.html）是一個AppCompat的綜合的介紹。但也需要更新到 21 版本。只要忽略底部的“Example theme”，它提到了你應該設置為每一個ActionBar設置兩個版本的style屬性。

從之前的創建中遷移

如果你早已擁有了AppCompat的搭建，緊接著這里會介紹如何使用新的特性去更新你的主題。

我們現在在所有的版本上支持Toobar/ActionBar的實現。意味著你在ActionBar中將再也看不到任何的android:屬性。（過去為了兼容都需要設置兩個屬性，一個要帶android:的，一個不帶）對于那些已經使用AppCompat的app創建，意味著你應該重新設置那些在Android name space 中重置的V14+的主題。

請注意，這些僅僅用于那些影響到ActionBar的屬性。

對于大多數的App，你應該需要在values中添加一個主題的聲明：values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- Here we setting appcompat’s actionBarStyle -->
    <item name="actionBarStyle">@style/MyActionBarStyle</item>
    <!-- ...and here we setting appcompat’s color theming attrs -->
    <item name="colorPrimary">@color/my_awesome_red</item>
    <item name="colorPrimaryDark">@color/my_awesome_darker_red</item>
    <!-- The rest of your attributes -->
</style>

主題
AppCompat已經支持了新的color palette主題屬性（http://developer.android.com/training/material/theme.html#ColorPalette），這將允許你更簡單的通過一個主要及基本色調(http://www.google.com/design/spec/style/color.html#color-ui-color-application) 去自定義主題去適應你的品牌。
示例：values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/my_awesome_color</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/my_awesome_darker_color</item>
    <!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
    <item name="colorAccent">@color/accent</item>
    <!-- You can also set colorControlNormal, colorControlActivated
     colorControlHighlight & colorSwitchThumbNormal. -->
</style>

在 API21+ 上，通過設置這些，AppCompat將會自動的將這些值傳遞到framework的屬性中。會自動填充狀態欄和最近的任務項的顏色。
在老的系統平臺上，AppCompat會在需要的地方模擬顏色主題。現在，對于ActionBar和一些widget的著色將會受到限制。

Widget 著色（Widget Tinting）

當運行在5.0的設備上，所有的widget將會使用我們剛才討論的 color theme 屬性著色。
在Lollipop上，有兩種主要的特性是被允許的: drawabel著色和在drawables中引用主題的屬性。
AppCompat為在老的系統的 UI widget的子集提供了相似的表現行為：

所有的東西都由 AppCompat的 toolbar提供
EditText
Spinner
CheckBox
RadioButton
Switch（使用supportV7中的SwitchCompat， https://developer.android.com/reference/android/support/v7/widget/SwitchCompat.html）

CheckedTextView

你不需要做任何特殊的工作，只需像以前一樣在你的布局中使用這些控制并且AppCompat會為你做剩下的工作（請看FAQ）。

Widgets

ToolBar

首先，在AppCompat中ToolBar被很好的支持，并且擁有過去Framework Widget中的所有API。
你需要通過 android.support.v7.widget.Toolbar （https://developer.android.com/reference/android/support/v7/widget/Toolbar.html）使用它。

這里有兩種方式使用ToolBar：

1.將ToolBar作為ActionBar來使用當你ActionBar的功能一些基本功能,（比如menu 填充和selection，ActionBarDrawerToggle等），

但還不能夠滿足你的需求的時候。

2.ToolBar作為獨立使用。在以下場景中：

不支持ActionBar的情況、在同一個屏幕中使用多個toolbar的情況。

Action Bar
當把ToolBar作為ActionBar使用的時候，第一件事就是去禁用 Decor 提供ActionBar的功能。最簡單的方式是繼承 Theme.AppCompat.NoActionBar主題，其次，你需要創建一個ToolBar實例，通常由布局文件來設置：

<android.support.v7.widget.Toolbar
     android:id="@+id/my_awesome_toolbar"
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:minHeight="?attr/actionBarSize"
     android:background="?attr/colorPrimary" />

寬、高，背景等等，完全由你來控制，這些只是示例。由于ToolBar只是一個ViewGroup,你可以添加任何樣式并放在任何位置。
接著在你的Activity或者Fragment中設置這個ToolBar作為ActionBar使用。

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_layout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
        setSupportActionBar(toolbar);
    }

所有的menu 條目將會在你的ToolBar中展示，通過標準的options menu進行回調。
基于上述幾點，所有的menu 條目將被展示在你的ToolBar中，通過標準的menu回調。

Standalone（單獨使用）

和上面很類似，但是在這種模式下，你不用去設置ToolBar作為ActionBar使用。由于這個原因，你可以使用任何AppCompat主題并且你不需要禁用decor提供的ActionBar。

當它被獨立使用的時候，你需要通過content/actions手動的填充ToolBar、比如，如果你想它展示一些actions,你需要填充一個menu進去。

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.my_layout);
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    // Set an OnMenuItemClickListener to handle menu item clicks
    toolbar.setOnMenuItemClickListener(
        new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            // Handle the menu item
            return true;
        }
    });
    // Inflate a menu to be displayed in the toolbar
    toolbar.inflateMenu(R.menu.your_toolbar_menu);
}

ToolBar還可以做很多事情，具體的可以參考文檔：https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

Styling

ToolBar的樣式與標準的ActionBar是不一樣的。它是被直接設置到View上的。

一個常被開發者問到的問題是，如何實現一個看起來像DarkActionBar的Toolbar（深色的內容，亮色的覆蓋在上層的菜單）（這應該是側邊欄滑出時的那種效果），這樣的樣式可以通過提供theme和popupTheme屬性實現：

<android.support.v7.widget.Toolbar
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="@dimen/triple_height_toolbar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

很明顯的，背景，高度，可以由你任意設置，上面只是建議。

SearchView
AppCompat提供了Lollipop中的SearchView API的更新，它們會變得更加可定制和樣式多樣化。基于這些，我們現在使用 L 樣式結構代替舊的SearchView主題屬性：
下面展示了如何改變SearchView 的樣式：

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat">
    <item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
    <!-- The layout for the search view. Be careful. -->
    <item name="layout">...</item>
    <!-- Background for the search query section (e.g. EditText) -->
    <item name="queryBackground">...</item>
    <!-- Background for the actions section (e.g. voice, submit) -->
    <item name="submitBackground">...</item>
    <!-- Close button icon -->
    <item name="closeIcon">...</item>
    <!-- Search button icon -->
    <item name="searchIcon">...</item>
    <!-- Go/commit button icon -->
    <item name="goIcon">...</item>
    <!-- Voice search button icon -->
    <item name="voiceIcon">...</item>
    <!-- Commit icon shown in the query suggestion row -->
    <item name="commitIcon">...</item>
    <!-- Layout for query suggestion rows -->
    <item name="suggestionRowLayout">...</item>
</style>

很顯然，你不需要去設置上面的所有屬性，缺省的就已經可以滿足大多數App了。

希望這篇文章可以幫助你構建一個基于AppCompat，更加完美，Materia Desigh 的App，如果有任何AppCompat或者support libraries的使用問題，你可以通過G+/推ter來告知我們，我們將會提供更多的文檔。

常見問題：

為什么EditText（或者其它的Widget List）在Lollipop之前的系統上沒有被著色。
在AppCompat中 Widget 的著色原理是：
通過攔截任何布局填充并且插入一個特殊的 tint-aware版本的Widget到它的位置上。對于大多數人，是可以生效的，但我也考慮到了幾種未生效的場景：

你已經擁有自定義版本的Widget（比如，你繼承了EditText）

你通過一個LayoutInflater去創建了一個EditText（比如你調用new EditText）

你正在與LayoutInflater的Factory正關聯著。

這個特殊的 tint aware Widget 已經被隱藏了，因為它們是一個未完成的實現（這里不太明白是什么意思）。

Google Iosched

相信很多人對這個項目都不會陌生，開源有一段時間了，關鍵的是隨著5.0正式版的推出，它立即向5.0之前的系統做了兼容，相信以后還會持續更新GitHub地址：https://github.com/google/iosched 在我的微盤下提供了一個APK，大家可以先看一下，當然還是希望大家clone源碼，仔細研究下，很不錯的項目，下載地址：http://vdisk.weibo.com/s/av06eFs1kWSeE?from=page_100505_profile&wvr=6 ,如果沒有使用數據，微盤下的另一個Apk或許可以幫到你哦。下面是幾張截圖，交互很棒，趕緊下載源碼去看實現吧，還有個項目也可以關注下：https://github.com/antoniolg/MaterialEverywhere,看名字就知道了