iT邦幫忙

DAY 7
1

以「寶寶聯絡簿」為例,適合 Android 初學者的學習筆記系列 第 7

寶寶生活記錄 App (Day7 使用者界面實作範例-3)

昨天已經預告今天就要詳細討論 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 程式了。


上一篇
寶寶生活記錄 App (Day6 使用者界面實作範例-2)
下一篇
寶寶生活記錄 App (Day8 Activity初探)
系列文
以「寶寶聯絡簿」為例,適合 Android 初學者的學習筆記30

尚未有邦友留言

立即登入留言