Styles and Themes

style is a collection of properties that specify the look and format for a View or window. A style can specify properties such as height, padding, font color, font size, background color, and much more. A style is defined in an XML resource that is separate from the XML that specifies the layout.

Styles in Android share a similar philosophy to cascading stylesheets in web design—they allow you to separate the design from the content.

For example, by using a style, you can take this layout XML:

 <TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:typeface="monospace"
android:text="@string/hello" />

And turn it into this:

<TextView
style="@style/CodeFont"
android:text="@string/hello" />

All of the attributes related to style have been removed from the layout XML and put into a style definition called CodeFont, which is then applied with the style attribute. You'll see the definition for this style in the following section.

theme is a style applied to an entire Activity or application, rather than an individual View (as in the example above). When a style is applied as a theme, every View in the Activity or application will apply each style property that it supports. For example, you can apply the same CodeFont style as a theme for an Activity and then all text inside that Activity will have green monospace font.

Defining Styles


To create a set of styles, save an XML file in the res/values/ directory of your project. The name of the XML file is arbitrary, but it must use the .xml extension and be saved in the res/values/ folder.

The root node of the XML file must be <resources>.

For each style you want to create, add a <style> element to the file with a name that uniquely identifies the style (this attribute is required). Then add an <item> element for each property of that style, with a name that declares the style property and a value to go with it (this attribute is required). The value for the <item> can be a keyword string, a hex color, a reference to another resource type, or other value depending on the style property. Here's an example file with a single style:

 <?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">
<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>

Each child of the <resources> element is converted into an application resource object at compile-time, which can be referenced by the value in the <style> element's name attribute. This example style can be referenced from an XML layout as @style/CodeFont (as demonstrated in the introduction above).

The parent attribute in the <style> element is optional and specifies the resource ID of another style from which this style should inherit properties. You can then override the inherited style properties if you want to.

Remember, a style that you want to use as an Activity or application theme is defined in XML exactly the same as a style for a View. A style such as the one defined above can be applied as a style for a single View or as a theme for an entire Activity or application. How to apply a style for a single View or as an application theme is discussed later.

Inheritance

The parent attribute in the <style> element lets you specify a style from which your style should inherit properties. You can use this to inherit properties from an existing style and then define only the properties that you want to change or add. You can inherit from styles that you've created yourself or from styles that are built into the platform. (See Using Platform Styles and Themes, below, for information about inheriting from styles defined by the Android platform.) For example, you can inherit the Android platform's default text appearance and then modify it:

<style name="GreenText" parent="@android:style/TextAppearance">
  <item name="android:textColor">#00FF00</item>
</style>

If you want to inherit from styles that you've defined yourself, you do not have to use the parent attribute. Instead, just prefix the name of the style you want to inherit to the name of your new style, separated by a period. For example, to create a new style that inherits the CodeFont style defined above, but make the color red, you can author the new style like this:

非系统定义的样式继承时不用,parent关键字,直接以名字方式,[父样式名.子样式名.孙样式名].
<style name="CodeFont.Red">
<item name="android:textColor">#FF0000</item>
</style>

Notice that there is no parent attribute in the <style> tag, but because the name attribute begins with the CodeFont style name (which is a style that you have created), this style inherits all style properties from that style. This style then overrides the android:textColor property to make the text red. You can reference this new style as @style/CodeFont.Red.

You can continue inheriting like this as many times as you'd like, by chaining names with periods. For example, you can extend CodeFont.Red to be bigger, with:

<style name="CodeFont.Red.Big">
<item name="android:textSize">30sp</item>
</style>

This inherits from both CodeFont and CodeFont.Red styles, then adds the android:textSize property.

Note: This technique for inheritance by chaining together names only works for styles defined by your own resources. You can't inherit Android built-in styles this way. To reference a built-in style, such asTextAppearance, you must use the parent attribute.

Style Properties

Now that you understand how a style is defined, you need to learn what kind of style properties—defined by the<item> element—are available. You're probably familiar with some already, such as layout_width andtextColor. Of course, there are many more style properties you can use.

找<style>下有多个<item>,每个item都是一个样式属性,如何知道某个view或主题有哪些样式属性呢?在文档中看它的 class reference,它支持的XML attributes就是.

The best place to find properties that apply to a specific View is the corresponding class reference, which lists all of the supported XML attributes. For example, all of the attributes listed in the table of TextView XML attributes can be used in a style definition for a TextView element (or one of its subclasses). One of the attributes listed in the reference is android:inputType, so where you might normally place the android:inputType attribute in an <EditText> element, like this:

<EditText
android:inputType="number"
... />

You can instead create a style for the EditText element that includes this property:

<style name="Numbers">
<item name="android:inputType">number</item>
...
</style>

So your XML for the layout can now implement this style:

<EditText
style="@style/Numbers"
... />

This simple example may look like more work, but when you add more style properties and factor-in the ability to re-use the style in various places, the pay-off can be huge.

For a reference of all available style properties, see the R.attr reference. Keep in mind that all View objects don't accept all the same style attributes, so you should normally refer to the specific View class for supported style properties. However, if you apply a style to a View that does not support all of the style properties, the View will apply only those properties that are supported and simply ignore the others.

如果自定义了某个view支持的样式属性,那么这个样式属性的效果无效.

Some style properties, however, are not supported by any View element and can only be applied as a theme. These style properties apply to the entire window and not to any type of View. For example, style properties for a theme can hide the application title, hide the status bar, or change the window's background. These kind of style properties do not belong to any View object. To discover these theme-only style properties, look at the R.attr reference for attributes that begin with window. For instance, windowNoTitle and windowBackground are style properties that are effective only when the style is applied as a theme to an Activity or application. See the next section for information about applying a style as a theme.

  R.attr 中含有所有样式属性,其中以window开头的用来描述主题样式.

Note: Don't forget to prefix the property names in each <item> element with the android: namespace. For example: <item name="android:inputType">.

Applying Styles and Themes to the UI


There are two ways to set a style:

  • To an individual View, by adding the style attribute to a View element in the XML for your layout.
  • Or, to an entire Activity or application, by adding the android:theme attribute to the <activity> or<application> element in the Android manifest.

  When you apply a style to a single View in the layout, the properties defined by the style are applied only to that View. If a style is applied to a ViewGroup, the child View elements will not inherit the style properties—only the element to which you directly apply the style will apply its properties. However, you can apply a style so that it applies to all View elements—by applying the style as a theme.

View和ViewGroup指定的样式只对它本身有效,无传递性.但主题样式则向下传递.

To apply a style definition as a theme, you must apply the style to an Activity or application in the Android manifest. When you do so, every View within the Activity or application will apply each property that it supports. For example, if you apply the CodeFont style from the previous examples to an Activity, then all View elements that support the text style properties will apply them. Any View that does not support the properties will ignore them. If a View supports only some of the properties, then it will apply only those properties.

Apply a style to a View

Here's how to set a style for a View in the XML layout:

<TextView
style="@style/CodeFont"
android:text="@string/hello" />

Now this TextView will be styled as defined by the style named CodeFont. (See the sample above, in Defining Styles.)

Note: The style attribute does not use the android: namespace prefix.

Apply a theme to an Activity or application

To set a theme for all the activities of your application, open the AndroidManifest.xml file and edit the<application> tag to include the android:theme attribute with the style name. For example:

<application android:theme="@style/CustomTheme">

If you want a theme applied to just one Activity in your application, then add the android:theme attribute to the<activity> tag instead.

Just as Android provides other built-in resources, there are many pre-defined themes that you can use, to avoid writing them yourself. For example, you can use the Dialog theme and make your Activity appear like a dialog box:

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

Or if you want the background to be transparent, use the Translucent theme:

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

If you like a theme, but want to tweak it, just add the theme as the parent of your custom theme. For example, you can modify the traditional light theme to use your own color like this:

 <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>

(Note that the color needs to supplied as a separate resource here because the android:windowBackgroundattribute only supports a reference to another resource; unlike android:colorBackground, it can not be given a color literal.)

有些样式属性的值只能是其它样式文件.

Now use CustomTheme instead of Theme.Light inside the Android Manifest:

<activity android:theme="@style/CustomTheme">

Select a theme based on platform version

Newer versions of Android have additional themes available to applications, and you might want to use these while running on those platforms while still being compatible with older versions. You can accomplish this through a custom theme that uses resource selection to switch between different parent themes, based on the platform version.

For example, here is the declaration for a custom theme which is simply the standard platforms default light theme. It would go in an XML file under res/values (typically res/values/styles.xml):

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

To have this theme use the newer holographic theme when the application is running on Android 3.0 (API Level 11) or higher, you can place an alternative declaration for the theme in an XML file in res/values-v11, but make the parent theme the holographic theme:

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

Now use this theme like you would any other, and your application will automatically switch to the holographic theme if running on Android 3.0 or higher.

A list of the standard attributes that you can use in themes can be found at R.styleable.Theme.

For more information about providing alternative resources, such as themes and layouts, based on the platform version or other device configurations, see the Providing Resources document.

Using Platform Styles and Themes


The Android platform provides a large collection of styles and themes that you can use in your applications. You can find a reference of all available styles in the R.style class. To use the styles listed here, replace all underscores in the style name with a period. For example, you can apply the Theme_NoTitleBar theme with"@android:style/Theme.NoTitleBar".

The R.style reference, however, is not well documented and does not thoroughly describe the styles, so viewing the actual source code for these styles and themes will give you a better understanding of what style properties each one provides. For a better reference to the Android styles and themes, see the following source code:

These files will help you learn through example. For instance, in the Android themes source code, you'll find a declaration for <style name="Theme.Dialog">. In this definition, you'll see all of the properties that are used to style dialogs that are used by the Android framework.

For more information about the syntax for styles and themes in XML, see the Style Resource document.

For a reference of available style attributes that you can use to define a style or theme (e.g., "windowBackground" or "textAppearance"), see R.attr or the respective View class for which you are creating a style.

Styles and Themens(1)详述的更多相关文章

  1. Styles and Themens(5)样式文件Style.xml中各元素的含义

    Style Resource See also Styles and Themes A style resource defines the format and look for a UI. A s ...

  2. Styles and Themens(3)android所有主题表

    The Android platform provides a large collection of styles and themes that you can use in your appli ...

  3. Styles and Themens(4)android自定义主题时可使用的属性

    A list of the standard attributes that you can use in themes can be found at R.styleable.Theme. Cons ...

  4. 塞翁失马,焉知非福:由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考

    最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts ...

  5. 关于MVC4.0中@Styles.Render用法与详解

    本文分享于http://keleyi.com/a/bjac/q74dybjc.htm文章,感觉写的蛮好所以就拿过来做笔记了,希望对大家有帮助 最近公司的新项目用了MVC 4.0,接下来一步步把 工作中 ...

  6. 2.ReactNative Properties|States|Styles 笔记

    原文地址:http://reactnative.cn/docs/0.31/props.html#content 1. property: 如下代码所示 import React, { Componen ...

  7. React Native 一个组件styles BUG

    'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = Re ...

  8. 最全数据结构详述: List VS IEnumerable VS IQueryable VS ICollection VS IDictionary

    本文对常用的数据结构详述:Array, ArrayList,List,IList,ICollection, Stack, Queue, HashTable, Dictionary, IQueryabl ...

  9. 在_Layout模版中使用@Styles.Render()没有效果

    刚才有测试一个功能,就是在_Layout母版中使用了@Styles.Render()时行Render样式文件,所有在此母版下的视图均没有应用到样式,没有效果.是什么原因? 经查证资料,原来Insus. ...

随机推荐

  1. Linux 快照

    10个方法助你轻松完成Linux系统恢复 提交 我的留言 加载中 已留言 这也就是为什么系统恢复功能会让人感觉如此神奇.你可以很快地重新回到工作中去,就像什么事情都没有发生一样,也不用去管造成系统故障 ...

  2. Centos7 Samba 独立账户

    创建了一个组:smbgrp 和用户srijan通过认证来访问Samba服务器. groupadd smbgrp useradd srijan -G smbgrp smbpasswd -a srijan ...

  3. webpack-Modules(模块)

    模块(Modules) 在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块. 每个模块具有比完整程序更小的接触面,使得校验. ...

  4. iOS xmpp的使用

    #import "AppDelegate.h" //#import "DBAreaItem.h" #pragma mark - #pragma mark Pri ...

  5. 手机阅读行业SWOT分析

    上个星期,在公司内部的分享活动上给童鞋们分享了手机阅读行业现状,小伙伴儿们嗷嗷待哺的眼神促使我把PPT转换为博客里的文字和图片,再一次更加深入地进入手机阅读. 通过SWOT分析分析我们能够对手机阅读行 ...

  6. 在windows cgywinportable上,通过运行linux命令,批量改动文件名。

    在windows cgywinportable上.通过运行linux命令.批量改动文件名. 实例:将当前文件夹下的全部文件名称加上.sql find ./ -type f -exec mv {}  ' ...

  7. CronTab命令实例

    每2分钟 将date写入到time.log(以下的为奇数分钟运行) */2 * * * * date >> ~/time.log 1-59/2 * * * * date >> ...

  8. 邮件:事务失败。 服务器响应为:DT:SPM 163 smtp

    几年前我做的一个项目,日发邮件最高峰时几十万.自以为对邮件发送方面已经有了一定认识,所以近期机缘巧合之下,又有项目需要发送邮件,不禁自信满满,暗自庆幸能不手到擒来乎? 不想老革命遇到新问题.我原先的邮 ...

  9. 深入研究java.lang.Object类

    前言:Java的类库日益庞大.所包括的类和接口也不计其数.但当中有一些非常重要的类和接口,是Java类库中的核心部分.常见的有String.Object.Class.Collection.ClassL ...

  10. 原生ajax请求和jsonp

    1.原生ajax请求 var obj = new XMLHttpRequest(); obj.open("POST", url, true); obj.setRequestHead ...