Material適配1 - 入門篇
轉自: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>
先上官方解釋圖:
圖上的各引數都可以直接配置到主題中生效。其中colorPrimaryDark僅在Lollipop以上機器生效。
colorAccent解析
colorAccent會改變游標顏色、checkbox背景色等。
基本上可以理解為控制元件的主色調。
以Checkbox為例:
官方預設是綠色的
改變colorAccent為藍色後
自定義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裝置上
5.x裝置上
可以看到PreferenceCategory
和Preference
在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中,保證點選效果。
寫到這裡,我覺得對一箇中國開發者的Material入門篇來說,還需要說明下魅族適配的問題
關於魅族SmartBar適配問題
和魅族官方技術人員溝通過,不(pu)幸(tian)被(tong)告(qing)知(a):使用AppCompatV7 21以上,暫時無法進行SmartBar適配。
原因大概解釋如下:
- v19的時候,ActionBar的處理是:如果系統有,系統處理;系統沒有,自己畫。
- v21以後都是Compat庫自己畫了,不會呼叫系統的,因此魅族無法獲取合併到SmartBar中。
so,坐等魅族找到新的適配策略或者放棄SmartBar~~
最後
下一篇Toolbar與ActionMode,繼續看請點選Material適配2 - 高階篇
參考資料
相關文章
- 移動端適配-實踐篇
- 一篇適合入門的PID文章
- 移動端適配-Rem 佈局篇REM
- SAP一句話入門:Material Management
- Spring Cloud Alibaba(1)---入門篇SpringCloud
- 移動端適配 - 基礎知識篇
- iOS 11 適配看這篇還不夠?iOS
- 『Material Design 入門學習筆記』前言Material Design筆記
- Nginx入門到實戰(1)基礎篇Nginx
- Three.js入門篇之1 - WebGL on HTMLJSWebHTML
- Scala 學習筆記(1)之入門篇筆記
- Android適配: 拉伸適配的缺點Android
- flutter 螢幕尺寸適配 字型大小適配Flutter
- DarkMode、WKWebView、蘋果登入是否必須適配?WebView蘋果
- 【Android】1:Android APP開發入門篇AndroidAPP
- 最適合入門的 Laravel 入門教程 (四)Laravel
- 最適合入門的 Laravel 入門教程 (五)Laravel
- Spark入門篇Spark
- 入門篇(一)
- elasticsearch 入門篇Elasticsearch
- Prezi(入門篇)
- Redis 入門篇Redis
- 國產化適配——銀河麒麟V10(1)
- Android適配Android
- iOS 11適配iOS
- https適配HTTP
- 適配iphone XiPhone
- 『Material Design入門學習筆記』動畫(含demo)Material Design筆記動畫
- ML.NET技術研究系列1-入門篇
- 效能優化——記憶體洩漏(1)入門篇優化記憶體
- 爬蟲(1) - 爬蟲基礎入門理論篇爬蟲
- 計算機網路快速入門--1--概述篇計算機網路
- Material Design 設計師分享如何快速入門 UX 設計 | Google Play 開發者 FAQ 特別篇Material DesignUXGo
- SqlSugar ORM 入門到精通【一】入門篇SqlSugarORM
- HBase 基本入門篇
- llvm入門篇LVM
- Flutter入門篇(一)Flutter
- Flutter入門篇(二)Flutter