Android的應用中有很多UI的設計都是比較固定的，比如很多應用都會有titlebar和tabbar。我這里就將自己工作過程中碰到的各種比較固定的UI組件的制作方法寫出來。
titlebar(標題欄)的應用尤為廣泛，主要起到提示和導航的作用，組件里面涉及到的控件有ImageView和TextView(這里并不唯一，視你制作方法而定)。下面就來介紹我的做法，先貼上main.xml的代碼和效果圖。
代碼如下：
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:orientation="vertical"
4 android:layout_width="fill_parent"
5 android:layout_height="fill_parent"
6 android:background="@drawable/background">
7
8 <RelativeLayout android:layout_width="fill_parent"
9 android:layout_height="wrap_content"
10 android:background="@drawable/toolbar_background" >
11
12 <RelativeLayout android:id="@+id/toolbar_left"
13 android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:layout_alignParentLeft="true"
16 android:layout_centerVertical="true"
17 android:layout_marginLeft="10dip"
18 android:clickable="true">
19 <ImageView android:id="@+id/toolbar_left_image"
20 style="@style/toolbar_left_button_image"/>
21 <TextView android:id="@+id/toolbar_left_text"
22 android:text="@string/toolbar_return"
23 android:layout_alignTop="@id/toolbar_left_image"
24 android:layout_alignLeft="@id/toolbar_left_image"
25 style="@style/toolbar_left_button_text" />
26 </RelativeLayout>
27
28 <RelativeLayout android:layout_width="wrap_content"
29 android:layout_height="wrap_content"
30 android:layout_centerInParent="true">
31 <TextView android:layout_width="wrap_content"
32 android:layout_height="wrap_content"
33 android:text="@string/toolbar_everydaytip"
34 style="@style/toolbar_text" />
35 </RelativeLayout>
36
37 <RelativeLayout android:id="@+id/toolbar_right"
38 android:layout_width="wrap_content"
39 android:layout_height="wrap_content"
40 android:layout_alignParentRight="true"
41 android:layout_centerVertical="true"
42 android:layout_marginRight="10dip"
43 android:clickable="true">
44 <ImageView android:id="@+id/toolbar_right_image"
45 style="@style/toolbar_right_button_image" />
46 <TextView android:id="@+id/toolbar_right_text"
47 android:text="@string/toolbar_index"
48 android:layout_alignTop="@id/toolbar_right_image"
49 android:layout_alignLeft="@id/toolbar_right_image"
50 style="@style/toolbar_right_button_text" />
51 </RelativeLayout>
52
53 </RelativeLayout>
54
55 </LinearLayout>
附圖如下：
這里主要用到了RelativeLayout來實現比較精細的布局控制
posted on 2011-07-10 16:33
我是風之子 閱讀(5274)
評論(4) 編輯 收藏 所屬分類:
移動開發相關