1.1样式化常见组件

布局和视图

Android 平台被设计为能运行在各种类型的设备上,这些设备会有各种各样的屏幕尺寸和分辨率。为了帮助开发人员应对这个挑战,Android 提供了大量的用户界面组件工具集,开发人员可以根据具体的应用程序选择使用组件或自定义组件。Android 还非常依赖于可扩展的 XML 框架和设置资源限定符以实现能够兼容各种环境变化的浮动布局。本章中,我们会学习如何使用这个框架以满足具体的开发需求。

1.1.1 问题

你要让自己的应用程序在所有用户可能运行的 Android 版本上创建一致的外观和体
验,同时减少维护这些自定义元素所需的代码量.

1.1.1 解决方案

(API Level 1)

可以将定义应用程序外观的常见属性抽象化到 XML 样式中。样式是视图自定义属性
的集合,如文本大小或背景色,这些属性应该应用于应用程序内的多个视图。将这些属性
抽象化到样式中,就可以在单个位置定义公共的元素,使得代码更易于更新和维护。
Android 还支持将多个样式共同分组到称为“主题”的全局元素中。主题被应用于整
个上下文(如 Activity 或应用程序),并且定义了应适用于该上下文中所有视图的样式。在应
用程序中启动的每个 Activity 都应用了一个主题,即使你没有定义任何主题。在此情况下,
改为应用默认的系统主题。

1.1.3 实现机制

为研究样式的概念,接下来创建如图 1-1 所示的 Activity 布局。

Paste_Image.png

从图中可以看到,此视图中一些元素的外观需要定制,使其不同于通过所应用的默认系统主题样式化的常见外观。一种方法是直接在 Activity 布局中定义适用于全部视图的所有属性。如果这样做的话,则使用的代码如代码清单 1-1 所示。其中:RadioButton里面的属性android:button="@null"表示去掉前面的圆点

代码清单 1-1 res/layout/activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textStyle="bold"
android:text="Select One"
/>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<RadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:minHeight="@dimen/buttonHeight"
android:button="@null"
android:background="@drawable/backgroumd_radio"
android:gravity="center"
android:text="One"
/>
<RadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:minHeight="@dimen/buttonHeight"
android:button="@null"
android:background="@drawable/backgroumd_radio"
android:gravity="center"
android:text="Two"
/>
<RadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:minHeight="@dimen/buttonHeight"
android:button="@null"
android:background="@drawable/backgroumd_radio"
android:gravity="center"
android:text="Three"
/>
</RadioGroup>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textStyle="bold"
android:text="Select All"
/>
<TableRow>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="@dimen/buttonHeight"
android:minWidth="@dimen/checkboxWidth"
android:button="@null"
android:gravity="center"
android:textStyle="italic"
android:textColor="@color/text_checkbox"
android:text="One"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="@dimen/buttonHeight"
android:minWidth="@dimen/checkboxWidth"
android:button="@null"
android:gravity="center"
android:textStyle="italic"
android:textColor="@color/text_checkbox"
android:text="Two"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="@dimen/buttonHeight"
android:minWidth="@dimen/checkboxWidth"
android:button="@null"
android:gravity="center"
android:textStyle="italic"
android:textColor="@color/text_checkbox"
android:text="Three"
/>
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="@dimen/buttonWidth"
android:background="@drawable/backgroumd_button"
android:textColor="@color/colorAccent"
android:text="@android:string/ok"
android:layout_margin="10dp"
/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="@dimen/buttonWidth"
android:background="@drawable/backgroumd_button"
android:textColor="@color/colorAccent"
android:text="@android:string/cancel"
android:layout_margin="10dp"
/>


</TableRow>


</TableLayout>

在此代码中,我们突出强调了每个视图中与其他相同类型视图共有的属性。这些属性使按钮、文本标题和可选中的元素具有相同的外观。其中有很多重复出现的代码,我们可以通过样式进行简化。首先,我们需要创建新的资源文件,并且使用<style>标记定义每个属性组。代码清单1-2 显示了完整的抽象化代码。

代码清单 1-2 res/values/styles.xml
<resources>
<!--小部件的样式-->
<style name="LabelText" parent="android:TextAppearance.Large">
<item name="android:textStyle">bold</item>
</style>
<style name="FormButton" parent="android:Widget.Button">
<item name="android:minWidth">@dimen/buttonWidth</item>
<item name="android:background">@drawable/background_button</item>
<item name="android:textColor">@color/accentPink</item>
</style>
<style name="FormRadioButton" parent="android:Widget.CompoundButton.
RadioButton">
<item name="android:minHeight">@dimen/buttonHeight</item>
<item name="android:button">@null</item>
<item name="android:background">@drawable/background_radio</item>
<item name="android:gravity">center</item>
</style>
<style name="FormCheckBox" parent="android:Widget.CompoundButton.CheckBox">
<item name="android:minHeight">@dimen/buttonHeight</item>
<item name="android:minWidth">@dimen/checkboxWidth</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:textStyle">italic</item>
<item name="android:textColor">@color/text_checkbox</item>
</style>
</resources>

<style>组将需要应用于每个视图类型的公共属性分组在一起。视图仅可以接受单个样式定义,因此必须在一个组中聚集用于此视图的所有属性。然而,样式支持继承性,这就使我们可以级联每个样式的定义,之后再将它们应用于视图。请注意每个样式如何声明父样式,父样式是我们应继承的基础框架样式。父样式不是必需的,但因为每个视图上存在的单一样式规则,使用自定义版本覆盖默认样式可替换主题的默认值。如果没有继承基础父样式,则必须定义视图需要的所有属性。通过框架的基础样式扩展小部件的样式,可确保我们只需要添加希望定制的、默认主题外观之外的属性。

Paste_Image.png
样式继承采用两种形式之一。如前所示,样式可以显式声明其父样式:
<style name="BaseStyle" />
<style name="NewStyle" parent="BaseStyle" />
NewStyle 是 BaseStyle 的扩展,包括在父样式中定义的所有属性。样式还支持隐式父
样式声明语法,如下所示:
<style name="BaseStyle" />
<style name="BaseStyle.Extended" />
BaseStyle.Extended 以相同的方式从 BaseStyle 继承其属性。此版本的功能与显式示例
相同,只是更加简洁。两种形式不应混用,如果混用,就无法实现在单个样式中采用多个
父样式。最终,人们始终优先选择显式父样式声明,而代码的可读性就会降低。

我们可以对原始布局文件应用新的样式,得到的简化版本如代码清单 1-3 所示。

代码清单 1-3 res/layout/activity_styled.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/LabelText"
android:text="Select One"/>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
style="@style/FormRadioButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="One"/>
<RadioButton
style="@style/FormRadioButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Two"/>
<RadioButton
style="@style/FormRadioButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Three"/>
</RadioGroup>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/LabelText"
android:text="Select All"/>
<TableRow>
<CheckBox
style="@style/FormCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"/>
<CheckBox
style="@style/FormCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Two"/>
<CheckBox
style="@style/FormCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three"/>
</TableRow>
<TableRow>
<Button
style="@style/FormButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/ok"/>
<Button
style="@style/FormButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@android:string/cancel"/>
</TableRow>
</TableLayout>

通过对每个视图应用样式属性,就可以避免重复的显式属性引用,而改为对每个元素只引用一次。此行为的一个例外情况是 TextView头部,它接受特殊的 android:textAppearance属性。此属性获取一个样式引用,并且仅应用于文本格式化属性(大小、样式、颜色等)。使用 TextView 时,仍然可以同时应用单独的样式属性。这样,TextView 实例在对单个视图使用多种样式的框架中就可以得到支持。

主题

在 Android 中,主题(Theme)就是一种应用到整个应用程序或某个 Activity 的外观风格。使用主题有两个选择,使用系统主题或创建自定义主题。无论采用哪种方法,都要在AndroidManifest.xml 文件中设置主题,如代码清单 1-4 所示。

代码清单 1-4 AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.c
...>
<!--通过 application 标签来设置全局主题-->
<application android:theme="APPLICATION_THEME
...>
<!—通过 activity 标签来设置单个主题-->
<activity android:name=".Activity"
android:theme="ACTIVITY_THEME_NAME"
...>
<intent-filter>
...
</intent-filter>
</activity>
</application>
</manifest>

(1) 系统主题

Android 框架中打包的 styles.xml 和 themes.xml 文件中包含了一些主题选项,其中是一
些有用的自定义属性。完整的清单请查阅 SDK 文档中的 R.style,
下面是几个常用示例:

● Theme.Light:标准主题的变体,该主题的背景和用户元素使用相反的颜色主题。
它是 Android 3.0 以前版本的应用程序默认推荐使用的基础主题。

● Theme.NoTitleBar.Fullscreen:移除标题栏和状态栏,全屏显示(去掉屏幕上所有的
组件)。

● Theme.Dialog:让 Activity 看起来像对话框的有用主题。

● Theme.Holo.Light:(API Level 11)使用逆配色方案的主题并默认拥有一个 Action
Bar。这是 Android 3.0 上应用程序默认推荐的基本主题。

● Theme.Holo.Light.DarkActionBar:(API Level 14)使用逆配色方案的主题,但 Action
Bar 是黑色实线的。这是 Android 4.0 上应用程序默认推荐的基本主题。

● Theme.Material.Light: (API Level 21)通过小型的原色调色板控制的简化颜色方案主
题。此主题还支持使用提供的原色对标准小部件着色。这是 Android 5.0 上应用程
序默认推荐的基本主题。

注意:

代码清单 1-5 设置为应用程序主题的清单文件
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
…>
<!—通过 application 标签来设置全局主题-->
<application android:theme="Theme.NoTitleBar"
…>
…
</application>
</manifest>

(2) 自定义主题

有时候系统提供的主题还不能满足需求。毕竟,系统提供的主题并不能自定义窗口中
的所有元素。定义自定义主题能方便地解决这个问题。

找到项目目录 res/values 下的 styles.xml 文件,如果没有就创建一个。记住,主题就是
应用范围更广的风格样式,所以两者是在同一个地方定义的。与窗口自定义有关的主题元
素可以在 SDK 的 R.attr 引用中找到,下面是常用的一些元素:

● android:windowNoTitle:控制是否要移除默认的标题栏;设为 true 以移除标题栏。

● android:windowFullscreen:控制是否移除系统状态栏;设为 true 以移除状态栏并全
屏显示。

● android:windowBackground:将某个颜色或 Drawable 资源设为背景。

● android:windowContentOverlay:窗口内容的前景之上放置的 Drawable 资源。默认
情况下,就是状态栏下的阴影;可以用任何资源代替默认的状态栏,或者设为
null(XML 中为@null)以将其移除。

此外,Material 主题接受一系列颜色属性,这些属性用于对应用程序界面小部件着色:

● android:colorPrimary:用于对主要的界面元素着色,如 Action Bar 和滚动边界发光
特效。同样也影响最近对标题栏颜色的操作。

● android:colorPrimaryDark:对系统控件着色,如状态栏的背景。

● android:colorAccent:应用于拥有焦点或已激活控件的默认颜色。

● android:colorControlNormal:重写没有焦点或未激活控件的颜色。

● android:colorControlActivated:重写拥有焦点或已激活控件的颜色。如果同时定义
了强调色,则替换该颜色。

● android:colorControlHighlight:重写正在按下的控件的颜色。

代码清单 1-6 就是一个 styles.xml 文件示例,其中创建了一个自定义主题,以便为应用
程序界面提供品牌特有的颜色。

代码清单 1-6 res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="BaseAppTheme" parent="@style/Theme.AppCompat.Light.
DarkActionBar">
<!-- Action Bar 的背景色 -->
<item name="colorPrimary">@color/primaryBlue</item>
<!-- 状态栏的着色 -->
<item name="colorPrimaryDark">@color/primaryDarkBlue</item>
<!-- 应用于所有拥有焦点/已激活控件的默认颜色 -->
<item name="colorAccent">@color/accentPink</item>
<!-- 未选择控件的颜色 -->
<item name="colorControlNormal">@color/controlNormalGreen</item>
<!-- 已激活控件的颜色,重写强调色 -->
<item name="colorControlActivated">@color/controlActivatedGreen</item>
</style>
</resources>

注意,主题也可以从父主题继承属性,所以并不需要从头创建整个主题。在这个示例
中,我们选择了继承 Android 默认的系统主题,只自定义我们要修改的属性。所有平台主
题都定义在 Android 包的 res/values/themes.xml 文件中。关于样式和主题的更多细节请查阅
SDK 文档。

代码清单 1-7展示了如何在 AndroidManufest.xml 中对单个 Activity实例应用这些主题。

代码清单 1-7 在清单文件中为每个 Activity 设置主题
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
…>
<!—通过 application 标签来设置全局主题-->
<application
…>
<!—通过 activity 标签来设置单独的主题 -->
<activity android:name=".ActivityOne"
android:theme="@style/AppTheme"
…>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.
category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,520评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,029评论 4 62
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,600评论 18 139
  • 一个人,倘若总是处在痛苦、压抑、烦躁的心态之中,那么,即使不得癌症,无疑也会疾病缠身;然而,如果一个人以积极的心态...
    啦啦啦啦啦啦LA阅读 260评论 1 3
  • colon (:) Create vectors, array subscripting, and for loo...
    六便士少年阅读 404评论 0 1