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