Theme(主题) Style(风格)

ToolBar.jgp.JPG
](http://www.jizhuomi.com/android/course/221.html)

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

  1. 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
...
/>
...
  1. 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);
}

一些补充

Android风格与主题（style and theme）

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等选中时的颜色。

AppCompat.jpg

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.jgp.JPG

可以看到我们的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; 
} 
});

效果图

toolbar_效果图.JPG

关于字体的样式，可以在布局文件设置属性
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

参考

Android 中的Theme和Style使用

http://www.360doc.com/content/15/1229/14/7510008_523940779.shtml

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,482评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,377评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,762评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,273评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,289评论 5赞 373
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,046评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,351评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,988评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,476评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2赞 324
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,712评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,261评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2赞 345

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,510评论 25赞 707
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,358评论 0赞 17
  • awesome-android
    afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...
    passiontim阅读 15,401评论 2赞 45
  • 今天我经历了一件事…
    今天…我把看见味道的少女看完了…没错 一天刷完一部剧…破了我当初三天刷完盛夏晚晴天的记录…怎么说呢… 如果有人还没...
    橘子罐头iKyyy阅读 213评论 0赞 0
  • 下一波财富是什么？
    下一波财富是什么？ 下一波财富就是来到无极，穿越你的身体来传递信息。这是我给到所有人的答案，这一刻我在告诉你用无极...
    简宁宝儿阅读 445评论 0赞 0