Android Material Design Theme 分析

對于系統原生的Theme,有篇文章寫的非常好。
Android開發之Theme、Style探索及源碼淺析_工匠若水-CSDN博客

官網文檔
應用資源概覽 | Android 開發者 | Android Developers

講解 ?attr:/
@android, ?attr/ 和 ?android 的區別 - 簡書 (jianshu.com)

資源引用

引用資源(reference a resource)

@[<package_name>:]<resource_type>/<resource_name>

引用樣式屬性(referencing style attributes)

?[<package_name>:][<resource_type>/]<resource_name>

其中 package_nameresource_type 可以省略,例如 ?attr/colorOnSurface 可以簡寫成 ?colorOnSurface,?android:attr/colorBackground 可以簡寫成 ?android:colorBackground。

<declare-styleable /> 和 <style/> 有什么關系?

declare-styleable 中聲明的 attr 可以 在 style 中使用。declare-styleable 類似一個接口,聲明了屬性的名稱和類型。style 是 declare-styleable 的實現,聲明了具體的值或者引用。

<attr /> 聲明在<resources />和聲明在<declare-styleable />中有何異同?

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <attr name="attrib1" format="string" />
   <declare-styleable name="blahblah">
      <attr name="attrib2" format="string" />
   </declare-styleable>
</resources>

相同點:
是兩者聲明的 attr 都可以在布局 xml 中被使用。

不同點:

  1. declare-styleable 中的 attr 可以聲明在 <style /> 中,可以作為theme或style的屬性。
  2. 在自定義 View 構造函數中,獲取兩者的方式不同。
public SomeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // declare-styleable 的 attr
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.SomeView);
        mColor = typedArray.getColor(R.styleable.ColorSelectorView_edit_color, TRANSPARENT);
        typedArray.recycle();
        // resources 中的 attr
        String attrib1 = attrs.getAttributeValue(null, "attrib1");
}

Material Design 主題

  1. MD 提供的默認主題是什么?和系統提供的主題有什么區別和聯系?
    系統預制的主題的位置在 /Android/sdk/platforms/android-30/data/res/values/,里面聲明了所有的預制屬性。

然后我們以Theme.MaterialComponents.DayNight.NoActionBar為例,先分析一下 MD 的主題,這個主題在庫中 /material-1.4.0/res/values/values.xml 中,跳轉過去后看到"Theme.MaterialComponents.DayNight.NoActionBar",這個主題有個父主題parent="Theme.MaterialComponents.Light.NoActionBar"。我們搜索"Theme.MaterialComponents.Light.NoActionBar",會發現這個主題沒有parent屬性了,那這個主題的其他屬性是從何而來的呢?

這里講一下主題的繼承方式,主題有兩種繼承方式,一種是通過聲明parent屬性,另一種是通過一個點.來聲明。

通過parent聲明的主題,它的 name 可以和父主題不同。
而通過.繼承的主題,名字一定是parent.child_theme的形式。

所以對于"Theme.MaterialComponents.Light.NoActionBar"主題,他的父主題是"Theme.MaterialComponents.Light",它通過 parent 屬性往上又有兩層,"Base.Theme.MaterialComponents.Light"->"Base.V14.Theme.MaterialComponents.Light"。

找到這里,我們發現"Base.V14.Theme.MaterialComponents.Light"下有了大量的我們熟知屬性。我們看看其中包含的屬性,
style 類型的屬性名字是@style/Widget.MaterialComponents.*,
theme 類型的名字是@style/ThemeOverlay.MaterialComponents.*,
我們還能看到一個屬性,<item name="textAppearanceLargePopupMenu">?attr/textAppearanceSubtitle1</item>。

重寫 Theme 和 Style

Matrial Design 的主題都以 "Base.V14.Theme.MaterialComponents.Light.Bridge" 主題為基類。這個主題是個起橋接作用的主題,它橋接了 AppCompat 主題和自定義的 Matrial Desig 主題,它是 MD 主題的基類,本質上 Material Design 的主題就是 AppCompat 主題。AppCompat 主題又繼承了 Android 系統預制的主題 "android:Theme.Holo.Light",而所有的主題的共同父類是一個叫做 ”Theme“ 的主題,它的屬性有 400 多行,包含了所有系統預制的屬性和 style,所以用 ”Theme“ 進行查閱是最好不過的。

重寫的方式很簡單,只需要在 <style> 中添加 <item>,申明一個和父元素中同名的屬性即可完成重寫。

  1. 重寫預制屬性
    預制屬性是android開頭的屬性,它們定義在 /sdk/platforms/android-30/data/res/values/attrs.xml下,每個屬性都有一個 format,表示類型。
  • 假如我們要改變 Activity 的默認背景色,我們可以這么寫:
<style name="Theme.App" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:colorBackground">@color/color_window_background</item>
</style>
  • 假如我們要改變 TextView 控件的字體顏色,我們可以這么寫:
<style name="Widget.MaterialComponents.CheckedTextView" parent="Base.Widget.MaterialComponents.CheckedTextView">
    <item name="android:textColor">@color/red</item>
</style>

很多控件的變量都有預制的屬性與之對應,比如字體顏色,大小等,這些屬性與xml布局中的屬性是等同的。

  1. 重寫控件自定義屬性
    自定義屬性和預制屬性的區別在于沒有前綴 android:,重寫方式等同于重寫預制屬性。
  2. 重寫控件style
    先找到控件默認的 style,對于style 的重寫最好基于已有的style。
    例如對于 MD 主題中的 popupMenuStyle 進行重寫
// 先找到 popupMenuStyle 定義的位置,在父主題中這里
<style name="Base.V14.Theme.MaterialComponents.Light" parent="Base.V14.Theme.MaterialComponents.Light.Bridge">
    <item name="popupMenuStyle">@style/Widget.MaterialComponents.PopupMenu</item>
    ...
<style/>
// 先創建一個新的樣式"Widget.App.PopupMenu"繼承父樣式 "Widget.MaterialComponents.PopupMenu"
// 然后替換成新樣式
<style name="Theme.App" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="popupMenuStyle">@style/Widget.App.PopupMenu</item>
    <style name="Widget.App.PopupMenu" parent="Widget.MaterialComponents.PopupMenu">
      <item name="android:popupBackground">@drawable/shape_popupmenu_background</item>
    </style>
</style>
  1. 重寫theme
    theme的重寫等同于 style 重寫
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容