Android主题(Theme)和风格(Style)
1. Android主题(Theme)和风格(Style)概述
类似Web开发中,HTML代码负责内容部分,CSS部分负责表现部分,可以把内容和形式分离开。同样在Android的开发中,我们可以使用Theme、Style+UI组件的方式,实现内容和形式的分离,做到界面的自定义。这样可以避免重复的工作,而且便于后期项目的维护。
风格Style是一个包含一种或多种格式化属性的集合,你可以把它应用在UI组件上。主题Theme也是一个包含一种或多种格式化属性的集合,你可以把它应用在整个应用程序(Application)中或者某个窗口(Activity)中.
定义一个style或者theme的方法是一样的。在res/values/目录下简历style.xml或者theme.xml文件,在xml中建立形如这样的代码:
theme和style一样可以继承
自定义主题(Theme)和风格(Style)
2.Android 中的Theme和Style使用
- Android的style的使用
在res/values/styles.xml中resource中定义三个样式,
<style name = "TextView">
<item name = "android:textSize">38sp</item>
<item name = "android:textColor">#128</item>
<item name = "android:shadowRadius">1.0</item>
<item name = "android:background">#035</item>
</style>
<style name = "EditText">
...
</style>
<style name = "Button">
...
</item>
然后在res/layout文件下的activity_main.xml中的控件中引用刚才定义的Style。
<TextView
android:id = "@+id/textView1"
style = "@style/TextView"
android:layout_width = "wrap_content"
android:layout_height="wrap_content"
android:text = "@string/hello_world">
<Button
...
/>
...
- Android的Theme的使用
首先在res/values/themes.xml定义Theme
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme" parent="android:Theme.Light">
<item name="android:windowFullscreen">true</item>
<item name="android:windowTitleSize">60dip</item>
<item name="android:windowTitleStyle">@style/WindowTitl</item>
<item name="android:background">#234</item>
</style>
<style name="WindowTitle">
<item name="android:singleLine">true</item>
<item name="android:shadowColor">#658</item>
<item name="android:shadowRadius">2.75</item>
</style>
</resources>
在mainfest.xml中应用主题:
然后在AndroidManifest.xml中使用刚才定义的主题。
只要定义application的android:theme属性为style/Theme即可
<application
android:allowBackup="true"
android:icon = "@drawable/ic_launcher"
android:label = "@string/app_name"
android:theme = "@style/Theme">
<activity
android:name = ""
android:label="@string/app_name">
<intent-filter>
<action android:name = "android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
在程序中使用主题的方法:
也可以用setTheme(R.style.Theme)来调用主题。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(android.R.style.Theme_Light);
setContentView(R.layout.linear_layout_3);
}
一些补充
theme和style文件中资源引用方式
我们用@符号和?符号来应用资源。@符号表明了我们应用的资源是前边定义过的(或者在前一个项目中或者在Android 框架中)。问号?表明了我们引用的资源的值在当前的主题当中定义过。
Android中提供了几种内置的资源,有好几种主题你可以切换而不用自己写。比如你可以用对话框主题来让你的Activity看起来像一个对话框。在manifest中定义如下:
<activity android:theme=”@android:style/Theme.Dialog”>
继承,用parent实现
如果你喜欢一个主题,但是想做一些轻微的改变,你只需要将这个主题添加为父主题。比如我们修改Theme.Dialog主题。我们来继承Theme.Dialog来生成一个新的主题。
<style name=”CustomDialogTheme” parent=”@android:style/Theme.Dialog”>
继承了Theme.Dialog后,我们可以按照我们的要求来调整主题。我们可以修改在Theme.Dialog中定义的每个item元素的值,然后我们在Android Manifest 文件中使用CustomDialogTheme 而不是 Theme.Dialog 。
style,可继承的样式,可以参照sdk的
docs/guide/topics/ui/themes.html#PlatformStyles文件
在style中可以定义的属性,可以参考sdk的
docs/reference/android/R.attr.html
需要查阅系统自带的主题,可以在文档的
reference-->android-->R.style 中查看。
Android:Theme.Material和Theme.AppCompat
引用张鸿洋的博客
首先要了解的当然是其主题的风格以及app bar.
Material Design的Theme
md的主题有:
@android:style/Theme.Material
@android:style/Theme.Material.Light
@android:style/Theme.MaterialLight.DarkActionBar
与之对应的Compat Theme:
Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar
个性化的Color Palette
我们可以根据我们的app风格,去定制Color Palette(调色板),重点有以下几个属性:
<resource>
<!-- Base application theme.-->
<style name = "AppBaseTheme" parent = "Theme.AppCompat">
<!-- customize the color palette -->
<item name = "colorPrimary">@color/material_blue_500</item>
<item name = "colorPrimaryDark">@color/material_blue_700</item>
<item name = "colorAccent">@color/material_green_A200</item>
</style>
</resources>
colorPrimary对应ActionBar的颜色
colorPrimaryDark对应状态栏的颜色
colorAccent对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。
metarial design的theme允许我们去设置status bar的颜色,如果你项目的最小支持版本为5.0,那么你可以使用android:Theme.Material
,设置android:statusBarColor
。当然了这种情况目前来说比较少,所以我们多数使用的是Theme.AppCompat
,通过设置android:colorPrimaryDark.
来设置status bar颜色。(ps:默认情况下,android:statusBarColor
的值继承自android:colorPrimaryDark
).
对于5.0以下的设备,目前colorPrimaryDark
无法去个性化状态栏的颜色;底部的navagationBar可能也不一样,更别说设置颜色了
一个例子:
values/styles.xml
<resources>
<!--Base application theme. -->
<style name = "AppTheme" parent="AppBaseTheme">
</style>
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/material_blue_500</item>
<item name="colorPrimaryDark">@color/material_blue_700</item>
<item name="colorAccent">@color/material_green_A200</item>
</style>
values-v21/styles.xml
<resources>
<style name = "AppTheme" parent="AppBaseTheme">
<item name = "android:statusBarColor">@color/material_blue_700</item>
</style>
</resource>
values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="material_blue_500">#009688</color>
<color name="material_blue_700">#00796B</color>
<color name="material_green_A200">#FD87A9</color>
</resources>
ToolBar的使用
在使用ActionBar的时候,会很多问题:这个文字能不能定制,位置能不能改变,图标的间距怎么控制等等,ActionBar设计不灵活。为此官方提供了ToolBar,并且提供了support library用于向下兼容。
Toolbar之所以灵活,是因为它其实就是一个ViewGroup,我们在使用的时候和普通的组件一样,在布局文件中声明。
(1)ToolBar的引入
a) 隐藏原来的ActionBar
隐藏可以通过修改我们继承的主题为:Theme.AppCompat.Light.NoActionBar,当然也可以通过设置以下属性完成:
<item name = "windowActionBar">false</item>
<item name = "android:windowNoTitle">true</item>
我们这里使用前者
<style name = "AppBaseTheme" parent = "Theme.AppCompat.Light.NoActionBar">
<!--customize the color palette -->
<item name="colorPrimary">@color/material_blue_500</item>
<item name="colorPrimaryDark">@color/material_blue_700</item>
<item name="colorAccent">@color/material_green_A200</item>
</style>
b)在布局文件中声明
<android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar"
android:layout_height = "wrap_content"
android:layout_width = "match_parent"
/>
实际使用布局文件
<LinearLayout
xmlns:android="http://schemas.android.c
om/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.v7.widget.GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizonta" app:useDefaultMargins="true"
app:columnCount="3">
<TextView
android:text="First Name:"
app:layout_gravity="right" />
<EditText
android:ems="10"
app:layout_columnSpan="2" />
<TextView
android:text="Last Name:"
app:layout_column="0"
app:layout_gravity="right" />
<EditText
android:ems="10"
app:layout_columnSpan="2" />
<TextView
android:text="Visit Type:"
app:layout_column="0"
app:layout_gravity="right" />
<RadioGroup
app:layout_columnSpan="2">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Business" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Social" />
</RadioGroup>
<Button
android:text="Ok"
app:layout_column="1" />
<Button
android:text="Cancel"
app:layout_column="2" />
</android.support.v7.widget.GridLayout>
</LinearLayout>
c)代码中设定
public class MainActivity extends AppCompatActivity{
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar)findViewById(R.id.id_toolbar);
setSupportActionBar(toolbar);
}
ok,就是先隐藏ActionBar,然后在布局文件中声明,最后代码中设定以下。现在看一下效果图:
可以看到我们的ToolBar显示出来了,默认的Title为ToolBar,但是这个样式实在是不敢恭维,下面看我们如何定制它。
(2)定制ToolBar
首先给它一个nice的背景色,还记得前面的colorPrimary么,用于控制ActionBar的背景色的。当然这里我们的ToolBar就是一个普通的ViewGroup在布局中,所以我们直接使用background就好,值可以为:?attr/colorPrimary使用主题中定义的值。
ToolBar中包含Nav Icon,Logl,Title,Sub Title, Menu Items.
我们可以通过代码设置上述ToolBar中的控件:
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar=(Toolbar)findViewById(R.id.id_toolbar);
//App Logo
toolbar.setLogo(R.mipmap.ic_launcher);
//Title
toolbar.setTitle("App Title");
//Sub Title
toolbar.setSubtitle("Sub title");
setSupportActionBar(toolbar);
//Navigation Icon
toolbar.setNavigationIcon(R.drawable.ic_toc_white_24dp);
可选方案,当然如果你喜欢,也可以在布局文件中去设置部分属性:
<android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar"
app:title="App Title"
app:subtitle="Sub Title"
app:navigationIcon="@drawable/ic_toc_white_24dp"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="attr/colorPrimary"/>
至于Menu Item,依然支持在menu/menu_main.xml去声明,然后复写onCreateOptionsMenu和onOptionsItemSelected即可。
可选方案,也可以通过
toolbar.setOnMenuItemClickListener实现点击MenuItem的回调
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
效果图
关于字体的样式,可以在布局文件设置属性
app:titleTextApperance,
app:subtitleTextApperance
或者代码
setTitleTextApperance,
setSubTitleTextApperance
设置
实战
简单介绍Toolbar后,计划整合Toolbar、DrawerLayout、ActionBarDrawerToggle写个实用的例子。
大致思路:
整体实现还是比较容易的,首先需要引入DrawerLayout,(如果你对DrawerLayout不了解,可以参考 Android DrawerLayout 高仿QQ5.2双向侧滑菜单),然后去初始化mActionBarDrawerToggle,mActionBarDrawerToggle实际上是个DrawerListener,设置mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);就已经能够实现上面点击Nav Icon切换效果了。当然了细节还是挺多的。
我们的效果图,左侧菜单为Fragment,内容区域为Fragment,点击左侧菜单切换内容区域的Fragment即可。关于Fragment的知识,可以查看:Android Fragment 你应该知道的一切
.布局文件:
activity_main.xml
参考
http://www.360doc.com/content/15/1229/14/7510008_523940779.shtml