Material適配1 - 入門篇

隨著Material Design的普及，很多開發(fā)人員都會面臨App的Material適配。如果你的App不只是針對5.0以上設(shè)備的話（多數(shù)情況也必須做兼容）， 那么下面的經(jīng)驗(yàn)總結(jié)將會對你有所幫助。
當(dāng)然，有些公司的App不會改成Material Design，但如果你以前使用AppCompatV7的話，升級到21后，你必然面臨和以前不一樣的使用方式，了解新的方式也是必須的。

言歸正傳，官方給我們的適配方案是AppCompatV7，新發(fā)布的22.1.1適配包相對于22又進(jìn)行了較大的改動，同時(shí)對Material適配更加強(qiáng)大，因此本文主要介紹基于22.1.1版本的適配流程。

開始使用

compile 'com.android.support:appcompat-v7:22.1.1'

這里需要說明的是使用19、20及其以下版本仍然是Holo風(fēng)格，
使用21和22版本都會有Material的效果。

Theme介紹

引用完庫之后，首先要面對的是配置主題。否則如果你以前使用AppCompat的話，運(yùn)行之后會發(fā)現(xiàn)App慘不忍睹。

分類

Theme主要有以下幾種分類：

  • Theme.AppCompat （dark version)
  • Theme.AppCompat.Light (light version)
  • Theme.AppCompat.Light.DarkActionBar

如果以前使用ActionBar Holo風(fēng)格時(shí)使用的就是AppCompat，那么這些地方是不需要更改的。

注： Material下的ActionBar會比之前更大，這點(diǎn)可在之后的ActionMode討論中看到。

配置

Theme配置和原先有些不一樣，配置示例如下：

<style name="Theme.App" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="colorPrimary">@color/theme_primary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="colorPrimaryDark">@color/theme_primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="colorAccent">@color/theme_color_accent</item>
</style>

先上官方解釋圖：

ThemeColor
ThemeColor

圖上的各參數(shù)都可以直接配置到主題中生效。其中colorPrimaryDark僅在Lollipop以上機(jī)器生效。

colorAccent解析

colorAccent會改變光標(biāo)顏色、checkbox背景色等。
基本上可以理解為控件的主色調(diào)。

以Checkbox為例：
官方默認(rèn)是綠色的

colorAccent_green
colorAccent_green

改變colorAccent為藍(lán)色后

colorAccent_blue
colorAccent_blue

自定義Status Bar (Lollipop以上設(shè)備)

Material可以讓你輕松訂制Staus Bar。

  • 可以使Theme中的android:statusBarColor屬性來改變，默認(rèn)從android:colorPrimaryDark中獲取。
  • 代碼設(shè)置： Window.setStatusBarColor()

常見錯(cuò)誤

現(xiàn)在AppCompat對窗口主題的flag要求更嚴(yán)格。
主要原因是為了支持Dialog，大量使用了 AppCompat 之前并沒有重視的 windowNoTitle 標(biāo)志。

升級到v22.1.0以后（包括本文講述的22.1.1），你可能遇到下面的異常：

Caused by: java.lang.IllegalArgumentException: AppCompat does not support the current theme features
        at android.support.v7.app.AppCompatDelegateImplV7.ensureSubDecor(AppCompatDelegateImplV7.java:360)
        at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:246)
        at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:106)

解決辦法有兩種：

  • 最簡單的是使用 Theme.AppCompat.NoActionBar 作為 parent theme，這樣就會一直正常。

  • 如果不能這樣做(或許你需要同時(shí)支持ActionBar和NoActionBar,其實(shí)也可以通過第一種方式來解決，可能colorPrimary之類的需要多配置一遍)，
    你可以采用：

    <style name="MyTheme" parent="Theme.AppCompat">
    ...
</style>

<style name="MyTheme.NoActionBar" parent="MyTheme">
    <!-- Both of these are needed -->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

AppCompatActivity使用

最新的22.1.1版本，ActionBarActivity已經(jīng)廢棄。開始采用AppCompatActivity。
如果你以前使用的是ActionBarActivity，建議替換掉，不需要更改其他代碼。

（特別重要的AppCompatDelegate登場，具體代碼可以查看AppCompatActivity實(shí)現(xiàn)，這里可以簡單替換下快速適配，其實(shí)一般情況下也不需要自己來寫AppCompatDelegate）

OK，到這里，其實(shí)你的App差不多就能正常運(yùn)行了，只是有些細(xì)節(jié)方面還需要繼續(xù)完善。
你可能已經(jīng)注意到你的Dialog還不是Material風(fēng)格，那么我們繼續(xù)來看Dialog。

AppCompatDialog

AppCompat之前的21、22版本都沒有實(shí)現(xiàn)Material Dialog。 在22.1.x發(fā)布時(shí)，這個(gè)問題終于解決了。

AppCompatDialog是AppCompat themed Dialog的 Base class.
目前他的子類只有AlertDialog，但已經(jīng)足夠使用。

使用方式也很簡單，直接將AlertDialog改為android.support.v7.app包下的AlertDialog即可。
其他使用方式一樣，不需要做任何改動。

Preference

官方至今沒有做到完全的適配。
對比圖：
4.x設(shè)備上

preference_4.x
preference_4.x

5.x設(shè)備上

preference_5.x
preference_5.x

可以看到PreferenceCategory和Preference在4.x設(shè)備上底部都有橫線，5.x設(shè)備上都沒有。
也可以看到CheckBoxPreference是已經(jīng)適配了的。

為了能讓Preference適配的更加徹底，推薦下常用的第三方適配庫： Android-MaterialPreference

但是作者并沒有去寫DialogPreference一類的，比如常見的ListPreference。
其實(shí)這里是有解決辦法的。上面已經(jīng)寫到了新版的AlertDialog，配合How can I change the appearance of ListPreference Dialog 這篇帖子，就不難實(shí)現(xiàn)。
但也可以看到有人討論了Material規(guī)范中提到的實(shí)現(xiàn)方式，當(dāng)然也有人根據(jù)Google規(guī)范進(jìn)行了實(shí)現(xiàn)，這里可以根據(jù)需求來自行選擇實(shí)現(xiàn)方式。

關(guān)于Preference需要說明的是：

  • 如果app是針對11以上的，推薦使用AppCompatActivity和PreferenceFragment來實(shí)現(xiàn)。
  • 如果兼容更早的版本，需要借助AppCompatDelegate來實(shí)現(xiàn)，Google的示例代碼：AppCompatPreferenceActivity.java 
/*
 * Copyright (C) 2014 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.example.android.supportv7.app;
import android.content.res.Configuration;
import android.os.Bundle;
import android.preference.PreferenceActivity;
import android.support.annotation.LayoutRes;
import android.support.annotation.Nullable;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatDelegate;
import android.support.v7.widget.Toolbar;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * A {@link android.preference.PreferenceActivity} which implements and proxies the necessary calls
 * to be used with AppCompat.
 *
 * This technique can be used with an {@link android.app.Activity} class, not just
 * {@link android.preference.PreferenceActivity}.
 */
public abstract class AppCompatPreferenceActivity extends PreferenceActivity {
    private AppCompatDelegate mDelegate;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getDelegate().installViewFactory();
        getDelegate().onCreate(savedInstanceState);
        super.onCreate(savedInstanceState);
    }
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        getDelegate().onPostCreate(savedInstanceState);
    }
    public ActionBar getSupportActionBar() {
        return getDelegate().getSupportActionBar();
    }
    public void setSupportActionBar(@Nullable Toolbar toolbar) {
        getDelegate().setSupportActionBar(toolbar);
    }
    @Override
    public MenuInflater getMenuInflater() {
        return getDelegate().getMenuInflater();
    }
    @Override
    public void setContentView(@LayoutRes int layoutResID) {
        getDelegate().setContentView(layoutResID);
    }
    @Override
    public void setContentView(View view) {
        getDelegate().setContentView(view);
    }
    @Override
    public void setContentView(View view, ViewGroup.LayoutParams params) {
        getDelegate().setContentView(view, params);
    }
    @Override
    public void addContentView(View view, ViewGroup.LayoutParams params) {
        getDelegate().addContentView(view, params);
    }
    @Override
    protected void onPostResume() {
        super.onPostResume();
        getDelegate().onPostResume();
    }
    @Override
    protected void onTitleChanged(CharSequence title, int color) {
        super.onTitleChanged(title, color);
        getDelegate().setTitle(title);
    }
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        getDelegate().onConfigurationChanged(newConfig);
    }
    @Override
    protected void onStop() {
        super.onStop();
        getDelegate().onStop();
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        getDelegate().onDestroy();
    }
    public void invalidateOptionsMenu() {
        getDelegate().invalidateOptionsMenu();
    }
    private AppCompatDelegate getDelegate() {
        if (mDelegate == null) {
            mDelegate = AppCompatDelegate.create(this, null);
        }
        return mDelegate;
    }
}

Material中還有一個(gè)重要的特性是陰影的設(shè)置和波紋效果的實(shí)現(xiàn)，這里來粗略說明一下：

Elevation - 設(shè)置陰影

v21以后在View的xml中使用android:elevation屬性，或者在代碼中使用View的setElevation()方法。

兼容老版的陰影策略

還是需要使用.9圖片的陰影來做。

注： ViewCompat.setElevation() sadly doesn't apply shadows in pre-Lollipop.

RippleDrawable - 波紋效果

使用已經(jīng)提供好的

  • ?android:attr/selectableItemBackground
    擴(kuò)散到View邊界
  • ?android:attr/selectableItemBackgroundBorderless
    設(shè)置后，會從孩子往父親找一個(gè)依附的色。如果View往上找的時(shí)候，親生父親沒背景色，會繼續(xù)向上查找直到最頂端。找到了最頂端的爺爺，這個(gè)時(shí)候才繪制。
    然而，如果父親的兄弟又繪制了顏色，且蓋住了最頂端的繪制，會導(dǎo)致看不到效果。如果有一定的透明度，結(jié)果就顯而易見了。
    特別注意：
    • 當(dāng)把硬件加速給關(guān)閉時(shí)，這個(gè)效果是沒有的。
    • 這是API 21的新屬性，老版本無法使用.

改變默認(rèn)響應(yīng)色

改變Theme中的android:colorControlHighlight屬性。

自定義

<!-- A green ripple drawn atop a black rectangle. -->
<ripple android:color="#ff00ff00">
    <item android:drawable="@android:color/black" />
</ripple>

<!-- A blue ripple drawn atop a drawable resource. -->
<ripple android:color="#ff0000ff">
    <item android:drawable="@drawable/my_drawable" />
</ripple>

android:color中是點(diǎn)擊響應(yīng)色，也是波紋擴(kuò)散色。
item中是正常狀態(tài)下的顯示。

一般使用時(shí)會和原有的selector配合，原有的selector負(fù)責(zé)5.0以下顯示效果，
新的selector內(nèi)部含有ripple標(biāo)簽放在drawable-v21中，保證點(diǎn)擊效果。

selector
selector

寫到這里，我覺得對一個(gè)中國開發(fā)者的Material入門篇來說，還需要說明下魅族適配的問題

關(guān)于魅族SmartBar適配問題

和魅族官方技術(shù)人員溝通過，不(pu)幸(tian)被(tong)告(qing)知(a)：使用AppCompatV7 21以上，暫時(shí)無法進(jìn)行SmartBar適配。

原因大概解釋如下：

  • v19的時(shí)候，ActionBar的處理是：如果系統(tǒng)有，系統(tǒng)處理；系統(tǒng)沒有，自己畫。
  • v21以后都是Compat庫自己畫了，不會調(diào)用系統(tǒng)的，因此魅族無法獲取合并到SmartBar中。

so，坐等魅族找到新的適配策略或者放棄SmartBar～～

最后

下一篇Toolbar與ActionMode，繼續(xù)看請點(diǎn)擊Material適配2 - 高級篇

參考資料

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容