昨天已經預告今天就要詳細討論 activity_calendar.xml，首先看一下執行的結果，接著再進行分段說明，執行結果如下圖所示：

接下來將進行分段說明，在說明之前，還是先將 activity_calendar.xml 的內容秀出，以便容易閱讀：

1  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2      xmlns:tools="http://schemas.android.com/tools"
3      android:layout_width="match_parent"
4      android:layout_height="match_parent"
5      android:paddingBottom="6dp"
6      android:paddingLeft="7dp"
7      android:paddingRight="7dp"
8      android:id="@+id/rootview"
9      android:paddingTop="5dp"
10     android:background="#EBEBEB" >
11
12     <RelativeLayout android:id="@+id/rl_ivbtns"
13        android:layout_width="fill_parent"
14         android:layout_height="wrap_content"
15         android:paddingBottom="5dp"
16         android:layout_alignParentTop="true">
17         <ImageView android:id="@+id/iv_share"
18             android:layout_width="wrap_content"
19             android:layout_height="wrap_content"
20             android:src="@drawable/share"
21             android:layout_alignParentRight="true"
22             />
23         <ImageView android:id="@+id/iv_stat"
24             android:layout_width="wrap_content"
25             android:layout_height="wrap_content"
26             android:src="@drawable/stat"
27             android:layout_toLeftOf="@id/iv_share"
28             android:paddingRight="10dp"
29             />
30         <ImageView android:id="@+id/iv_today"
31             android:layout_width="wrap_content"
32             android:layout_height="wrap_content"
33             android:src="@drawable/today"
34             android:layout_toLeftOf="@id/iv_stat"
35            android:paddingRight="10dp"
36             android:visibility="gone"
37             />
38     </RelativeLayout>
39
40     <RelativeLayout android:id="@+id/rl_calendartitle"
41         android:layout_width="fill_parent"
42         android:layout_height="wrap_content"
43         android:gravity="center_horizontal"
44         android:layout_below="@id/rl_ivbtns">
45         <ImageView android:id="@+id/iv_arrowleft"
46             android:layout_width="35dp"
47             android:layout_height="35dp"
48             android:layout_alignParentLeft="true"
49             android:layout_centerVertical="true"
50             android:src="@drawable/arrow_left"
51             />
52        <ImageView android:id="@+id/iv_arrowright"
53             android:layout_width="35dp"
54             android:layout_height="35dp"
55             android:layout_alignParentRight="true"
56             android:layout_centerVertical="true"
57             android:src="@drawable/arrow_right"
58             />
59         <TextView android:id="@+id/tv_calendartitle"
60             android:layout_width="fill_parent"
61             android:layout_height="wrap_content"
62             android:gravity="center"
63             android:textSize="20sp"
64             android:textStyle="bold"
65             android:textColor="#000000"
66             android:layout_centerVertical="true"
67             android:text="@string/loading"
68             android:layout_toRightOf="@id/iv_arrowleft"
69             android:layout_toLeftOf="@id/iv_arrowright"
70             />
71         <LinearLayout android:id="@+id/ll_loadcalendar"
72             android:layout_width="fill_parent"
73             android:layout_height="wrap_content"
74             android:orientation="horizontal"
75             android:visibility="gone"
76             android:layout_toRightOf="@id/iv_arrowleft"
77             android:layout_toLeftOf="@id/iv_arrowright"
78             android:gravity="center_horizontal"
79             >
80             <ProgressBar
81                android:layout_width="wrap_content"
82                android:layout_height="wrap_content"
83                android:layout_gravity="center_vertical"
84                 />
85             <TextView android:id="@+id/tv_loading"
86                 android:layout_width="wrap_content"
87                 android:layout_height="wrap_content"
88                 android:textSize="16sp"
89                 android:text="@string/loading"
90                 android:layout_gravity="center_vertical"
91                 />
92         </LinearLayout>
93     </RelativeLayout>
94
95     <LinearLayout android:id="@+id/ll_week"
96         android:layout_width="fill_parent"
97         android:layout_height="wrap_content"
98         android:weightSum="7"
99         android:orientation="horizontal"
100        android:layout_below="@id/rl_calendartitle"
101       >
102    </LinearLayout>
103
104    <LinearLayout android:id="@+id/ll_calendar"
105        android:layout_width="fill_parent"
106        android:layout_height="fill_parent"
107        android:weightSum="6"
108        android:orientation="vertical"
109        android:layout_below="@id/ll_week"
110        android:layout_alignParentBottom="true"
111        >
112    </LinearLayout>
113</RelativeLayout>

首先來看根標籤，根標籤是 RelativeLayout，關於 RelativeLayout 昨天已經有初步的說明，就不再贅述，讀者只需要瞭解這個 RelativeLayout會佔滿整個螢幕。

在第 12 行我們又看到一個 RelativeLayout，這個 RelativeLayout 有一個屬性是 android:layout_alignParentTop，屬性值為 true 代表第 12 行的 RelativeLayout 會被安排在其父標籤的頂端，其父標籤（即為第 1 行的根標籤）佔滿了整個螢幕，因此第 12 行的 RelativeLayout 會置於螢幕的上方，也就是執行畫面上那兩個藍色「統計」與「分享」的圖示。現在我們來細看第 12 行 RelativeLayout 裡面的內容，裡面包含了三個 ImageView，第一個 ImageView 是「分享」按鈕，由於其有個屬性是 android:layout_alignParentRight="true"，因此「分享」按鈕會位於右側，另外請注意到第 17 行「android:id="@+id/iv_share"」，相信讀者已經知道「@」是參考資源的意思，那麼「@+」呢？它是要建立一個資源，寫上第 17 行後，R.java 中，id 這個 R 類別的內部類別，會多一個名為 iv_share 的變數，這個變數代表的是第 17 行的 ImageView。接著來看第 23 行的 ImageView，其利用 layout_toLeftOf 屬性指定它要在「分享」按鈕的左方 (這就是 RelativeLayout 的特性：透過屬性指定 Views 的「相對」位置)。最後讀者可能會發現第 30 行 id 為 iv_today 的 ImageView 為什麼沒有出現在執行畫面上呢？這是因為有第 36 行「android:visibility="gone"」這個屬性，這個按鈕是讓使用者快速回到當前月份，因此平常是隱藏起來的，只有在使用者將月曆滑到別的月份時才會出現。

接著來看 40 ~ 93 行的 RelativeLayout，它是執行畫面上那兩個箭頭和一個顯示 Loading... 的文字方塊的那一列，相信讀者可以自行弄懂裡面的內容，筆者就不再贅述。

在 95 ~102 行我們看到一個沒有任何子標籤的 LinearLayout，這一行其實是要顯示「星期」用的，例如「Mon, Tue, Wed, Thu, Fri, Sat, Sun」，原本我們應該是要寫 7 個 TextView，可是這樣可能造成 XML 檔太長，因此決定使用程式自動產生的方式，這部分會牽涉到 Java，留待以後再討論。

而 104 ~ 112 行又是另一個沒有任何子標籤的 LinearLayout，這是月曆的主體，由於會有 42 個 TextView，因此也是偏向採用程式動態產生的形式。

至此，我們對於 activity_calendar.xml 應該都能理解裡面的內容了，明天我們終於要正式討論 Java 程式了。