首页 > 安全资讯 >

Android常用UI之titlebar制作

11-07-12

Android的应用中有很多UI的设计都是比较固定的,比如很多应用都会有titlebar和tabbar。我这里就将自己工作过程中碰到的各种比较固定的UI组件的制作方法写出来。titlebar(标题栏)的应用尤为广泛,主要起到提示和导航的作用,组件里面涉及

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来实现比较精细的布局控制

相关文章
最新文章
热点推荐