在低版本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

這里有個(gè)關(guān)于MaterialDesign的小例子。https://github.com/NashLegend/MaterialDesignTest。

這篇只是關(guān)于在低版本上使用的方法，更詳細(xì)的見(jiàn)下篇：如何在你的App中應(yīng)用Material Design設(shè)計(jì)風(fēng)格。

前排渣翻譯預(yù)警，如果你能提供更好更專業(yè)的翻譯或者提出修改意見(jiàn)就好了……

Android 5.0已經(jīng)發(fā)布，帶來(lái)了新的Material Design，這種新的設(shè)計(jì)語(yǔ)言提供了更好的視覺(jué)體驗(yàn)。為了使舊版本的Android系統(tǒng)也可以使用這種設(shè)計(jì)，我們擴(kuò)展了支持包，對(duì)其中的AppCompat進(jìn)行了重大更新，同時(shí)帶來(lái)了新的RecyclerVier,CardView以及Palette庫(kù)。

這篇文章中我們會(huì)介紹一下AppCompat發(fā)生了哪些新變化以及如何用它設(shè)計(jì)Material Design應(yīng)用.

What's new in AppCompat?

AppCompat（又叫ActionBarCompat）為4.0前的Android版本提供ActionBar后向兼容。而最新的AppCompat v21則可以提供Android 5.0特性支持。

在這個(gè)版本中，Android引入了新的 ToolBar控件。類似于ActionBar,但是提供了更多的控制權(quán)和靈活性。ToolBar就像其他的普通控件一樣，因此你可以容易地對(duì)其布局、執(zhí)行動(dòng)畫以及與滾動(dòng)事件交互。你也可以把它設(shè)置成你的Activity的ActionBar——就和原先的ActionBar一樣使用。

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

下面是如何使用它

開(kāi)始使用

如果你使用Gradle，把a(bǔ)ppcompat加入到依賴庫(kù)。修改你的build.gradle：

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

如果你的App首次使用AppCompat

如果你沒(méi)用過(guò)AppCompat，那么下面教給你：

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

• 所有theme必須繼承Theme.AppCompat——這個(gè)主題包含一些不同的子主題，比如Light和NoActionBar。

• 如果你要inflate一些元素（比如說(shuō)一個(gè)列表）以展示在ActionBar上的話，請(qǐng)確保你使用的是ActionBar的themed context——使用getSupportActionBar().getThemedContext()方法獲得這個(gè)context。

• 對(duì)MenuItem進(jìn)行相關(guān)操作時(shí)，必須MenuItemCompat的靜態(tài)方法

For more information, see the Action Bar API guide which is a comprehensive guide on AppCompat. 欲知更多更深入的知識(shí)，請(qǐng)看 ActionBar指南

如果你的App之前就使用AppCompat

對(duì)于大多數(shù)的應(yīng)用來(lái)說(shuō)，你只要在values/里聲明一個(gè)主題就可以了：

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樣式移除了。

設(shè)置主題

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已經(jīng)支持新的color palette theme屬性，使用這些屬性，你可以很輕易地講你的應(yīng)用色調(diào)與primary and accent colors搭配。舉個(gè)栗子：

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以上系統(tǒng)上，設(shè)置了上面這些后，跟使用了Material主題一樣了，你不必單獨(dú)設(shè)置Material主題，它會(huì)自動(dòng)修改狀態(tài)欄、最近運(yùn)行屏幕等的顏色。

而在早期版本中，AppCompat會(huì)盡可能的模擬Material色彩主題。現(xiàn)階段時(shí)能作用于ActionBar和某些組件上——也就是說(shuō)，對(duì)于以前版本的Android系統(tǒng)來(lái)說(shuō)，就算使用了AppCompat也不可能實(shí)現(xiàn)所有的Android 5.0樣式。

Widget著色（Widget tinting）

當(dāng)設(shè)備的版本在Android 5.0以上時(shí)，所有的組件都會(huì)使用我們剛才設(shè)置的主題顏色進(jìn)行著色，這是因?yàn)锳ndroid 5.0支持正面這兩種特性（5.0之前系統(tǒng)的悲?。?em>drawable著色（drawable tinting）和在drawable中引用主題屬性(使用?attr/xxx方式)。

對(duì)于早期版本的Android系統(tǒng)，AppCompat為下列UI組件提供了類似的行為。

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

• EditText

• Spinner

• CheckBox

• RadioButton

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

• CheckedTextView

AppCompat會(huì)幫助你實(shí)現(xiàn)這些行為，你完全不需要插手（有些要注意的地方，看下面的FAQ）。

Toolbar組件

AppCompat支持完全特性的Toolbar組件——android.support.v7.widget.Toolbar——和Android5.0系統(tǒng)的Toolbar完全一樣。要兩種使用ToolBar的方式：

• 如果你想要使用現(xiàn)有的ActionBar功能（比如使用菜單、ActionBarDrawerToggle等等）同時(shí)又想自己掌握它的樣式，那么你可以把ToolBar用作ActionBar。

• 對(duì)于一些ActionBar所不支持的場(chǎng)景——比如說(shuō)在同一屏幕上使用多個(gè)ToolBar、使用低于屏幕寬度的尺寸的ToolBar等等（看上圖就知道了）——你就要使用ToolBar了。

Action Bar

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

然后創(chuàng)建一個(gè)ToolBar實(shí)例，通常是寫在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只是一個(gè)ViewGroup，因此你可以任意定義它的樣式的位置。

然后在Activity里面將ToolBar設(shè)置為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就會(huì)顯示在ToolBar上了。

Standalone

standalone模式與actionbar模式的不同是你不必setSupportActionBar了，把它當(dāng)一個(gè)普通組件看待就好，也不必非得把ActionBar給禁用了。

standalone模式下，你就得手動(dòng)設(shè)置ToolBar的內(nèi)容和動(dòng)作了。比如說(shuō)，如果你想讓它顯示一個(gè)動(dòng)作按鈕（就像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還支持很多其他功能，欲知更多，請(qǐng)查看它的API。

Styling

ToolBar的樣式的設(shè)置方式和標(biāo)準(zhǔn)的ActionBar是不一樣的，ToolBar的樣式是直接設(shè)置在這個(gè)View上的。

下面是一個(gè)要作為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。

你也可以直接通過(guò)而已屬性設(shè)置ToolBar的Style。要得到一個(gè)看起來(lái)像'DarkActionBar'（深色內(nèi)容、淺色菜單）樣式的ToolBar,可以像下面設(shè)置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，使其具有更強(qiáng)的可定制性（此處應(yīng)該有掌聲）.

你應(yīng)該這樣定義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>

你不必設(shè)置所有上面的屬性，甚至一個(gè)都不設(shè)置也行，默認(rèn)的就很不錯(cuò)。

結(jié)語(yǔ)

希望這篇文章能讓你學(xué)會(huì)使用AppCompat并開(kāi)發(fā)出牛逼的Material Design風(fēng)格的app。

FAQ

為啥我的老Android系統(tǒng)上的EditText（或者上面提到的支持的控件）長(zhǎng)得不像Material風(fēng)格呢？

AppCompat的工作原理是攔截layout inflation并且在對(duì)應(yīng)的位置插件一個(gè)特殊的可使用Material樣式的組件（tint-aware version of the widget）來(lái)實(shí)現(xiàn)的。對(duì)于大部分人來(lái)說(shuō)這應(yīng)該沒(méi)啥問(wèn)題，但是下面幾種情況有可能導(dǎo)致一些問(wèn)題：

• 你使用自己的自定義的widget（比如使用的自定義的繼承了EditText的類）。

• 你創(chuàng)建EditText的時(shí)候沒(méi)有給它LayoutInflater（比如直接New EditText()）

這些特殊的組件目前被我們藏起來(lái)了，因?yàn)檫€沒(méi)有完全做完。以后可能會(huì)好點(diǎn)……

為何某某組件在我的老Android系統(tǒng)上長(zhǎng)得不像Material風(fēng)格?

目前AppCompat只支持常用的組件的Material主題，其他的以后會(huì)有的。

為啥我的ActionBar在Android 5.0上的陰影，我已經(jīng)把a(bǔ)ndroid:windowContentOverlay設(shè)置為null了啊？

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

為啥我的老版本Android沒(méi)有波紋效果？

這東西只有用Android 5.0最新的RenderThread才能跑流暢，為了不讓你卡出翔，我們現(xiàn)在還是先不給老版本支持這玩意兒。

我使用了AppCompat后還能用Preference么？

在API v11+版本的機(jī)器上，你仍然可以在ActionBarActivity中使用PreferenceFragment。對(duì)于更老的老爺機(jī)來(lái)說(shuō)，你只能使用普通的非Material樣式的PreferenceActivity。