Material適配1 - 入門篇

yangxi_001發表於2016-08-31

轉自:http://www.cnblogs.com/ct2011/

隨著Material Design的普及,很多開發人員都會面臨App的Material適配。如果你的App不只是針對5.0以上裝置的話(多數情況也必須做相容), 那麼下面的經驗總結將會對你有所幫助。
當然,有些公司的App不會改成Material Design,但如果你以前使用AppCompatV7的話,升級到21後,你必然面臨和以前不一樣的使用方式,瞭解新的方式也是必須的。

言歸正傳,官方給我們的適配方案是AppCompatV7,新發布的22.1.1適配包相對於22又進行了較大的改動,同時對Material適配更加強大,因此本文主要介紹基於22.1.1版本的適配流程。

開始使用

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

這裡需要說明的是使用19、20及其以下版本仍然是Holo風格,
使用21和22版本都會有Material的效果。

Theme介紹

引用完庫之後,首先要面對的是配置主題。否則如果你以前使用AppCompat的話,執行之後會發現App慘不忍睹。

分類

Theme主要有以下幾種分類:

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

如果以前使用ActionBar Holo風格時使用的就是AppCompat,那麼這些地方是不需要更改的。

注: Material下的ActionBar會比之前更大,這點可在之後的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

圖上的各引數都可以直接配置到主題中生效。其中colorPrimaryDark僅在Lollipop以上機器生效。

colorAccent解析

colorAccent會改變游標顏色、checkbox背景色等。
基本上可以理解為控制元件的主色調。

以Checkbox為例:
官方預設是綠色的

colorAccent_green

改變colorAccent為藍色後

colorAccent_blue

自定義Status Bar (Lollipop以上裝置)

Material可以讓你輕鬆訂製Staus Bar。

  • 可以使Theme中的android:statusBarColor屬性來改變,預設從android:colorPrimaryDark中獲取。
  • 程式碼設定: Window.setStatusBarColor()

常見錯誤

現在AppCompat對視窗主題的flag要求更嚴格。
主要原因是為了支援Dialog,大量使用了 AppCompat 之前並沒有重視的 windowNoTitle 標誌。

升級到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,這樣就會一直正常。
  • 如果不能這樣做(或許你需要同時支援ActionBar和NoActionBar,其實也可以通過第一種方式來解決,可能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已經廢棄。開始採用AppCompatActivity。
如果你以前使用的是ActionBarActivity,建議替換掉,不需要更改其他程式碼。

(特別重要的AppCompatDelegate登場,具體程式碼可以檢視AppCompatActivity實現,這裡可以簡單替換下快速適配,其實一般情況下也不需要自己來寫AppCompatDelegate)

OK,到這裡,其實你的App差不多就能正常執行了,只是有些細節方面還需要繼續完善。
你可能已經注意到你的Dialog還不是Material風格,那麼我們繼續來看Dialog。

AppCompatDialog

AppCompat之前的21、22版本都沒有實現Material Dialog。 在22.1.x釋出時,這個問題終於解決了。

AppCompatDialog是AppCompat themed Dialog的 Base class.
目前他的子類只有AlertDialog,但已經足夠使用。

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

Preference

官方至今沒有做到完全的適配。
對比圖:
4.x裝置上
preference_4.x

5.x裝置上
preference_5.x

可以看到PreferenceCategoryPreference在4.x裝置上底部都有橫線,5.x裝置上都沒有。
也可以看到CheckBoxPreference是已經適配了的。

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

但是作者並沒有去寫DialogPreference一類的,比如常見的ListPreference。
其實這裡是有解決辦法的。上面已經寫到了新版的AlertDialog,配合How can I change the appearance of ListPreference Dialog 這篇帖子,就不難實現。
但也可以看到有人討論了Material規範中提到的實現方式,當然也有人根據Google規範進行了實現,這裡可以根據需求來自行選擇實現方式。

關於Preference需要說明的是:

  • 如果app是針對11以上的,推薦使用AppCompatActivity和PreferenceFragment來實現。
  • 如果相容更早的版本,需要藉助AppCompatDelegate來實現,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中還有一個重要的特性是陰影的設定和波紋效果的實現,這裡來粗略說明一下:

Elevation - 設定陰影

v21以後在View的xml中使用android:elevation屬性,或者在程式碼中使用View的setElevation()方法。

相容老版的陰影策略

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

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

RippleDrawable - 波紋效果

使用已經提供好的

  • ?android:attr/selectableItemBackground
    擴散到View邊界
  • ?android:attr/selectableItemBackgroundBorderless
    設定後,會從孩子往父親找一個依附的色。如果View往上找的時候,親生父親沒背景色,會繼續向上查詢直到最頂端。找到了最頂端的爺爺,這個時候才繪製。
    然而,如果父親的兄弟又繪製了顏色,且蓋住了最頂端的繪製,會導致看不到效果。如果有一定的透明度,結果就顯而易見了。
    特別注意:
    • 當把硬體加速給關閉時,這個效果是沒有的。
    • 這是API 21的新屬性,老版本無法使用.

改變預設響應色

改變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中是點選響應色,也是波紋擴散色。
item中是正常狀態下的顯示。

一般使用時會和原有的selector配合,原有的selector負責5.0以下顯示效果,
新的selector內部含有ripple標籤放在drawable-v21中,保證點選效果。

selector

寫到這裡,我覺得對一箇中國開發者的Material入門篇來說,還需要說明下魅族適配的問題

關於魅族SmartBar適配問題

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

原因大概解釋如下:

  • v19的時候,ActionBar的處理是:如果系統有,系統處理;系統沒有,自己畫。
  • v21以後都是Compat庫自己畫了,不會呼叫系統的,因此魅族無法獲取合併到SmartBar中。

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

最後

下一篇Toolbar與ActionMode,繼續看請點選Material適配2 - 高階篇

參考資料

相關文章