在低版本Android上使用Material Design

譯自http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html—— By NashLegend

原譯文在個人github上：https://github.com/NashLegend/ProjectBabel/blob/master/Material%20Design%20for%20Pre-Lollipop%20Devices.md

這裏有個關於MaterialDesign的小例子。https://github.com/NashLegend/MaterialDesignTest。

這篇只是關於在低版本上使用的方法，更詳細的見下篇：如何在你的App中應用Material Design設計風格。

前排渣翻譯預警，若是你能提供更好更專業的翻譯或者提出修改意見就行了……

Android 5.0已經發布，帶來了新的Material Design，這種新的設計語言提供了更好的視覺體驗。爲了使舊版本的Android系統也可使用這種設計，咱們擴展了支持包，對其中的AppCompat進行了重大更新，同時帶來了新的RecyclerVier,CardView以及Palette庫。

這篇文章中咱們會介紹一下AppCompat發生了哪些新變化以及如何用它設計Material Design應用.

What's new in AppCompat?

AppCompat（又叫ActionBarCompat）爲4.0前的Android版本提供ActionBar後向兼容。而最新的AppCompat v21則能夠提供Android 5.0特性支持。

在這個版本中，Android引入了新的 ToolBar控件。相似於ActionBar,可是提供了更多的控制權和靈活性。ToolBar就像其餘的普通控件同樣，所以你能夠容易地對其佈局、執行動畫以及與滾動事件交互。你也能夠把它設置成你的Activity的ActionBar——就和原先的ActionBar同樣使用。

最新的AppCompat包含了多種Meterial Design樣式更新。好比Google I/O 2014應用就使用了這些東東.

下面是如何使用它

開始使用

若是你使用Gradle，把appcompat加入到依賴庫。修改你的build.gradle：

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

若是你的App首次使用AppCompat

若是你沒用過AppCompat，那麼下面教給你：

• 全部的Activity必須繼承ActionBarActivity，ActionBarActivity繼承自v4包的FragmentActivity，所以你仍然可使用Fragment.

• 全部theme必須繼承Theme.AppCompat——這個主題包含一些不一樣的子主題，好比Light和NoActionBar。

• 若是你要inflate一些元素（好比說一個列表）以展現在ActionBar上的話，請確保你使用的是ActionBar的themed context——使用getSupportActionBar().getThemedContext()方法得到這個context。

• 對MenuItem進行相關操做時，必須MenuItemCompat的靜態方法

For more information, see the Action Bar API guide which is a comprehensive guide on AppCompat. 欲知更多更深刻的知識，請看 ActionBar指南

若是你的App以前就使用AppCompat

對於大多數的應用來講，你只要在values/裏聲明一個主題就能夠了：

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- Set AppCompat’s actionBarStyle -->
    <item name="actionBarStyle">@style/MyActionBarStyle</item>

    <!-- Set 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>

完了你就能夠把values-v14+的ActionBar樣式移除了。

設置主題

AppCompat has support for the new color palette theme attributes which allow you to easily customize your theme to fit your brand with primary and accent colors. For example: AppCompat已經支持新的color palette theme屬性，使用這些屬性，你能夠很輕易地講你的應用色調與primary and accent colors搭配。舉個栗子：

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, and colorSwitchThumbNormal. -->
</style>

在Android 5.0以上系統上，設置了上面這些後，跟使用了Material主題同樣了，你沒必要單獨設置Material主題，它會自動修改狀態欄、最近運行屏幕等的顏色。

而在早期版本中，AppCompat會盡量的模擬Material色彩主題。現階段時能做用於ActionBar和某些組件上——也就是說，對於之前版本的Android系統來講，就算使用了AppCompat也不可能實現全部的Android 5.0樣式。

Widget着色（Widget tinting）

當設備的版本在Android 5.0以上時，全部的組件都會使用咱們剛纔設置的主題顏色進行着色，這是由於Android 5.0支持正面這兩種特性（5.0以前系統的悲劇）：drawable着色（drawable tinting）和在drawable中引用主題屬性(使用?attr/xxx方式)。

對於早期版本的Android系統，AppCompat爲下列UI組件提供了相似的行爲。

• AppCompat’s toolbar中的一切 (action modes等等)

• EditText

• Spinner

• CheckBox

• RadioButton

• Switch (要使用新的android.support.v7.widget.SwitchCompat)

• CheckedTextView

AppCompat會幫助你實現這些行爲，你徹底不須要插手（有些要注意的地方，看下面的FAQ）。

Toolbar組件

AppCompat支持徹底特性的Toolbar組件——android.support.v7.widget.Toolbar——和Android5.0系統的Toolbar徹底同樣。要兩種使用ToolBar的方式：

• 若是你想要使用現有的ActionBar功能（好比使用菜單、ActionBarDrawerToggle等等）同時又想本身掌握它的樣式，那麼你能夠把ToolBar用做ActionBar。

• 對於一些ActionBar所不支持的場景——好比說在同一屏幕上使用多個ToolBar、使用低於屏幕寬度的尺寸的ToolBar等等（看上圖就知道了）——你就要使用ToolBar了。

Action Bar

要將ToolBar用做ActionBar，首先要禁用系統ActionBar，最方便的方式是使用Theme.AppCompat.NoActionBar主題（或者light版的NoActionBar）.

而後建立一個ToolBar實例，一般是寫在XML裏。

<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裏面將ToolBar設置爲ActionBar就好了：

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.blah);

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);
}

而後options menu就會顯示在ToolBar上了。

Standalone

standalone模式與actionbar模式的不一樣是你沒必要setSupportActionBar了，把它當一個普通組件看待就好，也沒必要非得把ActionBar給禁用了。

standalone模式下，你就得手動設置ToolBar的內容和動做了。好比說，若是你想讓它顯示一個動做按鈕（就像Actoinbar同樣，但不是actionbar模式），你能夠這麼作：

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.blah);

    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還支持不少其餘功能，欲知更多，請查看它的API。

Styling

ToolBar的樣式的設置方式和標準的ActionBar是不同的，ToolBar的樣式是直接設置在這個View上的。

下面是一個要做爲ActionBar使用的ToolBar的基本樣式。

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

app:theme能夠確保你的文本的裏面的items使用solid colors。

DarkActionBar

你也能夠直接經過而已屬性設置ToolBar的Style。要獲得一個看起來像'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 Widget

AppCompat提供了最新與Lollipop同樣的SearchView樣式和API，使其具備更強的可定製性（此處應該有掌聲）.

你應該這樣定義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」>
    <!-- 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>

你沒必要設置全部上面的屬性，甚至一個都不設置也行，默認的就很不錯。

結語

但願這篇文章能讓你學會使用AppCompat並開發出牛逼的Material Design風格的app。

FAQ

爲啥個人老Android系統上的EditText（或者上面提到的支持的控件）長得不像Material風格呢？

AppCompat的工做原理是攔截layout inflation而且在對應的位置插件一個特殊的可以使用Material樣式的組件（tint-aware version of the widget）來實現的。對於大部分人來講這應該沒啥問題，可是下面幾種狀況有可能致使一些問題：

• 你使用本身的自定義的widget（好比使用的自定義的繼承了EditText的類）。

• 你建立EditText的時候沒有給它LayoutInflater（好比直接New EditText()）

這些特殊的組件目前被咱們藏起來了，由於尚未徹底作完。之後可能會好點……

爲什麼某某組件在個人老Android系統上長得不像Material風格?

目前AppCompat只支持經常使用的組件的Material主題，其餘的之後會有的。

爲啥個人ActionBar在Android 5.0上的陰影，我已經把android:windowContentOverlay設置爲null了啊？

Android 5.0上，ActionBar的陰影是由最新的elevation API提供的。若是不想要它，可使用getSupportActionBar().setElevation(0)方法，或者在Action Bar style裏面修改elevation屬性。

爲啥個人老版本Android沒有波紋效果？

這東西只有用Android 5.0最新的RenderThread才能跑流暢，爲了避免讓你卡出翔，咱們如今仍是先不給老版本支持這玩意兒。

我使用了AppCompat後還能用Preference麼？

在API v11+版本的機器上，你仍然能夠在ActionBarActivity中使用PreferenceFragment。對於更老的老爺機來講，你只能使用普通的非Material樣式的PreferenceActivity。