一、前言

作為一個(gè)安卓開(kāi)發(fā)者，我們一般把焦點(diǎn)放在app的功能上。但是僅僅有功能是不夠的，界面和功能一樣重要。有兩種方法可以改變app的外觀。第一種就是直接在xml中直接修改View的屬性。這種方法只適合于只有幾個(gè)View和Activity的簡(jiǎn)單app。第二種方法就是創(chuàng)建自定義的樣式和主題。如果你對(duì)web開(kāi)發(fā)熟悉，第一種方法類似于使用內(nèi)聯(lián)的CSS樣式，而第二種類似于使用style sheets。

這篇文章我們將介紹如何創(chuàng)建自定義的樣式和主題。

二、創(chuàng)建Styles

樣式顯然是應(yīng)用到UI控件上面的。因此，讓我們先創(chuàng)建一個(gè)新的空activity并添加兩個(gè)View到布局文件中。

<View android:layout_width="100dp"
 android:layout_height="100dp"
 android:layout_margin="5dp"
 android:background="#009688"
 android:id="@+id/box1" />
 
<View android:layout_width="100dp"
 android:layout_height="100dp"
 android:background="#00BCD4"
 android:layout_margin="5dp"
 android:id="@+id/box2" />

就如你看到的，屬性layout_width 和 layout_margin是被顯式的定義在每個(gè)View中。

要為這個(gè)View創(chuàng)建一個(gè)新的樣式，右鍵它并選擇Refactor > Extract > Style。

現(xiàn)在你會(huì)看到一個(gè)對(duì)話框，里面可以為樣式設(shè)置名字，還可以選擇要包含的屬性。我們命名為MyBox，并選擇除了background之外的所有屬性。

當(dāng)你點(diǎn)擊ok之后，你會(huì)看到第一個(gè)View的代碼已經(jīng)變了。

<View android:background="#009688"
 android:id="@+id/box1"
 style="@style/MyBox" />

這個(gè)View現(xiàn)在有了一個(gè)指向MyBox 樣式的style屬性。你可以打開(kāi)res/values/styles.xml來(lái)查看這個(gè)樣式的定義

<style name="MyBox">
 <item name="android:layout_width">100dp</item>
 <item name="android:layout_height">100dp</item>
 <item name="android:layout_margin">5dp</item>
</style>

一旦一個(gè)樣式被定義好，你就可以應(yīng)用到任何View中。比如，把MyBox應(yīng)用到第二個(gè)View：

<View android:background="#00BCD4"
 android:id="@+id/box2"
 style="@style/MyBox" />

應(yīng)用了樣式之后，activity中的兩個(gè)View就是這個(gè)樣子：

三、繼承 Styles

Android允許你在其他樣式的基礎(chǔ)上創(chuàng)建一個(gè)新樣式。換句話說(shuō)就是允許你繼承style。

繼承一個(gè)style有兩種不同的語(yǔ)法。第一種語(yǔ)法被稱為隱式的語(yǔ)法，使用.號(hào)作為標(biāo)記。比如，如果你要?jiǎng)?chuàng)建兩個(gè)parent為MyBox，名為 TEAL和CYAN的子樣式：

<style name="MyBox.TEAL">
 <item name="android:background">#009688</item>
</style>
 
<style name="MyBox.CYAN">
 <item name="android:background">#00BCD4</item>
</style>

你也許能猜到MyBox.TEAL 和 MyBox.CYAN 都具有MyBox的所有屬性，除此之外，它們還有android:background屬性。

第二種語(yǔ)法通常叫做顯式的語(yǔ)法。它使用一個(gè)parent屬性，其值就是parent style的名稱。這里是一個(gè)定義名為TealBox的樣式的代碼片段：

<style name="TealBox" parent="MyBox">
 <item name="android:background">#009688</item>
</style>

應(yīng)用一個(gè)派生的style跟應(yīng)用一個(gè)普通的沒(méi)有區(qū)別。

<View android:id="@+id/box1"
 style="@style/TealBox" />
 
<View android:id="@+id/box2"
 style="@style/MyBox.CYAN" />

大多數(shù)開(kāi)發(fā)者在繼承自己的style時(shí)使用隱式的語(yǔ)法，而繼承系統(tǒng)style時(shí)使用顯式的語(yǔ)法。

四、創(chuàng)建Themes

目前為止，我們只是把style應(yīng)用到activity里面的View中。Android還允許你把style應(yīng)用到整個(gè)activity和應(yīng)用中。當(dāng)一個(gè)樣式被應(yīng)用到activity或者application中時(shí)，就變成了一個(gè)一個(gè)theme（主題）。

默認(rèn)，使用最新版本Android Studio創(chuàng)建的所有的app都使用一個(gè)叫做AppTheme的主題。AppTheme是AppCompat的子類，一個(gè)非常大而廣泛的主題，影響到幾乎所有常用視圖的外觀。

你可以在styles.xml中找到AppTheme的定義：

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
</style>

AppTheme遵循Material Design.因此，為了創(chuàng)建符合Material Design spec的主題，使用AppTheme作為parent是一個(gè)不錯(cuò)的主題。要不然，你也可以直接使用Theme.AppCompat作為parent。

雖然你可以書(shū)寫(xiě)XML代碼來(lái)創(chuàng)建主題－記住，它們只是樣式而已－但是在本教程，我將演示如何使用Android Studio的主題編輯器來(lái)做這些復(fù)雜的工作。

要打開(kāi)主題編輯器，打開(kāi)Tools菜單選擇Android > Theme Editor。

在主題編輯器窗口的右邊，你不僅有修改主題的控件，還有創(chuàng)建一個(gè)新主題的控件。左邊展示主題修改后的預(yù)覽結(jié)果。

要?jiǎng)?chuàng)建一個(gè)新主題，點(diǎn)擊Theme下拉菜單，選擇Create New Theme選項(xiàng)。

在彈出的對(duì)話框中，設(shè)置新主題的名稱為MyTheme然后點(diǎn)擊ok。

到此時(shí)， styles.xml將有一行新代碼：

<style name="MyTheme" parent="AppTheme" />

讓我們使用主題編輯器來(lái)修改MyTheme。為了讓事情變的簡(jiǎn)單，本教程只修改colorPrimary, colorPrimaryDark, 以及 colorAccent屬性的值。

要修改colorPrimary的值，點(diǎn)擊colorPrimary按鈕。主題編輯器將顯示一個(gè)顏色對(duì)話框。選擇你想要的顏色，但是記住給它一個(gè)新名字，如果你忘記了，主題編輯器將覆蓋AppTheme的這個(gè)顏色。

修改colorPrimaryDark和colorAccent的值是相同的步驟。主題編輯器將自動(dòng)根據(jù)你選擇的colorPrimary推薦合適的bothcolorPrimaryDark和colorAccent。

現(xiàn)在MyTheme的定義看起來(lái)就是這樣：

<style name="MyTheme" parent="AppTheme" >
 <item name="colorPrimary">@color/colorPrimaryMyTheme</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDarkMyTheme</item>
 <item name="colorAccent">@color/colorAccentMyTheme</item>
</style>

五、 應(yīng)用Themes

在應(yīng)用我們創(chuàng)建的主題之前，讓我們先添加幾個(gè)常用的控件到activity中。這樣更容易看到主題的效果。

下面的代碼創(chuàng)建了一個(gè)普通的Button，一個(gè)無(wú)邊框的Button，一個(gè)彩色的Button，一個(gè)Checkbox，一個(gè)RadioButton，一個(gè)Switch，一個(gè)Seekbar，一個(gè)TextView以及一個(gè)EditText：

<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="normal"
 android:id="@+id/normal_button" />
 
<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="borderless"
 android:id="@+id/borderless_button"
 style="@style/Widget.AppCompat.Button.Borderless" />
 
<Button android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="colored"
 android:id="@+id/colored_button"
 style="@style/Widget.AppCompat.Button.Colored" />
 
<CheckBox android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New CheckBox"
 android:id="@+id/checkBox" />
 
<RadioButton android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New RadioButton"
 android:id="@+id/radioButton" />
 
<Switch android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New Switch"
 android:id="@+id/switchButton" />
 
<SeekBar android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/seekBar" />
 
<TextView android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="New Text"
 android:id="@+id/textView" />
 
<EditText android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:id="@+id/editText"
 android:hint="Input" />

當(dāng)添加了這些View之后，布局看起來(lái)就是這樣的：

如果你讀過(guò)Material Design spec。我確定你可以看出來(lái)此時(shí)的activity為colorPrimary 和 colorPrimaryDark使用了靛藍(lán)色。而colorAccent使用的是粉色。這些都是Android Studio默認(rèn)的顏色。你可以在項(xiàng)目的res/values/colors.xml中找到它們的hex值。

要在activity中使用這個(gè)主題，打開(kāi)項(xiàng)目的manifest文件，在定義activity的地方添加android:theme屬性，把值設(shè)為@style/MyTheme。

<activity android:name=".MainActivity"
 android:theme="@style/MyTheme">
 <intent-filter>
  <action android:name="android.intent.action.MAIN" />
  <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
</activity>

同樣，你還可以通過(guò)設(shè)置application的android:theme屬性把這個(gè)主題應(yīng)用到整個(gè)app。

如果你現(xiàn)在看看你的activity，它應(yīng)該有很大不同。

六、總結(jié)

在這個(gè)教程中，你學(xué)會(huì)了如何創(chuàng)建和應(yīng)用自定義的樣式和主題。你可以把這些知識(shí)用來(lái)讓你的app變的更好看。現(xiàn)在多數(shù)用戶都已經(jīng)習(xí)慣了 Material Design，偏離規(guī)則太遠(yuǎn)會(huì)干擾到他們。以上就是這篇文章的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)和工作能帶來(lái)一定的幫助，如果有疑問(wèn)可以留言交流。

最新評(píng)論