Android中Style和Theme的使用

文章目錄

• Theme：

 

 

     原帖為：http://henzil.easymorse.com/?p=364

 

越來越多互連網企業都在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檔案代碼：

 

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

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

<?xml version="1.0" encoding="utf-8"?><br /><resources><br /> <mce:style name="CodeFont" parent="@android:style/TextAppearance.Medium"><!--</p><p> <item name="android:layout_width">fill_parent</item><br /> <item name="android:layout_height">wrap_content</item><br /> <item name="android:textColor">#00FF00</item><br /> <item name="android:typeface">monospace</item> </p><p>--></mce:style><style name="CodeFont" parent="@android:style/TextAppearance.Medium" mce_bogus="1"><br /> <item name="android:layout_width">fill_parent</item><br /> <item name="android:layout_height">wrap_content</item><br /> <item name="android:textColor">#00FF00</item><br /> <item name="android:typeface">monospace</item><br /> </style><br /></resources> 

parent屬性工作表示style之間可以繼承，同時可以覆蓋parent style的一些屬性。

 

 

style繼承有兩種方式：

• style的繼承可以通過parent屬性，用來繼承android已經定義好的style，例如:<mce:style name="GreenText" parent="@android:style/TextAppearance"><!--</p><p> <item name="android:textColor">#00FF00</item><br />--></mce:style><style name="GreenText" parent="@android:style/TextAppearance" mce_bogus="1"><br /> <item name="android:textColor">#00FF00</item> </style> 
• 繼承了android中的TextAppearance，同時覆蓋了android:textColor屬性。

• 如果要繼承自訂的style，不需要通過parent屬性，只要style的name以需要繼承的style的name開始後跟新的style的name，中間用“.”隔開。注意：這種方式只適用與自訂的style繼承。

<mce:style name="CodeFont.Red"><!--</p><p> <item name="android:textColor">#FF0000</item><br />--></mce:style><style name="CodeFont.Red" mce_bogus="1"><br /> <item name="android:textColor">#FF0000</item> </style> 

 

 

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

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

效果如下，字型顏色變為了紅色：

style可以多級繼承：

<mce:style name="CodeFont.Red.Big"><!--</p><p> <item name="android:textSize">30sp</item><br />--></mce:style><style name="CodeFont.Red.Big" mce_bogus="1"><br /> <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為：

<?xml version="1.0" encoding="utf-8"?><br /><resources><br /> <mce:style name="CodeFont" ><!--</p><p> <item name="android:textSize">20sp</item><br /> <item name="android:typeface">monospace</item> </p><p>--></mce:style><style name="CodeFont" mce_bogus="1"><br /> <item name="android:textSize">20sp</item><br /> <item name="android:typeface">monospace</item><br /> </style><br /></resources> 

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

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

則application中的所有text字型都會改變，效果如下：

 

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

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

android:theme還可以配置android中已經存在的theme：

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

如果想調整android已經定義好的theme，則可以通過自訂style來實現，例如：

<color name="custom_theme_color">#b0b0ff</color><br /><mce:style name="CustomTheme" parent="android:Theme.Light"><!--</p><p> <item name="android:windowBackground">@color/custom_theme_color</item><br /> <item name="android:colorBackground">@color/custom_theme_color</item><br />--></mce:style><style name="CustomTheme" parent="android:Theme.Light" mce_bogus="1"><br /> <item name="android:windowBackground">@color/custom_theme_color</item><br /> <item name="android:colorBackground">@color/custom_theme_color</item> </style> 

效果如下：

 

 

 

 

level為11以下的theme：

 

 

1、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.2、Theme_NoTitleBar

意思為：背景主題的沒有標題列的樣式，預設如果沒有設定的話，顯示黑背景

api原文：

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

如下：

 

 

 

1.3、Theme_NoTitleBar_Fullscreen

意思為：背景主題的沒有標題列且全屏的樣式，預設為黑背景

api原文：

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

如下：

 

 

 

2、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.1、Theme_Black_NoTitleBar：

意思為：黑背景主題的沒有標題列的樣式

api原文：

Variant of the black theme with no title bar

如下：

 

 

 

2.2、Theme_Black_NoTitleBar_Fullscreen

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

api原文：

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

如下：

 

 

 

3、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.1、Theme_Light_NoTitleBar

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

api原文：

Variant of the light theme with no title bar

如下：

 

 

 

 

3.2、Theme_Light_NoTitleBar_Fullscreen

意思為：亮背景主題的沒有標題列且全螢幕顯示的樣式，與Theme_Black_NoTitleBa_Fullscreenr相反

api原文：

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

如下：

 

 

 

 

4、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.

如下：這裡需要自訂大小，否則顯示不全。

 

 

 

5、Theme_InputMethod

6、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.1、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.

如下：這裡需要自訂大小，否則顯示不全。

 

 

 

 

7、

Theme_Wallpaper

意思為：使用牆紙做主題，預設狀態。

api原文：

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

如下：

 

7.1、Theme_WallpaperSettings

意思為：使用牆紙做主題，預設是使用將上一個介面調暗之後作為主題，（這裡我很疑惑為什麼是上一個介面變暗而不是牆紙主題變暗呢？）

api原文：

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

如下：

 

7.2、Theme_Light_WallpaperSettings

意思為：使用牆紙做主題，預設Light狀態。

api原文：

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

如下：

 

7.3、Theme_Wallpaper_NoTitleBar

意思為：使用牆紙做主題，且沒有標題列

api原文：

Variant of the translucent theme with no title bar

如下：

 

7.4、Theme_Wallpaper_NoTitleBar_Fullscreen

意思為：使用牆紙做主題，且沒有標題列，且全螢幕顯示

api原文：

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

如下：

 

8、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.1、Theme_Translucent_NoTitleBar

意思為：半透明狀態下沒有標題列的背景，將運行此activity之前的螢幕作為半透明狀態作為此activity運行時的樣式。

api原文：

Variant of the translucent theme with no title bar

如下：

 

8.2、Theme_Translucent_NoTitleBar_Fullscreen

意思為：半透明狀態下沒有標題列且全屏的背景，將運行此activity之前的螢幕作為半透明狀態作為此activity運行時的樣式。

api原文：

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

如下：