一、前言

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

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

二、創(chuàng)建Styles

樣式顯然是應(yīng)用到UI控件上面的。因此，讓我們先創(chuàng)建一個新的空activity并添加兩個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是被顯式的定義在每個View中。

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

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

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

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

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

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

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

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

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

三、繼承 Styles

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

繼承一個style有兩種不同的語法。第一種語法被稱為隱式的語法，使用.號作為標(biāo)記。比如，如果你要創(chuàng)建兩個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屬性。

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

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

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

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

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

四、創(chuàng)建Themes

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

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

你可以在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是一個不錯的主題。要不然，你也可以直接使用Theme.AppCompat作為parent。

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

要打開主題編輯器，打開Tools菜單選擇Android > Theme Editor。

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

要創(chuàng)建一個新主題，點擊Theme下拉菜單，選擇Create New Theme選項。

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

到此時， styles.xml將有一行新代碼：

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

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

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

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

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

<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)建的主題之前，讓我們先添加幾個常用的控件到activity中。這樣更容易看到主題的效果。

下面的代碼創(chuàng)建了一個普通的Button，一個無邊框的Button，一個彩色的Button，一個Checkbox，一個RadioButton，一個Switch，一個Seekbar，一個TextView以及一個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之后，布局看起來就是這樣的：

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

要在activity中使用這個主題，打開項目的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>

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

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

六、總結(jié)

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

最新評論