第三十二講：Android中的主題和風格學習指南

Jcheng一霸 · 發(fā)表于 2013-8-28 16:26

>

　　Open Home 還帶有抽屜效果^_^好吧，我承認這個界面也談不上好看和耐看，不過我們學了本講的內(nèi)容就可以按照自己的意愿更改程序的外觀顯示了。別人做的不好，咱自己做還不行嗎（心虛中，^_^）……二、什么是主題（Theme）和風格（Style）：

　　在Web開發(fā)中，Html代碼負責內(nèi)容部分，CSS部分負責表現(xiàn)部分，我們使用CSS+DIV的符合Web標準的方式設(shè)計網(wǎng)頁，可以把內(nèi)容和形式分離開。同樣在Android的開發(fā)中，我們可以使用Theme、Style+UI組件的方式，實現(xiàn)內(nèi)容和形式的分離，做到界面的自定義。那么我們下面近距離認識一下Theme和Style。

　　風格Style是一個包含一種或多種格式化屬性的集合，你可以把它應(yīng)用在UI組件上。主題Theme也是一個包含一種或多種格式化屬性的集合，你可以把它應(yīng)用在整個應(yīng)用程序（Application）中或者某個窗口（Activity）中。

　　定義一個style或者theme的方法是一樣的。在res/values/目錄下建立style.xml或者theme.xml文件，在xml中建立形如這樣的代碼：（注，這段代碼來自官方的文檔，不是我寫的…）

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:textColor">#00ff00</item>
      <item name="android:typeface">monospace</item>
</style>

</resources>

復制代碼

　　系統(tǒng)提供了大量的Style和Theme使我們學習樣式設(shè)計的最好教材，我把代碼放在這里(styles.xml)和這里(themes.xml)了，有時間大家可以多看看系統(tǒng)的樣式是如何定義的。
　　三、自定義主題（Theme）和風格（Style）：

　　下面讓我們借用http://blog.androgames.net/category/android-tutorials/page/5/ 里的例子加工一下來學習如何自定義UI組件的風格
吧，哎這個例子實在是有點小酷，所以你先看一下效果好了。

1、新建一個項目 Lesson32_StyleAndTheme2、拷貝這三張 Nine-Patch PNG圖片到res/drawable目錄下，對于什么是nine-patch圖片，以及它是如何制作的，感興趣的朋友可以看這里，我們這里只需要知道它可以不失真的情況下進行縮放伸縮就可以了。3、在按鈕的同目錄下建立一個文件btn_custom.xml，把上述3張圖片整合成一個按鈕背景文件，讓三張圖片成為不同狀態(tài)下的按鈕表現(xiàn)效果。具體寫法如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:drawable="@drawable/btn_red" android:state_enabled="false">
      <item android:drawable="@drawable/btn_orange" android:state_enabled="true" android:state_pressed="true">
      <item android:drawable="@drawable/btn_orange" android:state_enabled="true" android:state_focused="true">
      <item android:drawable="@drawable/btn_black" android:state_enabled="true">
</item></item></item></item></selector>

復制代碼

4、在res/values目錄下定義style.xml文件，內(nèi)容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="BasicButtonStyle" parent="@android:style/Widget.Button">
            <item name="android:gravity">center_vertical|center_horizontal</item>
            <item name="android:textColor">#ffffffff</item>
            <item name="android:shadowColor">#ff000000</item>
            <item name="android:shadowDx">0</item>
            <item name="android:shadowDy">-1</item>
            <item name="android:shadowRadius">0.2</item>
            <item name="android:textSize">16dip</item>
            <item name="android:textStyle">bold</item>
            <item name="android:background">@drawable/btn_custom</item>
            <item name="android:focusable">true</item>
            <item name="android:clickable">true</item>
      </style>
<style name="BigTextStyle">
<item name="android:layout_margin">5dp</item>
            <item name="android:textColor">#ff9900</item>
            <item name="android:textSize">25sp</item>
  </style>
<style name="BasicButtonStyle.BigTextStyle">
<item name="android:textSize">25sp</item>
  </style>

</resources>

復制代碼

　　5、在res/layout/目錄下定義main.xml文件，內(nèi)容如下：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">

      <textview android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="張信哲的熱搜歌曲">

      <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="愛如潮水 " android:id="@+id/Button01">
  </button>

  <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="過火 " android:id="@+id/Button02">
  </button>

  <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="別怕我傷心 " android:id="@+id/Button03">
  </button>

  <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="從開始到現(xiàn)在 " android:id="@+id/Button04">
  </button>

  <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="信仰 " android:id="@+id/Button05">
  </button>

  <button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="說謊 " android:id="@+id/Button06">
  </button>
</textview></linearlayout>

復制代碼

　　6、在res/values目錄下定義theme.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="BasicButtonTheme">
            <item name="android:buttonStyle">@style/basicbuttonstyle</item>
            <item name="android:windowBackground">@android:color/transparent</item>
            <item name="android:windowIsTranslucent">true</item>
  </style>

</resources>

復制代碼

　　7、在AndroidManifest.xml中給整個應(yīng)用程序設(shè)置主題：

　　我們是不是清晰的看到主題在應(yīng)用程序?qū)佣x后，它的子元素會自動繼承，這一點非常像CSS。說到繼承，我在這個例子的代碼里也放了一些關(guān)于樣式可以繼承的使用指引，相信有細心的朋友已經(jīng)注意到了。

　　最后強調(diào)再強調(diào)一遍哈，代碼一定要自己敲一遍才會有更大收獲，拷貝代碼則會讓你很快就忘記所學內(nèi)容。

　　好了本講就到這里，Take your time and enjoy it ^_^

› 智能家居 / NAS / 路由 / 開發(fā) / 音響 › TV應(yīng)用開發(fā)交流

第三十二講：Android中的主題和風格學習指南 ...

第三十二講：Android中的主題和風格學習指南