AppCompat v21 — Android 5.0之前版本設備的Material Design實現

博客原文地址：http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html，要想打開，請翻牆。

 

Android 5.0 SDK在上周五發布，它以新的UI控件、材料設計-我們專注於良好設計的可視化語言為特色。為了能夠讓你把最新的設計應用到之前的Android平台上，我們擴展了我們的支持包，包括具有較大更新的AppCompat，同樣還有新的RecyclerView、CardView和Patette包。

 

AppCompat新特性

AppCompat(也叫ActionBarCompat)開始的時候是作為運行在Gingerbread上面的設備的Android 4.0 ActionBar API的相反移植，提供了緊接相反移植實現和框架實現的通用API層。 AppCompat v21交付了與Android 5.0一樣最新的API和特性集。

在本次發布中，Android引進了新的Toolbar控件。它是給了你更多可控性和靈活性的Action Bar模式的泛化。就像其它的一樣，在層次結構中，Toolbar只是一個視圖，但卻使得與其它視圖交錯、產生動畫效果和對滑動事件產生回應更加容易。你也可以把它設置為Activity的action bar，這意味着標准選項按鈕活動將展示在Toolbar里面。

最新更新的AppCompat，你可以已經在使用了一段時間，在過去幾周中，它已經包含在多種Google應用更新中，如Play Store, Play Newsstand。它也已經集成到Android應用Google I/O中，就像上面的圖片展示的那樣，當然，Google I/O是開源的。

設置

如果你在使用Gradle，那么請把AppCompat在你的build.gradle文件中作為一個依賴添加進去。

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

新整合

如果你當前沒在使用AppCompat，或者正要重頭開始，下面將告訴你如何設置：

1. 所有的Activity必須繼承自ActionBarActivity，當然，ActionBarActivity繼承自v4支持包中的FragmentActivity，這樣你就可以繼續使用fragment。
2. 所有的主題（想要使用Action Bar/Toolbar）必須繼承自Theme.AppCompat。其中有許多的變體可用，包括Light和NoActionBar。
3. 在Action Bar上填充展示任何東西（例如在toolbar中列表導航的SpinnerAdapter）時，確保使用action bar的特定主題context時，通過getSupportActionBar().getThemedContext()獲得。
4. 必須為MenuItem中的任何有關action的調用使用MenuItemCompat中的靜態方法。

想獲取更多信息，請查看Action Bar API入門，它是有關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+的所有Action Bar風格了。

定制主題

AppCompat支持新的調色板屬性，從而允許你可以輕易地自定義主題以通過primary和accent色彩來適配你的品牌。例如：

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>

當你設置這些屬性時，AppCompat自動擴散這些值到API 21+上面的框架屬性。它將自動地為狀態條和任務概覽着色。

在更老平台上，AppCompat在任何可能的地方模擬這種顏色主題。只是此時，為action bar和一些控件着色受到限制。

控件着色

運行在Android 5.0上的設備時，所有的控件都是通過剛剛討論過的顏色主題屬性着色。有兩個特性允許在Lollipop上進行控件着色：drawable着色和在drawable中引用主題屬性(如attr/foo的形式)。

1. AppCompat為之前Android版本的以下控件子集提供相似的行為：
2. AppCompat Toolbar提供的一切(action模式等)
3. EditText
4. Spinner
5. CheckBox
6. RadioButton
7. Switch（使用新的android.support.v7.widget.SwitchCompat）
8. CheckedTextView

為了使這些控件起作用，你不必做任何特別的事，只需要像往常一樣在布局中使用這些控制信息，AppCompat將會完成其余的事情。

Toolbar控件

AppCompat完全支持Toolbar而且，Toolbar擁有同行於框架控件的特性和API。在AppCompat中，Toolbar在android.support.v7.widget.Toolbar類中實現。有兩種方式使用Toolbar：

在想要使用業已存在的Action Bar設備但想要更多地控制界面時(如菜單填充和選擇，ActionBarDrawerToggle等等)，把Toolbar當Action Bar一樣使用。

對於Action Bar不支持的場景，當想要在應用中使用這種模式時，使用單獨的Toolbar；例如，在屏幕上展示多個工具條，懸跨部分寬度等等。

Action Bar

為了把Toolbar當Action Bar一樣使用，首先要禁用提供裝飾品的Action Bar。最簡單的方式是使用繼承自Theme.AppCompat.NoActionBar(或它的Light變體)的主題。

其次，通常通過布局文件創建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設置為你的Action Bar：

@Override

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.blah);



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

    setSupportActionBar(toolbar);

}

從這里之后，所有的菜單選項將會展示在Toolbar中，並通過標准選項菜單回調來產生之后的代碼。

脫機使用

脫機模式的不同在於不必設置Toolbar像Action Bar一樣活動。由此，可以使用任何AppCompat主題，且不必禁用提供裝飾的Action Bar。

在脫機模式下，需要手工地通過content/actions來產生Toolbar相關的代碼。例如，如果想要展示action，你需要在里面填充菜單：

@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，你可以做許多其它的事件。想要獲取更多的的信息，請參見Toolbar API。

定制風格

對於標准Action Bar，Toolbar的風格定制是完成的不一樣的，是直接設置在它的視圖上的。

當把Toolbar當Action Bar使用時，應用使用如下基本的風格：

<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聲明將確保文本和子項在使用solid色彩。

DarkActionBar

可以使用布局屬性來直接設置Toolbar實例的風格。為了獲取一個看起來像DarkActionBar(dark內容，light overflow menu)的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，它是可以高度自定義和風格設置化的。我們現在使用Lollipop風格結構而不是老的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”>

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

不必設置全部屬性，默認值對大多數應用起作用。

Toolbar即將到來……

我希望，這篇博客能夠幫助你站起來和AppCompat一直奔跑並鼓勵你創建優秀的材料設計風格的應用。如果你有任何有關AppCompat或者其它任何支持包的問題，請讓我們在G+/Twitter的評論或者我們能夠提供更多文檔的地方知道。