Android主題（Theme）和風(fēng)格（Style）
1. Android主題(Theme)和風(fēng)格(Style)概述
類(lèi)似Web開(kāi)發(fā)中总处，HTML代碼負(fù)責(zé)內(nèi)容部分增淹，CSS部分負(fù)責(zé)表現(xiàn)部分，可以把內(nèi)容和形式分離開(kāi)油湖。同樣在Android的開(kāi)發(fā)中，我們可以使用Theme、Style+UI組件的方式嚣鄙，實(shí)現(xiàn)內(nèi)容和形式的分離，做到界面的自定義串结。這樣可以避免重復(fù)的工作哑子，而且便于后期項(xiàng)目的維護(hù)。
風(fēng)格Style是一個(gè)包含一種或多種格式化屬性的集合肌割，你可以把它應(yīng)用在UI組件上卧蜓。主題Theme也是一個(gè)包含一種或多種格式化屬性的集合，你可以把它應(yīng)用在整個(gè)應(yīng)用程序(Application)中或者某個(gè)窗口(Activity)中.
定義一個(gè)style或者theme的方法是一樣的把敞。在res/values/目錄下簡(jiǎn)歷style.xml或者theme.xml文件烦却，在xml中建立形如這樣的代碼：
theme和style一樣可以繼承
自定義主題(Theme)和風(fēng)格(Style)
2.Android 中的Theme和Style使用
- Android的style的使用
在res/values/styles.xml中resource中定義三個(gè)樣式，
<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中應(yīng)用主題：
然后在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)來(lái)調(diào)用主題。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(android.R.style.Theme_Light);
setContentView(R.layout.linear_layout_3);
}
一些補(bǔ)充
Android風(fēng)格與主題（style and theme）
theme和style文件中資源引用方式
我們用@符號(hào)和伸蚯？符號(hào)來(lái)應(yīng)用資源摩渺。@符號(hào)表明了我們應(yīng)用的資源是前邊定義過(guò)的(或者在前一個(gè)項(xiàng)目中或者在Android 框架中)。問(wèn)號(hào)剂邮？表明了我們引用的資源的值在當(dāng)前的主題當(dāng)中定義過(guò)摇幻。
Android中提供了幾種內(nèi)置的資源，有好幾種主題你可以切換而不用自己寫(xiě)挥萌。比如你可以用對(duì)話(huà)框主題來(lái)讓你的Activity看起來(lái)像一個(gè)對(duì)話(huà)框绰姻。在manifest中定義如下：
<activity android:theme=”@android:style/Theme.Dialog”>
繼承，用parent實(shí)現(xiàn)
如果你喜歡一個(gè)主題引瀑，但是想做一些輕微的改變狂芋，你只需要將這個(gè)主題添加為父主題。比如我們修改Theme.Dialog主題憨栽。我們來(lái)繼承Theme.Dialog來(lái)生成一個(gè)新的主題帜矾。
<style name=”CustomDialogTheme” parent=”@android:style/Theme.Dialog”>
繼承了Theme.Dialog后，我們可以按照我們的要求來(lái)調(diào)整主題屑柔。我們可以修改在Theme.Dialog中定義的每個(gè)item元素的值屡萤，然后我們?cè)贏ndroid Manifest 文件中使用CustomDialogTheme 而不是 Theme.Dialog 。
style掸宛，可繼承的樣式死陆，可以參照sdk的
docs/guide/topics/ui/themes.html#PlatformStyles文件
在style中可以定義的屬性，可以參考sdk的
docs/reference/android/R.attr.html
需要查閱系統(tǒng)自帶的主題唧瘾，可以在文檔的
reference-->android-->R.style 中查看措译。
Android:Theme.Material和Theme.AppCompat
引用張鴻洋的博客
首先要了解的當(dāng)然是其主題的風(fēng)格以及app bar.
Material Design的Theme
md的主題有：
@android:style/Theme.Material
@android:style/Theme.Material.Light
@android:style/Theme.MaterialLight.DarkActionBar
與之對(duì)應(yīng)的Compat Theme：
Theme.AppCompat
Theme.AppCompat.Light
Theme.AppCompat.Light.DarkActionBar
個(gè)性化的Color Palette
我們可以根據(jù)我們的app風(fēng)格迫像，去定制Color Palette(調(diào)色板)，重點(diǎn)有以下幾個(gè)屬性：
<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對(duì)應(yīng)ActionBar的顏色
colorPrimaryDark對(duì)應(yīng)狀態(tài)欄的顏色
colorAccent對(duì)應(yīng)EditText編輯時(shí)瞳遍、RadioButton選中闻妓、CheckBox等選中時(shí)的顏色。
metarial design的theme允許我們?nèi)ピO(shè)置status bar的顏色掠械，如果你項(xiàng)目的最小支持版本為5.0由缆，那么你可以使用android:Theme.Material
，設(shè)置android:statusBarColor
猾蒂。當(dāng)然了這種情況目前來(lái)說(shuō)比較少均唉，所以我們多數(shù)使用的是Theme.AppCompat
，通過(guò)設(shè)置android:colorPrimaryDark.
來(lái)設(shè)置status bar顏色肚菠。（ps：默認(rèn)情況下舔箭，android:statusBarColor
的值繼承自android:colorPrimaryDark
）.
對(duì)于5.0以下的設(shè)備，目前colorPrimaryDark
無(wú)法去個(gè)性化狀態(tài)欄的顏色蚊逢；底部的navagationBar可能也不一樣层扶，更別說(shuō)設(shè)置顏色了
一個(gè)例子：
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的時(shí)候，會(huì)很多問(wèn)題：這個(gè)文字能不能定制烙荷，位置能不能改變镜会，圖標(biāo)的間距怎么控制等等，ActionBar設(shè)計(jì)不靈活终抽。為此官方提供了ToolBar戳表，并且提供了support library用于向下兼容。
Toolbar之所以靈活昼伴，是因?yàn)樗鋵?shí)就是一個(gè)ViewGroup,我們?cè)谑褂玫臅r(shí)候和普通的組件一樣匾旭，在布局文件中聲明。
(1)ToolBar的引入
a) 隱藏原來(lái)的ActionBar
隱藏可以通過(guò)修改我們繼承的主題為：Theme.AppCompat.Light.NoActionBar,當(dāng)然也可以通過(guò)設(shè)置以下屬性完成：
<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"
/>
實(shí)際使用布局文件
<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)代碼中設(shè)定
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圃郊，然后在布局文件中聲明价涝，最后代碼中設(shè)定以下。現(xiàn)在看一下效果圖：
可以看到我們的ToolBar顯示出來(lái)了描沟，默認(rèn)的Title為T(mén)oolBar飒泻，但是這個(gè)樣式實(shí)在是不敢恭維鞭光，下面看我們?nèi)绾味ㄖ扑?/p>
(2)定制ToolBar
首先給它一個(gè)nice的背景色吏廉，還記得前面的colorPrimary么，用于控制ActionBar的背景色的惰许。當(dāng)然這里我們的ToolBar就是一個(gè)普通的ViewGroup在布局中席覆，所以我們直接使用background就好，值可以為:?attr/colorPrimary使用主題中定義的值汹买。
ToolBar中包含Nav Icon,Logl,Title,Sub Title, Menu Items.
我們可以通過(guò)代碼設(shè)置上述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);
可選方案佩伤，當(dāng)然如果你喜歡聊倔，也可以在布局文件中去設(shè)置部分屬性：
<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去聲明生巡，然后復(fù)寫(xiě)onCreateOptionsMenu和onOptionsItemSelected即可耙蔑。
可選方案，也可以通過(guò)
toolbar.setOnMenuItemClickListener實(shí)現(xiàn)點(diǎn)擊MenuItem的回調(diào)
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
});
效果圖
關(guān)于字體的樣式孤荣，可以在布局文件設(shè)置屬性
app:titleTextApperance,
app:subtitleTextApperance
或者代碼
setTitleTextApperance,
setSubTitleTextApperance
設(shè)置
實(shí)戰(zhàn)
簡(jiǎn)單介紹Toolbar后甸陌，計(jì)劃整合Toolbar、DrawerLayout盐股、ActionBarDrawerToggle寫(xiě)個(gè)實(shí)用的例子钱豁。
大致思路：
整體實(shí)現(xiàn)還是比較容易的，首先需要引入DrawerLayout疯汁，（如果你對(duì)DrawerLayout不了解牲尺，可以參考 Android DrawerLayout 高仿QQ5.2雙向側(cè)滑菜單)，然后去初始化mActionBarDrawerToggle,mActionBarDrawerToggle實(shí)際上是個(gè)DrawerListener幌蚊，設(shè)置mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);就已經(jīng)能夠?qū)崿F(xiàn)上面點(diǎn)擊Nav Icon切換效果了谤碳。當(dāng)然了細(xì)節(jié)還是挺多的。
我們的效果圖溢豆，左側(cè)菜單為Fragment估蹄，內(nèi)容區(qū)域?yàn)镕ragment，點(diǎn)擊左側(cè)菜單切換內(nèi)容區(qū)域的Fragment即可沫换。關(guān)于Fragment的知識(shí)臭蚁，可以查看：Android Fragment 你應(yīng)該知道的一切
.布局文件：
activity_main.xml
參考
http://www.360doc.com/content/15/1229/14/7510008_523940779.shtml
