您的位置:首页 > 其它

风格style与主题theme(一)-style、theme的关系与使用

2016-06-25 15:35 447 查看

第1节 概述

主题theme与风格style是两个很相近的概念,经常把它们混乱着称呼。它们都定义在xml文件中,都使用
<style/>
标签。

主题与风格是包含与被包含的关系。例如同一个主题中,按钮使用一种风格,进度条使用一种风格。可以说主题是由具备各种风格的组件组合起来的。

从下面定义的主题例子中,我们可以看到

这个主题里面的
文字
,使用的是
TextAppearance.DeviceDefault
风格;

这个主题里面的
按钮
,使用的是
Widget.DeviceDefault.Button
风格;

这个主题的
窗口标题
,使用的是
WindowTitle.DeviceDefault
风格;

<style name="Theme.DeviceDefault" parent="Theme.Material" >
<!-- Text styles -->
<item name="textAppearance">@style/TextAppearance.DeviceDefault</item>
<!-- Button styles -->
<item name="buttonStyle">@style/Widget.DeviceDefault.Button</item>
<!-- Window attributes -->
<item name="windowTitleStyle">@style/WindowTitle.DeviceDefault</item>
......
<style/>


由此我们将先来介绍风格
style
,之后再来介绍主题
theme


第2节 风格-
style

style
指的是某一类具体的控件的风格,例如
TextView
的风格、
Button
的风格。

指定控件的
style
,就是指定诸如它的字体大小、字体颜色、字体种类等元素,

<style name="BtnStyle">
<item name="android:textStyle">bold</item>
<item name="android:textSize">35sp</item>
<item name="android:textColor">#FFFFFFFF</item>
</style>


这好比一本书,书的一级标题要使用一号字体(字体要比别的字体大),二级标题要使用二号字体,以此类推。每一级标题使用的文字,就对应的一种
style
。以后在写书的时候,每使用某级的标题,就自然将文字显示成了这一级应该的字体大小。

2.1
style
的定义

res\values
目录下,新建一个
styles.xml
文件;

在新建的文件中,使用\

<resources>
<style name="BtnStyle"> <item name="android:textStyle">bold</item> <item name="android:textSize">35sp</item> <item name="android:textColor">#FFFFFFFF</item> </style>
</resources>


2.2
style
的继承

style
也可以从已有的
style
继承而来。

style
有两种继承方式,一种是显式继承,一种是隐式继承。

2.2.1 显示继承

继承已有的style时,使用
parent=
属性,

在子style中,定义需要扩展或者需要覆盖的属性,

<style name="ExBtnStyle" parent="@style/BtnStyle">

<!--增加了background属性的设定-->
<item name="android:background">@drawable/btn_selector</item>

<!--覆盖了父style中的textColor属性-->
<item name="android:textColor">#FFFFFFFF</item>
</style>


2.2.2 隐式继承

继承已有的
style
,给新
style
.
为分隔符取名,例如
"BtnStyle.ExBtnStyle
,被继承的
style
名称要放在前面;

子style
中,定义需要扩展或者需要覆盖的属性,

<style name="BtnStyle.ExBtnStyle">

<!--增加了background属性的设定-->
<item name="android:background">@drawable/btn_selector</item>

<!--覆盖了父style中的textColor属性-->
<item name="android:textColor">#FFFFFFFF</item>
</style>


2.3
style
的使用

style
有两种使用方式。

直接针对具体的控件使用。

通过控件的
style
属性设置,

<Button
android:id="@+id/btn_3"
android:text="3"
<!--通过style属性设置-->
style="@style/BaseBtnStyle.DigitalBtnStyle" />


提供给
theme
使用。

相关的内容请参考主题相关的章节。

2.4
style
可用的各种属性

style
可以设置的属性很多,不同的控件有不同的属性。具体有哪些属性可以设置,可以参考控件的开发文档,例如
TextView
就有很多属性,开发文档都有列举。

2.5 属性值的设置

在对属性值设置时,可以使用三种方式。

直接赋值:直接将要设定的值写到\标签当中,

<item name="android:textColor">#FFFFFFFF</item>


@
引用:将要设定的值通过
@
引用,设置给\标签,这种引用是将要设定的值换了一个名字,

<!--text_color的数值已经定义在了别的地方-->
<item name="android:textColor">@color/text_color</item>


引用:这种引用并不直接设置值,而是表明希望设置的值与“另一个属性”的值相同;这“另一个属性”定义在当前使用的主题当中(怎么定义的会在主题相关的章节介绍),

<!--使用与android:textColorLink属性相同的值,而不关心这个数值是到底是多少-->
<item name="android:textColor">?android:attr/textColorLink
</item>


第3节 主题-
theme

主题theme由具备各种风格style的组件组合起来的。如果说style关注的是具体某个控件,那么theme就关注的是整体宏观的方面,例如一个Activity或者一个应用整体。

3.1
theme
的定义

theme
的定义与
style
的定义完全一样,一样的标签、一样的写法,

res\values
目录下,新建一个
themes.xml
文件(如果使用
styles.xml
文件)也可以;

在新建的文件中,使用\

<resources>
<style name="MyTheme">
<item name="colorPrimary">#FFFF0000</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>


3.2
theme
的继承

theme
的继承与
style
的继承完全一样

theme
也可以从已有的
theme
继承而来。

theme
style
一样,有两种继承方式,一种是显式继承,一种是隐式继承。

3.2.1 显示继承

继承已有的
theme
时,使用
parent=
属性,

在子
theme
中,定义需要扩展或者需要覆盖的属性,

<style name="ExMyTheme" parent="MyTheme">

<!--覆盖了父style中的colorAccent属性-->
<item name="colorAccent">#FFFFFFFF</item>
</style>


3.2.2 隐式继承

继承已有的
theme
,给新
theme
.
为分隔符取名,例如
"MyTheme.ExMyTheme
,被继承的
theme
名称要放在前面;

子theme
中,定义需要扩展或者需要覆盖的属性,

<style name="MyTheme.ExMyTheme">
<!--覆盖了父style中的colorAccent属性-->
<item name="colorAccent">#FFFFFFFF</item>
</style>


3.3
theme
的使用

theme
常用在两种地方,一个是应用,一个是Activity。

3.3.1 应用使用
theme

配置文件中设置:在项目工程的
AndroidManifest.xml
文件中,
<application/>
标签的
android:theme
属性,就用来指定整个应用的
theme


<application
<!--指定应用的theme-->
android:theme="@style/MyTheme">


java源码中设置:当应用被创建的时候,在
Application
onCreate()
函数中设置,

@Override
public void onCreate() {
super.onCreate();

this.setTheme(R.style.MyTheme);
}


3.3.2 Activity使用theme

配置文件中设置:在项目工程的
AndroidManifest.xml
文件中,
<activity/>
标签的
android:theme
属性,就用来指定该Activity的
theme


<activity android:name=".MainActivity"
<!--指定应用的theme-->
android:theme="@style/MyTheme">


java源码中设置:当应用被创建的时候,在
Activity
onCreate()
函数中设置,

@Override
public void onCreate() {
super.onCreate();

this.setTheme(R.style.MyTheme);
}


3.4 属性值的设置

在对属性值设置时,可以使用三种方式,前两种已经在
style
的相关章节介绍了,下面介绍
?
引用。

这种引用并不直接设置值,而是表明希望设置的值与“另一个属性”的值相同;这“另一个属性”定义在当前使用的主题当中,例如,

创建自定义属性
myAttr
:在
res\values
目录下创建一个
attrs.xml
文件,添加一个自定义属性
myAttr


<resources>
<!--format设置成color,说明myAttr希望获得的值是用来表示颜色的-->
<attr name="myAttr" format="color" />
</resources>


定义一个
theme
-MyTheme,设置
myAttr
的值,

<resources>
<style name="MyTheme">
<item name="myAttr">#FFFF00</item>
</style>
</resources>


让这个应用使用
MyTheme
,作为应用的主题(当然也可以指定某个具体的Activity使用这个主题),

<application
<!--指定应用的theme-->
android:theme="@style/MyTheme">        


定义一个
style
-MyStyle,使用
myAttr
来指定按钮文字的颜色,

<style name="BtnStyle">
<item name="android:textColor">?myAttr</item>
</style>


为布局文件中的一个
Button
使用
MyStyle


<Button
android:id="@+id/btn_3"
android:text="3"
<!--通过style属性设置-->
style="@style/MyStyle" />


这样,
Button
显示的文字颜色就是
MyTheme
myAttr
指定的颜色了。

3.5
theme
可用的各种属性

theme
可以设置的属性很多,可以参考安卓的系统源码themes.xml themes_device_defaults.xml themes_material.xml themes_holo.xml等,里面使用了很多定义主题时用到的属性。

不过里面有的属性是不对应用层开放的,在应用层使用的这些属性的时候,如果遇到编译错误,那么多半就是这个原因。

系统主题的属性很多,我们将选择性的介绍一些重要属性的用法和效果。

3.5.1 调色板属性

调色板属性是主题最为重要的属性,它决定了主题的配色。这些属性包括,

android:colorPrimaryDark


android:colorPrimary


android:colorAccent


android:colorEdgeEffect


android:colorControlNormal


android:colorControlActivated


android:colorControlHighlight


android:colorButtonNormal


android:colorSwitchThumbNormal


如果一款应用设计了自己的配色方案,那么修改这些属性,会让开发的效率大大提高。

例如
colorAccent
就被很多控件利用
?访问
的方式使用到,一旦修改了它,很多控件的配色也就跟着变化了。例如,我们将该属性的值设置成绿色,



其它属性也对应着修改界面控件的某些颜色,由于它们都是和主题配色相关的属性,所以称它们为调色板属性。

3.5.2 导航栏、状态栏属性

从安卓5.0起,Android SDK加入了对导航栏和状态栏颜色的设定属性,

导航栏:
android:navigationBarColor


状态栏:
android:statusBarColor


<style name="MyTheme">
<!--导航栏设置成红色-->
<item name="android:navigationBarColor">#F00</item>

<!--状态栏设置成绿色-->
<item name="android:statusBarColor">#0F0</item>
</style>




3.6 系统主题

安卓系统内置了很多种主题,它们各有各的特点,也具有很多共同的性质。

按照设计思路,分成三个大类:

Theme
:这是安卓系统刚诞生时使用的界面元素设计理念,具有暗色和亮色两种风格;



Holo
:这是安卓系统3.0时开始使用的界面元素设计理念,具有暗色和亮色两种风格;



Material
:这是安卓系统5.0时开始使用的界面元素设计理念,具有暗色和亮色两种风格;



以上三个大类下面还有很多主题,可以通过Android Studio提供的
preview
工具看到这些主题。

打开任意一个布局文件,例如
activity_main.xml
;

点击
预览窗口
上红色方框对应的图标,会弹出一个
Select Theme
窗口;



这里分门别类的列举出了所有可用的系统内置的主题。

最后需要特别的指出一个类型的主题:
device default


它并不是除了
theme
holo
material
之外的第四类,而是为了安卓系统在不同版本上的兼容性而采取的兼容方案。

可以简单的认为,当使用这种主题的应用在安卓3.0~安卓5.0之间的版本上运行时,它使用的主题就是
holo
;当使用这种主题的应用在安卓5.0以上的版本,它使用的主题就是
material


第1节 概述

主题theme与风格style是两个很相近的概念,经常把它们混乱着称呼。它们都定义在xml文件中,都使用
<style/>
标签。

主题与风格是包含与被包含的关系。例如同一个主题中,按钮使用一种风格,进度条使用一种风格。可以说主题是由具备各种风格的组件组合起来的。

从下面定义的主题例子中,我们可以看到

这个主题里面的
文字
,使用的是
TextAppearance.DeviceDefault
风格;

这个主题里面的
按钮
,使用的是
Widget.DeviceDefault.Button
风格;

这个主题的
窗口标题
,使用的是
WindowTitle.DeviceDefault
风格;

<style name="Theme.DeviceDefault" parent="Theme.Material" >
<!-- Text styles -->
<item name="textAppearance">@style/TextAppearance.DeviceDefault</item>
<!-- Button styles -->
<item name="buttonStyle">@style/Widget.DeviceDefault.Button</item>
<!-- Window attributes -->
<item name="windowTitleStyle">@style/WindowTitle.DeviceDefault</item>
......
<style/>


由此我们将先来介绍风格
style
,之后再来介绍主题
theme


第2节 风格-
style

style
指的是某一类具体的控件的风格,例如
TextView
的风格、
Button
的风格。

指定控件的
style
,就是指定诸如它的字体大小、字体颜色、字体种类等元素,

<style name="BtnStyle">
<item name="android:textStyle">bold</item>
<item name="android:textSize">35sp</item>
<item name="android:textColor">#FFFFFFFF</item>
</style>


这好比一本书,书的一级标题要使用一号字体(字体要比别的字体大),二级标题要使用二号字体,以此类推。每一级标题使用的文字,就对应的一种
style
。以后在写书的时候,每使用某级的标题,就自然将文字显示成了这一级应该的字体大小。

2.1
style
的定义

res\values
目录下,新建一个
styles.xml
文件;

在新建的文件中,使用\

<resources>
<style name="BtnStyle"> <item name="android:textStyle">bold</item> <item name="android:textSize">35sp</item> <item name="android:textColor">#FFFFFFFF</item> </style>
</resources>


2.2
style
的继承

style
也可以从已有的
style
继承而来。

style
有两种继承方式,一种是显式继承,一种是隐式继承。

2.2.1 显示继承

继承已有的style时,使用
parent=
属性,

在子style中,定义需要扩展或者需要覆盖的属性,

<style name="ExBtnStyle" parent="@style/BtnStyle">

<!--增加了background属性的设定-->
<item name="android:background">@drawable/btn_selector</item>

<!--覆盖了父style中的textColor属性-->
<item name="android:textColor">#FFFFFFFF</item>
</style>


2.2.2 隐式继承

继承已有的
style
,给新
style
.
为分隔符取名,例如
"BtnStyle.ExBtnStyle
,被继承的
style
名称要放在前面;

子style
中,定义需要扩展或者需要覆盖的属性,

<style name="BtnStyle.ExBtnStyle">

<!--增加了background属性的设定-->
<item name="android:background">@drawable/btn_selector</item>

<!--覆盖了父style中的textColor属性-->
<item name="android:textColor">#FFFFFFFF</item>
</style>


2.3
style
的使用

style
有两种使用方式。

直接针对具体的控件使用。

通过控件的
style
属性设置,

<Button
android:id="@+id/btn_3"
android:text="3"
<!--通过style属性设置-->
style="@style/BaseBtnStyle.DigitalBtnStyle" />


提供给
theme
使用。

相关的内容请参考主题相关的章节。

2.4
style
可用的各种属性

style
可以设置的属性很多,不同的控件有不同的属性。具体有哪些属性可以设置,可以参考控件的开发文档,例如
TextView
就有很多属性,开发文档都有列举。

2.5 属性值的设置

在对属性值设置时,可以使用三种方式。

直接赋值:直接将要设定的值写到\标签当中,

<item name="android:textColor">#FFFFFFFF</item>


@
引用:将要设定的值通过
@
引用,设置给\标签,这种引用是将要设定的值换了一个名字,

<!--text_color的数值已经定义在了别的地方-->
<item name="android:textColor">@color/text_color</item>


引用:这种引用并不直接设置值,而是表明希望设置的值与“另一个属性”的值相同;这“另一个属性”定义在当前使用的主题当中(怎么定义的会在主题相关的章节介绍),

<!--使用与android:textColorLink属性相同的值,而不关心这个数值是到底是多少-->
<item name="android:textColor">?android:attr/textColorLink
</item>


第3节 主题-
theme

主题theme由具备各种风格style的组件组合起来的。如果说style关注的是具体某个控件,那么theme就关注的是整体宏观的方面,例如一个Activity或者一个应用整体。

3.1
theme
的定义

theme
的定义与
style
的定义完全一样,一样的标签、一样的写法,

res\values
目录下,新建一个
themes.xml
文件(如果使用
styles.xml
文件)也可以;

在新建的文件中,使用\

<resources>
<style name="MyTheme">
<item name="colorPrimary">#FFFF0000</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>


3.2
theme
的继承

theme
的继承与
style
的继承完全一样

theme
也可以从已有的
theme
继承而来。

theme
style
一样,有两种继承方式,一种是显式继承,一种是隐式继承。

3.2.1 显示继承

继承已有的
theme
时,使用
parent=
属性,

在子
theme
中,定义需要扩展或者需要覆盖的属性,

<style name="ExMyTheme" parent="MyTheme">

<!--覆盖了父style中的colorAccent属性-->
<item name="colorAccent">#FFFFFFFF</item>
</style>


3.2.2 隐式继承

继承已有的
theme
,给新
theme
.
为分隔符取名,例如
"MyTheme.ExMyTheme
,被继承的
theme
名称要放在前面;

子theme
中,定义需要扩展或者需要覆盖的属性,

<style name="MyTheme.ExMyTheme">
<!--覆盖了父style中的colorAccent属性-->
<item name="colorAccent">#FFFFFFFF</item>
</style>


3.3
theme
的使用

theme
常用在两种地方,一个是应用,一个是Activity。

3.3.1 应用使用
theme

配置文件中设置:在项目工程的
AndroidManifest.xml
文件中,
<application/>
标签的
android:theme
属性,就用来指定整个应用的
theme


<application
<!--指定应用的theme-->
android:theme="@style/MyTheme">


java源码中设置:当应用被创建的时候,在
Application
onCreate()
函数中设置,

@Override
public void onCreate() {
super.onCreate();

this.setTheme(R.style.MyTheme);
}


3.3.2 Activity使用theme

配置文件中设置:在项目工程的
AndroidManifest.xml
文件中,
<activity/>
标签的
android:theme
属性,就用来指定该Activity的
theme


<activity android:name=".MainActivity"
<!--指定应用的theme-->
android:theme="@style/MyTheme">


java源码中设置:当应用被创建的时候,在
Activity
onCreate()
函数中设置,

@Override
public void onCreate() {
super.onCreate();

this.setTheme(R.style.MyTheme);
}


3.4 属性值的设置

在对属性值设置时,可以使用三种方式,前两种已经在
style
的相关章节介绍了,下面介绍
?
引用。

这种引用并不直接设置值,而是表明希望设置的值与“另一个属性”的值相同;这“另一个属性”定义在当前使用的主题当中,例如,

创建自定义属性
myAttr
:在
res\values
目录下创建一个
attrs.xml
文件,添加一个自定义属性
myAttr


<resources>
<!--format设置成color,说明myAttr希望获得的值是用来表示颜色的-->
<attr name="myAttr" format="color" />
</resources>


定义一个
theme
-MyTheme,设置
myAttr
的值,

<resources>
<style name="MyTheme">
<item name="myAttr">#FFFF00</item>
</style>
</resources>


让这个应用使用
MyTheme
,作为应用的主题(当然也可以指定某个具体的Activity使用这个主题),

<application
<!--指定应用的theme-->
android:theme="@style/MyTheme">        


定义一个
style
-MyStyle,使用
myAttr
来指定按钮文字的颜色,

<style name="BtnStyle">
<item name="android:textColor">?myAttr</item>
</style>


为布局文件中的一个
Button
使用
MyStyle


<Button
android:id="@+id/btn_3"
android:text="3"
<!--通过style属性设置-->
style="@style/MyStyle" />


这样,
Button
显示的文字颜色就是
MyTheme
myAttr
指定的颜色了。

3.5
theme
可用的各种属性

theme
可以设置的属性很多,可以参考安卓的系统源码themes.xml themes_device_defaults.xml themes_material.xml themes_holo.xml等,里面使用了很多定义主题时用到的属性。

不过里面有的属性是不对应用层开放的,在应用层使用的这些属性的时候,如果遇到编译错误,那么多半就是这个原因。

系统主题的属性很多,我们将选择性的介绍一些重要属性的用法和效果。

3.5.1 调色板属性

调色板属性是主题最为重要的属性,它决定了主题的配色。这些属性包括,

android:colorPrimaryDark


android:colorPrimary


android:colorAccent


android:colorEdgeEffect


android:colorControlNormal


android:colorControlActivated


android:colorControlHighlight


android:colorButtonNormal


android:colorSwitchThumbNormal


如果一款应用设计了自己的配色方案,那么修改这些属性,会让开发的效率大大提高。

例如
colorAccent
就被很多控件利用
?访问
的方式使用到,一旦修改了它,很多控件的配色也就跟着变化了。例如,我们将该属性的值设置成绿色,



其它属性也对应着修改界面控件的某些颜色,由于它们都是和主题配色相关的属性,所以称它们为调色板属性。

3.5.2 导航栏、状态栏属性

从安卓5.0起,Android SDK加入了对导航栏和状态栏颜色的设定属性,

导航栏:
android:navigationBarColor


状态栏:
android:statusBarColor


<style name="MyTheme">
<!--导航栏设置成红色-->
<item name="android:navigationBarColor">#F00</item>

<!--状态栏设置成绿色-->
<item name="android:statusBarColor">#0F0</item>
</style>




3.6 系统主题

安卓系统内置了很多种主题,它们各有各的特点,也具有很多共同的性质。

按照设计思路,分成三个大类:

Theme
:这是安卓系统刚诞生时使用的界面元素设计理念,具有暗色和亮色两种风格;



Holo
:这是安卓系统3.0时开始使用的界面元素设计理念,具有暗色和亮色两种风格;



Material
:这是安卓系统5.0时开始使用的界面元素设计理念,具有暗色和亮色两种风格;



以上三个大类下面还有很多主题,可以通过Android Studio提供的
preview
工具看到这些主题。

打开任意一个布局文件,例如
activity_main.xml
;

点击
预览窗口
上红色方框对应的图标,会弹出一个
Select Theme
窗口;



这里分门别类的列举出了所有可用的系统内置的主题。

最后需要特别的指出一个类型的主题:
device default


它并不是除了
theme
holo
material
之外的第四类,而是为了安卓系统在不同版本上的兼容性而采取的兼容方案。

可以简单的认为,当使用这种主题的应用在安卓3.0~安卓5.0之间的版本上运行时,它使用的主题就是
holo
;当使用这种主题的应用在安卓5.0以上的版本,它使用的主题就是
material
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: