樣式和主題(Style and Theme)詳解

導讀:

本篇文章主要根據官方文檔修改,介紹了樣式和主題的使用以及要注意的問題,同時也提供了Android Studio 快速抽取Style 和 編輯 Theme 的方法.

Tips

使用Android Studio 的同學,可以直接在布局檔案對應控件:

右鍵 -> Refactor -> Extract -> Style 抽取樣式

右鍵 -> Refactor -> Extract -> Layout 抽取布局 include标簽

樣式簡介:

樣式是指為 View 或視窗指定外觀和格式的屬性集合.樣式可以指定高度、填充、字型顔色、字号、背景色等許多屬性. 樣式是在與指定布局的 XML 不同的 XML 資源中進行定義.

是以我們可以使用樣式将xml檔案中的控件屬性抽取簡化

設定樣式的方式有兩種:

• 如果是對單個視圖應用樣式,在布局 XML 中的 View 元素添加 style 屬性.
• 如果是對整個Activity或應用來應用樣式,在 Android 清單中的或節點添加android:theme屬性.

系統自帶的Theme and Style的标準屬性文檔

• R.styleable.Theme該連結提供了系統自帶的,可在主題(Theme)中使用的标準屬性的清單
• R.style該連結可查到系統自帶的,在樣式(Style)中使用的标準屬性的清單

單個視圖View的使用

一、在res/values/目錄下自定義以節點的.xml檔案(或直接在styles.xml也行)定義我們想要實作的樣式

簡化TextView為例

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" >
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

           

二、在對應的控件上調用該樣式

<TextView
        style="@style/CodeFont"
        android:text="Hello World!"
        />
           

繼承

• 樣式具有繼承關系,可以通過

//.xml檔案,@是說明系統已經定義過的，@android:style/  是必須帶上的
    <style name="RedText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#FF0000</item>
    </style>

  //控件
   <TextView
        style="@style/RedText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        />
           

如果想要繼承我們自定義的

<style name="CodeFont.Blue">
        <item name="android:textColor">#0000FF</item>
    </style>

    <style name="CodeFont.Blue.Big">
        <item name="android:textColor">#0000FF</item>
        <item name="android:textSize">sp</item>
    </style>
           

注意 : 句點連結名稱的繼承方式隻适用于我們自定義的資源樣式.無法繼承Android内建樣式,引用内建樣式必須使用parent屬性.

Actvity或Application使用(Theme主題的使用)

聲明主題的例子:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style name="CustomTheme">
 <item name="android:windowNoTitle">true</item>
 <item name="windowFrame">@drawable/screen_frame</item>
 <item name="windowBackground">@drawable/screen_background_white</item>
 <item name="panelForegroundColor">#FF000000</item>
 <item name="panelBackgroundColor">#FFFFFFFF</item>
 <item name="panelTextColor">?panelForegroundColor</item>
 <item name="panelTextSize"></item>
 <item name="menuItemTextColor">?panelTextColor</item>
 <item name="menuItemTextSize">?panelTextSize</item>
 </style>
</resources>
           

注意 : 我們用了@符号和?符号來應用資源.@符号表明了我們應用的資源是前邊定義過的(或者在前一個項目中或者在Android 架構中).問号?表明了我們引用的資源的值在目前的主題當中定義過.通過引用在裡邊定義的名字可以做到(panelTextColor 用的顔色和panelForegroundColor中定義的一樣)。這種技巧隻能用在XML資源當中.

• 要為所有Activity設定主題,在AndroidManifest.xml清單檔案中的節點,加入帶樣式名稱的android:theme屬性

• 要為應用中某一個Activity應用主題,在AndroidManifest.xml清單檔案中的節點,加入帶樣式名稱的android:theme屬性

<activity android:theme="@android:style/Theme.Dialog"> //系統的

<activity android:theme="@style/CustomTheme"> //自定義的
           

• 如果想用某個系統自帶的主題,但想做些調整,可以使用樣式的繼承屬性,然後修改想改的屬性

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>
           

==注意==

1. 句點連結名稱的繼承方式隻适用于我們自定義的資源樣式.無法繼承Android内建樣式,引用内建樣式必須使用parent屬性.
2. style屬性不使用android:命名空間字首 如:style=”@style/RedText”,style=..前
3. @符号表明了我們應用的資源是前邊定義過的(或者在前一個項目中或者在Android 架構中)。問号？表明了我們引用的資源的值在目前的主題當中定義過。通過引用在裡邊定義的名字可以做到(panelTextColor 用的顔色和panelForegroundColor中定義的一樣)。這中技巧隻能用在XML資源當中。
4. style 和 Theme都具有繼承屬性,隻是最終調用的位置不同而已

根據平台版本選擇主題

如,在res/values/目錄下的一個XML檔案(通常是res/values/styles.xml):

<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>
           

那麼要讓該主題在運作在Android3.0 (API 11)或以上的版本,我們可以在res/values-v11目錄下的的XML檔案中聲明一個

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>
           

==有可能出現的Bug==:

1. 如果寫完代碼,代碼上什麼錯誤都沒報,一運作程式就閃退,看到 android.support.v7.view.WindowCallbackWrapper.onSearchRequested 這句,代表v7包下的主題(Theme)用錯了,把parent的android删掉即可
2. 注意我們繼承的系統主題的對應屬性的命名方式前是否有android字樣,不對應的話會報This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR類似的錯誤

Android Studio Style快速抽取:

右鍵->Refactor->Extract->Style->ok就會抽取到res/values/styles.xml了

Android Studio Theme Editor(主題編輯器)

1. 工具欄Tools->Android->Theme Editor
2. 打開Styles.xml檔案,右上角有Open editor按鈕,點選打開

左邊展示主題修改後的預覽結果,右邊是主題編輯器視窗,點選小箭頭,可以建立一個新的主題控件.

接下來就可以根據下表屬性,亂嗨了,不過記得選擇完想要的顔色,記住給它起個新名字,不然會覆寫AppTheme預設的顔色

屬性	說明
colorPrimary	應用的主色調,ActionBar預設使用該顔色,ToolBar導航欄的底色
colorPrimaryDark	應用的主要暗色調,StatusBar狀态欄預設使用改顔色
colorAccent	控件選中的預設顔色,如EditText 的閃動光标
android:colorControlNormal	控件未選中時的預設顔色,如複選框
android:textColorPrimary	應用的主要文字顔色,ActionBar的标題文字預設顔色
android:textColorSecondary	輔助的文字顔色,一般比textColorPrimary的顔色弱一點,用于一些弱化的表示
android:windowBackground	窗體背景顔色,必須用color.xml定義的顔色
android:navigationBarColor	底部操作欄顔色 API>21
擴充屬性	擴充說明
statusBarColor	狀态欄顔色,預設使用colorPrimaryDark
colorForeground	應用的前景色,ListView的分割線，switch滑動區預設使用該顔色
colorBackground	應用的背景色,popMenu的背景預設使用該顔色
colorControlHighlight	控件按壓時的色調
colorControlActivated	控件選中時的顔色，預設使用colorAccent
colorButtonNormal	預設按鈕的背景顔色
editTextColor	預設EditView輸入框字型的顔色。
textColor	Button,textView的文字顔色
textColorPrimaryDisableOnly	RadioButton,checkbox等控件的文字
colorSwitchThumbNormal	switch thumbs 預設狀态的顔色. (switch off)

最後記得在AndroidManifest清單檔案,在或添加android:theme,調用我們設定好的主題

總結

本篇文章到此結束,歡迎關注,後續有補充的會即使更新,有問題也歡迎評論,共同成長