Android中Styles、Themes、attrs介紹

Styles和Themes

     在Android中，style被用來指定表單或視圖的樣式，比如視圖的寬高、補白(padding)、背景，字型顏色等。style不需我們在代碼中進行設定，可以在xml檔案中按照DTD格式進行配置。     Android中的style其實跟css的思想一樣，允許我們把功能實現和外觀設計分離開，View配置也提供了html中如id、name屬性一樣的功能標籤style，讓我們有能力把所有的樣式集中在一個地方，如下一個例子

<? xml version= "1.0" encoding = "utf-8"?>< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"    android:layout_width= "match_parent"    android:layout_height= "match_parent"    android:orientation= "vertical"    >       <TextView        android:id ="@+id/tv1"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:textColor ="#FFFFFF" />    <TextView        android:id ="@+id/tv2"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:textColor ="#FFFFFF" />    <TextView        android:id ="@+id/tv3"        android:layout_width ="wrap_content"        android:layout_height ="wrap_content"        android:textColor ="#FFFFFF" />   </ LinearLayout>

    在上面的布局檔案中，三個TextView的android:layout_width、android:layout_height、android:textColor樣式屬性都一樣，這種情況下我們就可以單獨定義一個style，以一種更優雅的做法來替代上面的寫法

sample1_style.xml

< resources xmlns:android ="http://schemas.android.com/apk/res/android" >       <style name= "Sample1">               < item name= "android:layout_width" >wrap_content </ item>        < item name= "android:layout_height" >wrap_content </ item>        < item name= "android:textColor" >#00FF00 </item >           </style ></ resources>

注意：style檔案必須在values-*目錄中，且必須按照DTD格式來編寫各個定義好的標籤
接下來就是在View配置中使用style了

<? xml version= "1.0" encoding = "utf-8"?>< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"    android:layout_width= "match_parent"    android:layout_height= "match_parent"    android:orientation= "vertical" >    <TextView        android:id ="@+id/tv1"        style= "@style/Sample1"        android:text ="@string/sample1_tv1" />    <TextView        android:id ="@+id/tv2"        style= "@style/Sample1"        android:text ="@string/sample1_tv2" />    <TextView        android:id ="@+id/tv3"        style= "@style/Sample1"        android:text ="@string/sample1_tv3" /></ LinearLayout>

使用時只需使用style屬性引用我們定義好的style即可，這種方式可以有效避免做重複性的工作，簡化我們的工作     Theme是應用於整個Application、Activity的style，而不是某一個View，如果style被當做Theme來應用時，那麼整個應用或整個表單中的元素都將使用這個風格樣式(如果下面的子項不存在某一屬性，那麼將會被忽略)，當然如果為某個特定的View指定了style時，相同的屬性會被覆蓋。使用 android:theme="@style/mystyle"來指定主題
Styles繼承     Android系統為我們提供了一整套的style，比如說顯示字串最基本的style是TextAppearance，它定義了一些最基本的屬性

<style name="TextAppearance"><item name="android:textColor">?textColorPrimary</item> <item name="android:textColorHighlight">?textColorHighlight</item><item name="android:textColorHint">?textColorHint</item><item name="android:textColorLink">?textColorLink</item><item name="android:textSize">16sp</item><item name="android:textStyle">normal</item></style>

還有許多各個方面的style，大家可以參見：https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/styles.xml

如果我們只想改變基礎style中的某一項屬性時，這時可以使用繼承來實現

     <style name= "Sample1" parent= "@android:style/TextAppearance" >        < item name= "android:textColor" >#00FF00 </item >           </style >

使用parent屬性來繼承一個基礎style，這個時候當應用Sample1 style時，只有android:textColor改變了，其它的屬性還是使用預設的
當你要繼承一個自己定義的style時，不需要使用parent屬性來指定，直接可以像下面這樣

     <style name= "Sample1.Big">        < item name= "android:textSize" >18sp </item >            </style >

attrs     attrs看字面意思就是一組屬性的集合，那attrs有什麼用呢，在自訂View的時候，一般會自訂一些屬性，通過構造方法中AttributeSet參數的封裝，讓我們能夠擷取到為View配置的屬性，至於怎麼操作，大家可以參看http://developer.android.com/training/custom-views/index.html 上介紹的這個例子

Styles、Themes和attrs 之間的關係
     首先我們來看一下如何來自訂style中item name，之前我們用的都是Android為我們提供的item name。
第一我們需要定義一個attrs，並指定好資料類型

<resources>    <declare-styleable name="ViewPagerIndicator">        <attr name="vpiTabPageIndicatorStyle" format="reference" />    </declare-styleable></resources>

然後就可以在style中進行引用了

<style name= "Theme.PageIndicatorDefaults" parent = "android:Theme">       <item name ="vpiTabPageIndicatorStyle" >@style/Widget.TabPageIndicator </ item>   </style >

接下來我們看View的一個構造方法的定義

public View (Context context, AttributeSet attrs,
int defStyle)Added in API level 1

Perform inflation from XML and apply a class-specific base style. This constructor of View allows subclasses to use their own base style when they are inflating. For example, a Button class's constructor
would call this version of the super class constructor and supply R.attr.buttonStyle for defStyle; this allows the theme's button style to modify all of the base view attributes
(in particular its background) as well as the Button class's attributes.

Parameters

context	The Context the view is running in, through which it can access the current theme, resources, etc.
attrs	The attributes of the XML tag that is inflating the view.
defStyle	The default style to apply to this view. If 0, no style will be applied (beyond what is included in the theme). This may either be an attribute resource, whose value will be retrieved from the current theme, or an explicit style resource.

第三個參數是關鍵，揭示了Styles、Themes和attrs三者之間的聯絡。當自訂View時，如果自訂的View不在布局檔案中進行配置，而是通過代碼的方式來添加到表單進行顯示，這時我們怎麼來為它附加style呢，這時就可以通過這個構造方法來做，首先為Activity配置一個Theme
style，然後通過設定第三個參數來引用我們定義好的attr，這樣就可以為自訂View附加好樣式了

         < activity            android:name ="tu.bingbing.myviewpager.SampleTabsDefault"            android:label ="@string/app_name"            android:theme ="@style/Theme.PageIndicatorDefaults"             >

         public TabView(Context context) {              super (context, null, R.attr. vpiTabPageIndicatorStyle);        }

參考：http://developer.android.com/guide/topics/ui/themes.html

http://viewpagerindicator.com/