在目前的練習中,我們的版面 activity_main.xml 已經來到了100行左右:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_marginTop="8dp"
    android:layout_marginLeft="8dp"
    tools:content=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/storeName"
        android:textSize="22sp"
        android:textFontWeight="true"/>
    <!-- 中間省略... -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/price_text_view"
        android:layout_marginTop="16dp"
        android:textSize="16sp"
        android:textColor="#000000"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/submit"
        android:onClick="submitOrder"/>
</LinearLayout>
</ScrollView>

大家可以注意到,其中有很大一部分是用在樣式設定上,例如android:layout_width

Styles

Style是用於指定單個View的外觀的一組屬性。

  • 本身也是一個xml,位於res/values/styles.xml
  • 把樣式抽出來,就像HTML+CSS一樣:
  • 原本的TextView如下:
  • <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:text="@string/quantity"
        android:textSize="15sp" />
    
  • 現在把所有標題的樣式抽出:
  • <TextView
        style = "@style/HeaderStyle" 
        android:text="@string/quantity"/>
    
  • styles.xml中定義對應的style:
  • <resources>
        <!-- 標題 Style. -->
        <style name="HeaderStyle">
            <item name="android:layout_width">wrap_content</item>
            <item name="android:layout_height">48dp</item>
            <item name="android:textColor">#4a4291</item>
            <item name="android:textSize">15sp</item>
            <item name="android:layout_centerVertical">true</item>
        </style>
    </resources>
    

    數量訂單資訊的TextView分別用 style = "@style/HeaderStyle" 取代原本的樣式設定後如下:

    Reference

    http://developer.android.youdaxue.com/guide/topics/ui/look-and-feel/themes?utm_source=udacity&utm_medium=course&utm_campaign=android_basics