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

效果图以下：