Android中Style和Theme的使用總結

愈來愈多互聯網企業都在Android平臺上部署其客戶端，爲了提高用戶體驗，這些客戶端都作得佈局合理並且美觀.......Android的Style設計就是提高用戶體驗的關鍵之一。Android上的Style分爲了兩個方面：

1. Theme是針對窗體級別的，改變窗體樣式；
2. Style是針對窗體元素級別的，改變指定控件或者Layout的樣式。

Android系統的themes.xml和style.xml(位於/base/core/res/res/values/)包含了不少系統定義好的style，建議在裏面挑個合適的，而後再繼承修改。

 

 

Style是View中一些屬性的集合，包括height，padding，font color，background等等，Style單獨定義在xml文件中，相似與web頁面中css的角色，將設計和內容分開，便於修改和重複使用。

定義Style：

style文件須要保存在res/values目錄下，文件名任意，可是必須是xml文件，sytle文件的根標記必須是<resources>。寫了一個簡單示例，效果以下：

 

 

main.xml文件代碼：

 

[c-sharp]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:layout_width="fill_parent" android:layout_height="fill_parent">  
4.     <TextView   
5.         style="@style/CodeFont" mce_style="@style/CodeFont"   
6.         android:text="測試style" />  
7. </LinearLayout>  

 

聲明style是CodeFont，對應的是style文件中的style name。mystyle.xml文件中定義了style name是CodeFont：

[c-sharp]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>   
2. <resources>   
3.     <mce:style name="CodeFont" parent="@android :style/TextAppearance.Medium"><!--  
4.    
5.         <item name="android:layout_width">fill_parent</item>   
6.         <item name="android:layout_height">wrap_content</item>   
7.         <item name="android:textColor">#00FF00</item>   
8.         <item name="android:typeface">monospace</item>   
9.       
10. --></mce:style><style name="CodeFont" parent="@android :style/TextAppearance.Medium" mce_bogus="1">   
11.         <item name="android:layout_width">fill_parent</item>   
12.         <item name="android:layout_height">wrap_content</item>   
13.         <item name="android:textColor">#00FF00</item>   
14.         <item name="android:typeface">monospace</item>   
15.     </style>   
16. </resources>  

 

parent屬性表示style之間能夠繼承，同時能夠覆蓋parent style的一些屬性。

 

 

style繼承有兩種方式：

• style的繼承能夠經過parent屬性，用來繼承android已經定義好的style，例如:
  [c-sharp]  view plain copy print ?

  1. <mce:style name="GreenText" parent="@android :style/TextAppearance"><!--  
  2.    
  3.      <item name="android:textColor">#00FF00</item>   
  4. --></mce:style><style name="GreenText" parent="@android :style/TextAppearance" mce_bogus="1">   
  5.      <item name="android:textColor">#00FF00</item> </style>  
   
• 繼承了android中的TextAppearance，同時覆蓋了android:textColor屬性。

• 若是要繼承自定義的style，不須要經過parent屬性，只要style的name以須要繼承的style的name開始後跟新的style的name，中間用「.」隔開。注意：這種方式只適用與自定義的style繼承。

[c-sharp]  view plain copy print ?

1. <mce:style name="CodeFont.Red"><!--  
2.    
3.     <item name="android:textColor">#FF0000</item>   
4. --></mce:style><style name="CodeFont.Red" mce_bogus="1">   
5.     <item name="android:textColor">#FF0000</item> </style>  

 

 

 

新的style繼承了CodeFont，則在修改上邊例子中的main.xml爲：

[c-sharp]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:layout_width="fill_parent" android:layout_height="fill_parent">  
4.     <TextView   
5.         style="@style/CodeFont.Red" mce_style="@style/CodeFont.Red"   
6.         android:text="測試style" />  
7. </LinearLayout>  

 

效果以下，字體顏色變爲了紅色：

style能夠多級繼承：

[c-sharp]  view plain copy print ?

1. <mce:style name="CodeFont.Red.Big"><!--  
2.    
3.     <item name="android:textSize">30sp</item>   
4. --></mce:style><style name="CodeFont.Red.Big" mce_bogus="1">   
5.     <item name="android:textSize">30sp</item> </style>  

 

字號變大，效果以下：

sytle的更多屬性見android包下的R.attr。須要注意，並非全部的View都支持定義的style的屬性，若是自定義的sytle中包含View不支持的屬性，程序會自動忽略它。

 

 

 

Theme：

 

若是聲明一個style做爲Theme，須要配置mainfest文件中<activity> 或 <application>的android:theme 屬性。

將自定義的style做爲application的theme：

修改mystyle.xml爲：

[c-sharp]  view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>   
2. <resources>   
3.     <mce:style name="CodeFont" ><!--  
4.    
5.          <item name="android:textSize">20sp</item>   
6.         <item name="android:typeface">monospace</item>   
7.       
8. --></mce:style><style name="CodeFont"  mce_bogus="1">   
9.          <item name="android:textSize">20sp</item>   
10.         <item name="android:typeface">monospace</item>   
11.     </style>   
12. </resources>  

 

在mainfest 的application中添加 android:theme屬性：

[c-sharp]  view plain copy print ?

1. <application   android:icon="@drawable/icon" android:label="@string/app_name"   
2.      android:theme="@style/CodeFont">  

 

則application中的全部text字體都會改變，效果以下：

 

在每一個<activity>標籤中使用android:theme屬性：

[c-sharp]  view plain copy print ?

1. <activity android:name=".MainActivity"   
2.                  android:label="@string/app_name"  android:theme="@style/CodeFont">  

 

android:theme還能夠配置android中已經存在的theme：

[c-sharp]  view plain copy print ?

1. <activity android:theme="@android :style/Theme.Translucent">  

 

若是想調整android已經定義好的theme，則能夠經過自定義style來實現，例如：

[c-sharp]  view plain copy print ?

1. <color name="custom_theme_color">#b0b0ff</color>   
2. <mce:style name="CustomTheme" parent="android:Theme.Light"><!--  
3.    
4.     <item name="android:windowBackground">@color/custom_theme_color</item>   
5.     <item name="android:colorBackground">@color/custom_theme_color</item>   
6. --></mce:style><style name="CustomTheme" parent="android:Theme.Light" mce_bogus="1">   
7.     <item name="android:windowBackground">@color/custom_theme_color</item>   
8.     <item name="android:colorBackground">@color/custom_theme_color</item> </style>  

 

效果以下：

 

 

 

 

level爲11如下的theme：

 

 

一、Theme：

它的意思爲默認狀態，即若是theme這裏不填任何屬性的時候，默認爲Theme。

api原文爲：

The default system theme. This is the theme used for activities that have not explicitly set their own theme.

You can count on this being a dark background with light text on top, but should try to make no other assumptions about its appearance. In particular, the text inside of widgets using this theme may be completely different, with the widget container being a light color and the text on top of it a dark color.

效果圖以下：

 

 

 

1.1、Theme_NoDisplay

它的意思爲任何都不顯示。比較適用於只是運行了activity，但未顯示任何東西。

api原文以下：

Default theme for activities that don’t actually display a UI; that is, they finish themselves before being resumed.

 

 

效果圖以下：

 

 

 

1.二、Theme_NoTitleBar

意思爲：背景主題的沒有標題欄的樣式，默認若是沒有設置的話，顯示黑背景

api原文：

Variant of the default (dark) theme with no title bar

效果圖以下：

 

 

 

1.三、Theme_NoTitleBar_Fullscreen

意思爲：背景主題的沒有標題欄且全屏的樣式，默認爲黑背景

api原文：

Variant of the default (dark) theme that has no title bar and fills the entire screen

效果圖以下：

 

 

 

二、Theme_Black：

它的意思爲默認狀態下黑背景。

api原文以下：

Special variation on the default theme that ensures the background is completely black. This is useful for things like image viewers and media players. If you want the normal (dark background) theme do not use this, use Theme.

效果圖以下：

 

 

 

2.一、Theme_Black_NoTitleBar：

意思爲：黑背景主題的沒有標題欄的樣式

api原文：

Variant of the black theme with no title bar

效果圖以下：

 

 

 

2.二、Theme_Black_NoTitleBar_Fullscreen

意思爲：黑背景主題的沒有標題欄且全屏的樣式

api原文：

Variant of the black theme that has no title bar and fills the entire screen

效果圖以下：

 

 

 

三、Theme_Light

意思爲：默認狀態下亮背景，與上述黑背景Theme_Black相反。

api原文：

Theme for a light background with dark text on top. Set your activity to this theme if you would like such an appearance. As with the default theme, you should try to assume little more than that the background will be a light color.

效果圖以下：

 

3.一、Theme_Light_NoTitleBar

意思爲：亮背景主題的沒有標題欄的樣式，與Theme_Black_NoTitleBar相反

api原文：

Variant of the light theme with no title bar

效果圖以下：

 

 

 

 

3.二、Theme_Light_NoTitleBar_Fullscreen

意思爲：亮背景主題的沒有標題欄且全屏顯示的樣式，與Theme_Black_NoTitleBa_Fullscreenr相反

api原文：

Variant of the light theme that has no title bar and fills the entire screen

效果圖以下：

 

 

 

 

四、Theme_Dialog

意思爲：對話框樣式 將整個activity變成對話框樣式出現。

api原文：

Default theme for dialog windows and activities, which is used by the Dialog class. This changes the window to be floating (not fill the entire screen), and puts a frame around its contents. You can set this theme on an activity if you would like to make an activity that looks like a Dialog.

效果圖以下：這裏須要自定義大小，不然顯示不全。

 

 

 

五、Theme_InputMethod

六、Theme_Panel

意思爲：刪除掉全部多餘的窗口裝飾，在一個空的矩形框中填充內容，做用範圍至關於把dialog中的全部元素所有去掉，只是一個空的矩形框，且此爲默認的樣式。

api原文：

Default dark theme for panel windows. This removes all extraneous window decorations, so you basically have an empty rectangle in which to place your content. It makes the window floating, with a transparent background, and turns off dimming behind the window.

效果圖以下：這裏須要自定義大小，不然顯示不全。

 

 

 

6.一、Theme_Light_Panel

意思爲：刪除掉全部多餘的窗口裝飾，在一個空的矩形框中填充內容，做用範圍至關於把dialog中的全部元素所有去掉，只是一個空的矩形框，且默認是light的樣式。

api原文：

Default light theme for panel windows. This removes all extraneous window decorations, so you basically have an empty rectangle in which to place your content. It makes the window floating, with a transparent background, and turns off dimming behind the window.

效果圖以下：這裏須要自定義大小，不然顯示不全。

 

 

 

 

七、

Theme_Wallpaper

意思爲：使用牆紙作主題，默認狀態。

api原文：

Default theme for windows that want to have the user’s selected wallpaper appear behind them.

效果圖以下：

 

7.一、Theme_WallpaperSettings

意思爲：使用牆紙作主題，默認是使用將上一個界面調暗以後做爲主題，（這裏我很疑惑爲何是上一個界面變暗而不是牆紙主題變暗呢？）

api原文：

Theme for a wallpaper’s setting activity that is designed to be on top of a dark background.

效果圖以下：

 

7.二、Theme_Light_WallpaperSettings

意思爲：使用牆紙作主題，默認Light狀態。

api原文：

Theme for a wallpaper’s setting activity that is designed to be on top of a light background.

效果圖以下：

 

7.三、Theme_Wallpaper_NoTitleBar

意思爲：使用牆紙作主題，且沒有標題欄

api原文：

Variant of the translucent theme with no title bar

效果圖以下：

 

7.四、Theme_Wallpaper_NoTitleBar_Fullscreen

意思爲：使用牆紙作主題，且沒有標題欄，且全屏顯示

api原文：

Variant of the translucent theme that has no title bar and fills the entire screen

效果圖以下：

 

八、Theme_Translucent

意思爲：半透明狀態下的背景，將運行此activity以前的屏幕做爲半透明狀態做爲此activity運行時的樣式。

api原文：

Default theme for translucent activities, that is windows that allow you to see through them to the windows behind. This sets up the translucent flag and appropriate animations for your windows.

效果圖以下：

 

8.一、Theme_Translucent_NoTitleBar

意思爲：半透明狀態下沒有標題欄的背景，將運行此activity以前的屏幕做爲半透明狀態做爲此activity運行時的樣式。

api原文：

Variant of the translucent theme with no title bar

效果圖以下：

 

8.二、Theme_Translucent_NoTitleBar_Fullscreen

意思爲：半透明狀態下沒有標題欄且全屏的背景，將運行此activity以前的屏幕做爲半透明狀態做爲此activity運行時的樣式。

api原文：

Variant of the translucent theme that has no title bar and fills the entire screen

效果圖以下：