Android菜鸟的成长笔记（6）——剖析源码学自定义主题Theme

朱雀 2022-08-06 12:18 93阅读 0赞

还记得在Android菜鸟的成长笔记（3）中我们曾经遇到了一个问题吗？"这个界面和真真的QQ界面还有点不同的就是上面的标题myFirstApp，怎么去掉这个标题呢？"，当时我直接在AndroidMainfest.xml中添加了一个属性：

1.  android:theme="@android:style/Theme.NoTitleBar"

可能有的朋友就会迷惑了，为什么添加了这个属性就可以了。这一篇文章将让我们一起翻开Android系统源代码来揭开困扰大家的关于主题使用以及自定义的谜团。

一、样式（Style)与主题(Theme)

在Android的应用的资源文件中有一个style.xml文件，这个文件是干什么用的呢？我们有时候经常需要对某个类型的组件指定大致相似的格式，比如字体、颜色、背景色等，如果我们每次都为某个View组件去重复指定这些属性，这无疑会产生大量的工作，而且还不利于后期的代码修改和维护。而Style就是一个样式的格式，这个格式可以被多个View组件所使用，也可以说是一个样式的集合类，被需要这一类样式集合的View组件所使用。例如我们前面写的QQ登录界面中的登录按钮，我们可以给定义一个样式

1.  <style name="buttonStyle">  
2.      <item name="android:background">@drawable/login\_button\_nor</item>  
3.      <item name="android:textColor">@color/buttonTextColor</item>  
4.  </style>

在布局文件中引入样式

1.  <Button   
2.      android:layout\_width="270dip"  
3.      android:layout\_height="40dip"  
4.      android:text="@string/login\_button"  
5.      style="@style/buttonStyle"  
6.      />

与样式非常相似，主题资源的xml文件通常也放在/res/values目录下，主题相当于整个应用或者某个Activity的样式，换句话说主题是针对窗体级别或整个应用程序的样式。与样式比较，样式是针对窗体内元素的样式。主题的设置有两种方式

（1）在AndroidMainfest.xml中为Activity或者application指定主题

1.  <application  
2.      android:allowBackup="true"  
3.      android:icon="@drawable/ic\_launcher"  
4.      android:label="@string/app\_name"  
5.      android:theme="@android:style/Theme.NoTitleBar" >  
6.      <activity  
7.          android:name="com.example.myfirstapp.MainActivity"  
8.          android:label="@string/app\_name" >  
9.          <intent-filter>  
10.             <action android:name="android.intent.action.MAIN" />  
11.   
12.             <category android:name="android.intent.category.LAUNCHER" />  
13.         </intent-filter>  
14.     </activity>  
15. </application>

上面AndroidMainfest.xml代码中给整个应用指定了一个主题，这个主题是没有标题栏的系统主题。

（2）在Activity创建时调用setTheme方法（必须在setContentView前面调用）来给某个Activity添加主题。

二、剖析主题（Theme）资源

我们先来创建一个工程名字为helloworld，然后打开它的AndroiodMainfest.xml文件

1.  <application  
2.      android:allowBackup="true"  
3.      android:icon="@drawable/ic\_launcher"  
4.      android:label="@string/app\_name"  
5.      android:theme="@style/AppTheme" >  
6.      <activity  
7.          android:name="com.example.helloworld.MainActivity"  
8.          android:label="@string/app\_name" >  
9.          <intent-filter>  
10.             <action android:name="android.intent.action.MAIN" />  
11.   
12.             <category android:name="android.intent.category.LAUNCHER" />  
13.         </intent-filter>  
14.     </activity>  
15. </application>

可以看到我们在创建工程时，已经默认给我们的整个应用添加了一个主题

1.  android:theme="@style/AppTheme"

打开我们资源文件res/values/下面的styles.xml文件，可以看到在样式文件中有一个名字为AppTheme的样式，如下：

1.  <resources>  
2.    
3.        
7.      <style name="AppBaseTheme" parent="android:Theme.Light">  
8.            
13.     </style>  
14.   
15.       
16.     <style name="AppTheme" parent="AppBaseTheme">  
17.           
18.     </style>  
19.   
20. </resources>

我们可以看到，这个AppTheme的样式继承自上面的AppBaseTheme。而AppBaseTheme又继承自系统的一个样式Theme.Light，打开Android系统源代码找到Theme.xml文件中的Theme.Light如下：

1.      
5.    <style name="Theme.Light">  
6.        <item name="windowBackground">@drawable/screen\_background\_light</item>  
7.        <item name="colorBackground">@android:color/background\_light</item>  
8.        <item name="colorForeground">@color/bright\_foreground\_light</item>  
9.        <item name="colorForegroundInverse">@android:color/bright\_foreground\_light\_inverse</item>  
10.   
11.       <item name="textColorPrimary">@android:color/primary\_text\_light</item>  
12.       <item name="textColorSecondary">@android:color/secondary\_text\_light</item>  
13.       <item name="textColorTertiary">@android:color/tertiary\_text\_light</item>  
14.       <item name="textColorPrimaryInverse">@android:color/primary\_text\_dark</item>  
15.       <item name="textColorSecondaryInverse">@android:color/secondary\_text\_dark</item>  
16.       <item name="textColorTertiaryInverse">@android:color/tertiary\_text\_dark</item>  
17.       <item name="textColorPrimaryDisableOnly">@android:color/primary\_text\_light\_disable\_only</item>  
18.       <item name="textColorPrimaryInverseDisableOnly">@android:color/primary\_text\_dark\_disable\_only</item>  
19.       <item name="textColorPrimaryNoDisable">@android:color/primary\_text\_light\_nodisable</item>  
20.       <item name="textColorSecondaryNoDisable">@android:color/secondary\_text\_light\_nodisable</item>  
21.       <item name="textColorPrimaryInverseNoDisable">@android:color/primary\_text\_dark\_nodisable</item>  
22.       <item name="textColorSecondaryInverseNoDisable">@android:color/secondary\_text\_dark\_nodisable</item>  
23.       <item name="textColorHint">@android:color/hint\_foreground\_light</item>  
24.       <item name="textColorHintInverse">@android:color/hint\_foreground\_dark</item>  
25.         
26.       <item name="popupWindowStyle">@android:style/Widget.PopupWindow</item>  
27.         
28.       <item name="textCheckMark">@android:drawable/indicator\_check\_mark\_light</item>  
29.       <item name="textCheckMarkInverse">@android:drawable/indicator\_check\_mark\_dark</item>  
30.   
31.       <item name="gestureOverlayViewStyle">@android:style/Widget.GestureOverlayView.White</item>  
32.       <item name="expandableListViewStyle">@android:style/Widget.ExpandableListView.White</item>  
33.       <item name="listViewStyle">@android:style/Widget.ListView.White</item>  
34.       <item name="listDivider">@drawable/divider\_horizontal\_bright</item>  
35.       <item name="listSeparatorTextViewStyle">@android:style/Widget.TextView.ListSeparator.White</item>  
36.         
37.       <item name="progressBarStyle">@android:style/Widget.ProgressBar.Inverse</item>  
38. <item name="progressBarStyleSmall">@android:style/Widget.ProgressBar.Small.Inverse</item>  
39. <item name="progressBarStyleLarge">@android:style/Widget.ProgressBar.Large.Inverse</item>  
40. <item name="progressBarStyleInverse">@android:style/Widget.ProgressBar</item>  
41. <item name="progressBarStyleSmallInverse">@android:style/Widget.ProgressBar.Small</item>  
42. <item name="progressBarStyleLargeInverse">@android:style/Widget.ProgressBar.Large</item>   
43.   </style>

样式的继承有两种方式，一种是上面看到的parent="",还有一种就是用”."的方式，上面的Theme.Light继承自Theme。这两种继承有什么区别呢？一个相当于咱们类之间的继承extend,另一个相当于内部类，也可以使用外部类的属性和方法。我们再来看看Theme.Light的父类Theme的样式定义。

1.    <style name="Theme">  
2.      
3.        <item name="colorForeground">@android:color/bright\_foreground\_dark</item>  
4.        <item name="colorForegroundInverse">@android:color/bright\_foreground\_dark\_inverse</item>  
5.        <item name="colorBackground">@android:color/background\_dark</item>  
6.        <item name="colorBackgroundCacheHint">?android:attr/colorBackground</item>  
7.        <item name="disabledAlpha">0.5</item>  
8.        <item name="backgroundDimAmount">0.6</item>  
9.    
10.         
11.       <item name="textAppearance">@android:style/TextAppearance</item>  
12.       <item name="textAppearanceInverse">@android:style/TextAppearance.Inverse</item>  
13.   
14.       <item name="textColorPrimary">@android:color/primary\_text\_dark</item>  
15.       <item name="textColorSecondary">@android:color/secondary\_text\_dark</item>  
16.       <item name="textColorTertiary">@android:color/tertiary\_text\_dark</item>  
17.       <item name="textColorPrimaryInverse">@android:color/primary\_text\_light</item>  
18.       <item name="textColorSecondaryInverse">@android:color/secondary\_text\_light</item>  
19.       <item name="textColorTertiaryInverse">@android:color/tertiary\_text\_light</item>  
20.       <item name="textColorPrimaryDisableOnly">@android:color/primary\_text\_dark\_disable\_only</item>  
21.       <item name="textColorPrimaryInverseDisableOnly">@android:color/primary\_text\_light\_disable\_only</item>  
22.       <item name="textColorPrimaryNoDisable">@android:color/primary\_text\_dark\_nodisable</item>  
23.       <item name="textColorSecondaryNoDisable">@android:color/secondary\_text\_dark\_nodisable</item>  
24.       <item name="textColorPrimaryInverseNoDisable">@android:color/primary\_text\_light\_nodisable</item>  
25.       <item name="textColorSecondaryInverseNoDisable">@android:color/secondary\_text\_light\_nodisable</item>  
26.       <item name="textColorHint">@android:color/hint\_foreground\_dark</item>  
27.       <item name="textColorHintInverse">@android:color/hint\_foreground\_light</item>  
28.       <item name="textColorSearchUrl">@android:color/search\_url\_text</item>  
29.   
30.       <item name="textAppearanceLarge">@android:style/TextAppearance.Large</item>  
31.       <item name="textAppearanceMedium">@android:style/TextAppearance.Medium</item>  
32.       <item name="textAppearanceSmall">@android:style/TextAppearance.Small</item>  
33.       <item name="textAppearanceLargeInverse">@android:style/TextAppearance.Large.Inverse</item>  
34.       <item name="textAppearanceMediumInverse">@android:style/TextAppearance.Medium.Inverse</item>  
35.       <item name="textAppearanceSmallInverse">@android:style/TextAppearance.Small.Inverse</item>  
36.       <item name="textAppearanceSearchResultTitle">@android:style/TextAppearance.SearchResult.Title</item>  
37.       <item name="textAppearanceSearchResultSubtitle">@android:style/TextAppearance.SearchResult.Subtitle</item>  
38.         
39.       <item name="textAppearanceButton">@android:style/TextAppearance.Widget.Button</item>  
40.         
41.       <item name="candidatesTextStyleSpans">@android:string/candidates\_style</item>  
42.         
43.       <item name="textCheckMark">@android:drawable/indicator\_check\_mark\_dark</item>  
44.       <item name="textCheckMarkInverse">@android:drawable/indicator\_check\_mark\_light</item>  
45.   
46.         
47.       <item name="buttonStyle">@android:style/Widget.Button</item>  
48.   
49.       <item name="buttonStyleSmall">@android:style/Widget.Button.Small</item>  
50.       <item name="buttonStyleInset">@android:style/Widget.Button.Inset</item>  
51.   
52.       <item name="buttonStyleToggle">@android:style/Widget.Button.Toggle</item>  
53.   
54.         
55.       <item name="listPreferredItemHeight">64dip</item>  
56.         
57.       <item name="searchResultListItemHeight">58dip</item>  
58.       <item name="listDivider">@drawable/divider\_horizontal\_dark</item>  
59.       <item name="listSeparatorTextViewStyle">@android:style/Widget.TextView.ListSeparator</item>     
60.         
61. <item name="listChoiceIndicatorSingle">@android:drawable/btn\_radio</item>  
62.     <item name="listChoiceIndicatorMultiple">@android:drawable/btn\_check</item>      
63.   
64.       <item name="expandableListPreferredItemPaddingLeft">40dip</item>  
65.       <item name="expandableListPreferredChildPaddingLeft">  
66.               ?android:attr/expandableListPreferredItemPaddingLeft</item>  
67.   
68.       <item name="expandableListPreferredItemIndicatorLeft">3dip</item>  
69.       <item name="expandableListPreferredItemIndicatorRight">33dip</item>  
70.       <item name="expandableListPreferredChildIndicatorLeft">  
71.               ?android:attr/expandableListPreferredItemIndicatorLeft</item>  
72.       <item name="expandableListPreferredChildIndicatorRight">  
73.               ?android:attr/expandableListPreferredItemIndicatorRight</item>  
74.   
75.         
76.       <item name="galleryItemBackground">@android:drawable/gallery\_item\_background</item>  
77.         
78.         
79.       <item name="windowBackground">@android:drawable/screen\_background\_dark</item>  
80.       <item name="windowFrame">@null</item>  
81.       <item name="windowNoTitle">false</item>  
82.       <item name="windowFullscreen">false</item>  
83.       <item name="windowIsFloating">false</item>  
84.       <item name="windowContentOverlay">@android:drawable/title\_bar\_shadow</item>  
85.       <item name="windowShowWallpaper">false</item>  
86.       <item name="windowTitleStyle">@android:style/WindowTitle</item>  
87.       <item name="windowTitleSize">25dip</item>  
88.       <item name="windowTitleBackgroundStyle">@android:style/WindowTitleBackground</item>  
89.       <item name="android:windowAnimationStyle">@android:style/Animation.Activity</item>  
90.       <item name="android:windowSoftInputMode">stateUnspecified|adjustUnspecified</item>  
91.   
92.         
93.       <item name="alertDialogStyle">@android:style/AlertDialog</item>  
94.         
95.         
96.       <item name="panelBackground">@android:drawable/menu\_background</item>  
97.       <item name="panelFullBackground">@android:drawable/menu\_background\_fill\_parent\_width</item>  
98.         
99.       <item name="panelColorBackground">\#000</item>  
100.       <item name="panelColorForeground">?android:attr/textColorPrimary</item>  
101.       <item name="panelTextAppearance">?android:attr/textAppearance</item>  
102.   
103.         
104.       <item name="scrollbarFadeDuration">250</item>  
105.       <item name="scrollbarDefaultDelayBeforeFade">300</item>   
106.       <item name="scrollbarSize">10dip</item>  
107.       <item name="scrollbarThumbHorizontal">@android:drawable/scrollbar\_handle\_horizontal</item>  
108.       <item name="scrollbarThumbVertical">@android:drawable/scrollbar\_handle\_vertical</item>  
109.       <item name="scrollbarTrackHorizontal">@null</item>  
110.       <item name="scrollbarTrackVertical">@null</item>  
111.   
112.         
113.       <item name="textSelectHandleLeft">@android:drawable/text\_select\_handle\_left</item>  
114.       <item name="textSelectHandleRight">@android:drawable/text\_select\_handle\_right</item>  
115.       <item name="textSelectHandle">@android:drawable/text\_select\_handle\_middle</item>  
116.       <item name="textSelectHandleWindowStyle">@android:style/Widget.TextSelectHandle</item>  
117.   
118.         
119.       <item name="absListViewStyle">@android:style/Widget.AbsListView</item>  
120.       <item name="autoCompleteTextViewStyle">@android:style/Widget.AutoCompleteTextView</item>          
121.       <item name="checkboxStyle">@android:style/Widget.CompoundButton.CheckBox</item>  
122.       <item name="dropDownListViewStyle">@android:style/Widget.ListView.DropDown</item>  
123.       <item name="editTextStyle">@android:style/Widget.EditText</item>  
124.       <item name="expandableListViewStyle">@android:style/Widget.ExpandableListView</item>  
125.       <item name="expandableListViewWhiteStyle">@android:style/Widget.ExpandableListView.White</item>  
126.       <item name="galleryStyle">@android:style/Widget.Gallery</item>  
127.       <item name="gestureOverlayViewStyle">@android:style/Widget.GestureOverlayView</item>  
128.       <item name="gridViewStyle">@android:style/Widget.GridView</item>  
129.       <item name="imageButtonStyle">@android:style/Widget.ImageButton</item>  
130.       <item name="imageWellStyle">@android:style/Widget.ImageWell</item>  
131.       <item name="listViewStyle">@android:style/Widget.ListView</item>  
132.       <item name="listViewWhiteStyle">@android:style/Widget.ListView.White</item>  
133.       <item name="popupWindowStyle">@android:style/Widget.PopupWindow</item>  
134.       <item name="progressBarStyle">@android:style/Widget.ProgressBar</item>  
135.       <item name="progressBarStyleHorizontal">@android:style/Widget.ProgressBar.Horizontal</item>  
136.       <item name="progressBarStyleSmall">@android:style/Widget.ProgressBar.Small</item>  
137.       <item name="progressBarStyleSmallTitle">@android:style/Widget.ProgressBar.Small.Title</item>  
138.       <item name="progressBarStyleLarge">@android:style/Widget.ProgressBar.Large</item>  
139.       <item name="progressBarStyleInverse">@android:style/Widget.ProgressBar.Inverse</item>  
140. <item name="progressBarStyleSmallInverse">@android:style/Widget.ProgressBar.Small.Inverse</item>  
141.    <item name="progressBarStyleLargeInverse">@android:style/Widget.ProgressBar.Large.Inverse</item>   
142.       <item name="seekBarStyle">@android:style/Widget.SeekBar</item>  
143.       <item name="ratingBarStyle">@android:style/Widget.RatingBar</item>  
144.       <item name="ratingBarStyleIndicator">@android:style/Widget.RatingBar.Indicator</item>  
145.       <item name="ratingBarStyleSmall">@android:style/Widget.RatingBar.Small</item>  
146.       <item name="radioButtonStyle">@android:style/Widget.CompoundButton.RadioButton</item>  
147.       <item name="scrollViewStyle">@android:style/Widget.ScrollView</item>  
148.       <item name="horizontalScrollViewStyle">@android:style/Widget.HorizontalScrollView</item>  
149.       <item name="spinnerStyle">@android:style/Widget.Spinner</item>  
150.       <item name="starStyle">@android:style/Widget.CompoundButton.Star</item>  
151.       <item name="tabWidgetStyle">@android:style/Widget.TabWidget</item>  
152.       <item name="textViewStyle">@android:style/Widget.TextView</item>  
153.       <item name="webTextViewStyle">@android:style/Widget.WebTextView</item>  
154.       <item name="webViewStyle">@android:style/Widget.WebView</item>  
155.       <item name="dropDownItemStyle">@android:style/Widget.DropDownItem</item>  
156.       <item name="spinnerDropDownItemStyle">@android:style/Widget.DropDownItem.Spinner</item>  
157.       <item name="spinnerItemStyle">@android:style/Widget.TextView.SpinnerItem</item>  
158.       <item name="dropDownHintAppearance">@android:style/TextAppearance.Widget.DropDownHint</item>  
159.       <item name="keyboardViewStyle">@android:style/Widget.KeyboardView</item>  
160.       <item name="quickContactBadgeStyleWindowSmall">@android:style/Widget.QuickContactBadge.WindowSmall</item>  
161.       <item name="quickContactBadgeStyleWindowMedium">@android:style/Widget.QuickContactBadge.WindowMedium</item>  
162.       <item name="quickContactBadgeStyleWindowLarge">@android:style/Widget.QuickContactBadge.WindowLarge</item>  
163.       <item name="quickContactBadgeStyleSmallWindowSmall">@android:style/Widget.QuickContactBadgeSmall.WindowSmall</item>  
164.       <item name="quickContactBadgeStyleSmallWindowMedium">@android:style/Widget.QuickContactBadgeSmall.WindowMedium</item>  
165.       <item name="quickContactBadgeStyleSmallWindowLarge">@android:style/Widget.QuickContactBadgeSmall.WindowLarge</item>  
166.         
167.         
168.       <item name="preferenceScreenStyle">@android:style/Preference.PreferenceScreen</item>  
169.       <item name="preferenceCategoryStyle">@android:style/Preference.Category</item>  
170.       <item name="preferenceStyle">@android:style/Preference</item>  
171.       <item name="preferenceInformationStyle">@android:style/Preference.Information</item>  
172.       <item name="checkBoxPreferenceStyle">@android:style/Preference.CheckBoxPreference</item>  
173.       <item name="yesNoPreferenceStyle">@android:style/Preference.DialogPreference.YesNoPreference</item>  
174.       <item name="dialogPreferenceStyle">@android:style/Preference.DialogPreference</item>  
175.       <item name="editTextPreferenceStyle">@android:style/Preference.DialogPreference.EditTextPreference</item>  
176.       <item name="ringtonePreferenceStyle">@android:style/Preference.RingtonePreference</item>  
177.       <item name="preferenceLayoutChild">@android:layout/preference\_child</item>  
178.   
179.         
180.       <item name="searchWidgetCorpusItemBackground">@android:color/search\_widget\_corpus\_item\_background</item>  
181.   </style>  
182.

我们可以看到里面定义了关于我们整个应用中文字的样式，按钮的样式，列表的样式，画廊的样式，窗体的样式，对话框的样式等。这个样式是系统的默认样式，也是最符合HOLO的样式。Theme中定义的是最基本的主题样式，Theme的样式扩展样式有我们上面的Theme.Light还有Theme.NoTitleBar、Theme.NoTitleBar.Fullscreen、Theme.Light.NoTitleBar、Theme.Light.NoTitleBar.Fullscreen、Theme.Black、......

三、自定义主题

有了上面对Theme的了解之后，下面我们通过改变标题栏来自定义主题样式，首先继承Theme，标题栏是与窗体样式（Window attributes）相关的样式，我们在Theme.xml中找到这几句代码.

1.    
2.         <item name="windowBackground">@android:drawable/screen\_background\_dark</item>  
3.         <item name="windowFrame">@null</item>  
4.         <item name="windowNoTitle">false</item>  
5.         <item name="windowFullscreen">false</item>  
6.         <item name="windowIsFloating">false</item>  
7.         <item name="windowContentOverlay">@android:drawable/title\_bar\_shadow</item>  
8.         <item name="windowShowWallpaper">false</item>  
9.         <item name="windowTitleStyle">@android:style/WindowTitle</item>  
10.        <item name="windowTitleSize">25dip</item>  
11.        <item name="windowTitleBackgroundStyle">@android:style/WindowTitleBackground</item>  
12.        <item name="android:windowAnimationStyle">@android:style/Animation.Activity</item>  
13.        <item name="android:windowSoftInputMode">stateUnspecified|adjustUnspecified</item>

将上面主题中Title的大小和背景覆盖

1.    
2.  <style name="myTheme" parent="android:Theme">  
3.      <item name="android:windowTitleBackgroundStyle">@style/myThemeStyle</item>  
4.      <item name="android:windowTitleSize">50dip</item>  
5.  </style>  
6.    
7.    
8.  <style name="myThemeStyle">  
9.      <item name="android:background">\#FF0000</item>  
10. </style>

默认主题样式

![SouthEast][]

自定义主题样式

![SouthEast 1][]

如果有的朋友还想改变整个应用的字体、或者风格都可以通过继承Theme覆盖原有的样式来达到自定义的效果。

转自：http://blog.csdn.net/dawanganban/article/details/17732701

[SouthEast]: /images/20220806/e97bed356af840fab52e78a38efa574a.png
[SouthEast 1]: /images/20220806/bc51d42f24ac45d982236b6ce548e3cd.png