Android UI布局—— 仿QQ登录界面

最近，有点空闲的时间就拿QQ登录界面来模仿练手，做了个简单的登录界面。界面一般般吧，不算很漂亮，现在拿出来分享，希望大家一起学习与进步。有什么不足之处，请各位大侠多多赐教，谢谢。这个界面涉及到LinearLayout、TableLayout和RelativeLayout等等。话不多说，先把截图弄出来先。

1、320 * 480模拟器上运行的效果图

2、480 * 800模拟器上运行的效果图

3、在Eclipse下截的大纲视图，这样看起来比较直观

4、XML代码(各个布局的说明已经很清楚了)：

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <!-- 插入整个布局的背景图片 -->
  3 <LinearLayout 
  4     xmlns:android="http://schemas.android.com/apk/res/android"
  5     android:layout_width="fill_parent"
  6     android:layout_height="fill_parent"
  7     android:orientation="vertical" 
  8     android:background="@drawable/back">
  9     <!-- QQ登录界面最上面的图片 -->
 10     <ImageView
 11         android:id="@+id/imageView1"
 12         android:layout_width="wrap_content"
 13         android:layout_height="wrap_content"
 14         android:src="@drawable/qq" />
 15     <!-- 水平布局，包括QQ头像和输入信息的账号和密码 -->
 16     <LinearLayout
 17         android:orientation="horizontal"
 18         android:layout_width="fill_parent"
 19         android:layout_height="wrap_content" >
 20         <!-- QQ头像，插入图片，重心垂直居中,四周扩充3个像素 -->
 21         <ImageView
 22             android:id="@+id/head"
 23             android:layout_width="wrap_content"
 24             android:layout_height="wrap_content"        
 25             android:padding="3dip"
 26             android:layout_gravity="center_vertical"
 27             android:src="@drawable/head" />
 28         <!-- 表格布局，包括账号和密码 -->
 29         <TableLayout
 30             android:id="@+id/tableLayout1"
 31             android:layout_width="wrap_content"
 32             android:layout_height="wrap_content" 
 33             android:stretchColumns="1">
 34             <!-- 表格的第一行，账号文本和输入框，黑色粗体字，重心靠右，四周扩充5个像素 -->
 35             <TableRow>
 36                 <!-- "账号"文本 -->
 37                 <TextView 
 38                     android:text="账号:"                    
 39                     android:textStyle="bold"
 40                     android:textColor="#000000"
 41                     android:gravity="right"    
 42                     android:padding="5dip"/>
 43                 <!-- "账号"输入框，文本超出TextView的宽度的情况下，出现横拉条   -->
 44                 <EditText 
 45                     android:id="@+id/username"
 46                     android:scrollHorizontally="true"/>
 47             </TableRow>
 48             <!-- 表格的第二行，密码和密码输入框，黑色粗体字，重心靠右，扩充5个像素 -->
 49             <TableRow>
 50                 <!-- "密码"文本 -->
 51                 <TextView 
 52                     android:text="密码:"                    
 53                     android:textStyle="bold"
 54                     android:textColor="#000000"
 55                     android:gravity="right"    
 56                     android:padding="5dip"/>
 57                 <!-- "密码"输入框；文本超出TextView的宽度的情况下，出现横拉条  -->
 58                 <EditText 
 59                     android:id="@+id/password"
 60                     android:password="true"
 61                     android:scrollHorizontally="true"/>
 62             </TableRow>                      
 63         </TableLayout>      
 64     </LinearLayout>
 65     <!-- 相对布局，"记住密码"按钮和"自动登录"按钮 -->
 66     <RelativeLayout
 67         android:layout_width="fill_parent"
 68         android:layout_height="wrap_content">
 69         <!-- "记住密码"多选框，黑体字，左缩进5个像素，选中状态 -->
 70         <CheckBox             
 71             android:id="@+id/rememberPassword" 
 72             android:layout_width="wrap_content" 
 73             android:layout_height="wrap_content"
 74             android:text="记住密码" 
 75             android:textColor="#000000"
 76             android:checked="true"
 77             android:layout_marginLeft="5dip"/>
 78         <!-- "自动登录"多选框，黑体字，右缩进5个像素，与"记住密码"按钮的顶部和右边对齐 -->
 79         <CheckBox 
 80             android:id="@+id/autoLogin" 
 81             android:layout_width="wrap_content" 
 82             android:layout_height="wrap_content" 
 83             android:text="自动登录" 
 84             android:textColor="#000000"          
 85             android:layout_marginRight="5dip"
 86             android:layout_alignParentTop="true" 
 87             android:layout_alignParentRight="true"/>
 88     </RelativeLayout>
 89     <!-- "登录"按钮，重心垂直居中，距顶部和底部3个像素，左右扩充80个像素 -->
 90     <Button 
 91         android:id="@+id/login_bt"
 92         android:text="登  录 "
 93         android:paddingTop="3dip"
 94         android:paddingBottom="3dip"
 95         android:paddingLeft="80dip"
 96         android:paddingRight="80dip"       
 97         android:layout_width="wrap_content"    
 98         android:layout_height="wrap_content"        
 99         android:layout_gravity="center_horizontal"/>  
100     <!-- 绝对布局，"隐身登录"按钮和"开机振动"按钮以下部分，距顶部3个像素 -->
101     <RelativeLayout
102         android:id="@+id/relativeLayout1"
103         android:layout_width="fill_parent"
104         android:layout_height="fill_parent" 
105         android:layout_marginTop="3dip" >
106         <!-- "隐身登录"按钮，左缩进5个像素，黑字体，选中状态 -->
107         <CheckBox             
108             android:id="@+id/hidingLogin" 
109             android:layout_width="wrap_content" 
110             android:layout_height="wrap_content"
111             android:layout_marginLeft="5dip"
112             android:text="隐身登录" 
113             android:textColor="#000000"
114             android:checked="true"/>
115          <!-- "开机振动"按钮，右缩进5个像素，黑字体，选中状态 ，与"隐身登录"按钮的顶部和右边对齐-->
116         <CheckBox 
117             android:id="@+id/startVibrate" 
118             android:layout_width="wrap_content" 
119             android:text="开机振动" 
120             android:layout_marginRight="5dip"
121             android:textColor="#000000"
122             android:layout_height="wrap_content" 
123             android:layout_alignParentTop="true" 
124             android:layout_alignParentRight="true"/> 
125         <!-- "接收群消息"按钮，左缩进5个像素，黑字体，选中状态 ，在"隐身登录"按钮的下面-->
126         <CheckBox 
127             android:id="@+id/receiveGroupMessage" 
128             android:layout_width="wrap_content" 
129             android:text="接收群消息" 
130             android:layout_marginLeft="5dip"
131             android:textColor="#000000"
132             android:layout_height="wrap_content" 
133             android:layout_below="@id/hidingLogin"
134             android:checked="true"/>
135         <!-- "静音登录"按钮，右缩进5个像素，黑体字，选中状态，在"开机振动"按钮的下面，靠右 -->
136         <CheckBox 
137             android:id="@+id/silenceLogin" 
138             android:textColor="#000000" 
139             android:layout_width="wrap_content" 
140             android:text="静音登录" 
141             android:layout_marginRight="5dip"
142             android:layout_height="wrap_content" 
143             android:layout_below="@+id/startVibrate" 
144             android:layout_alignParentRight="true"
145             android:checked="true"/>
146         <!-- "菜单"按钮，距离底部2个像素，上下扩充3个像素，左右扩充20个像素，与"接收群消息"按钮左对齐，底部对齐 -->
147         <Button 
148             android:id="@+id/menu" 
149             android:layout_width="wrap_content" 
150             android:layout_height="wrap_content" 
151             android:text="菜  单" 
152             android:paddingTop="3dip"
153             android:paddingBottom="3dip"
154             android:paddingLeft="10dip"
155             android:paddingRight="10dip"  
156             android:layout_marginBottom="2dip"
157             android:layout_alignParentBottom="true" 
158             android:layout_alignLeft="@+id/receiveGroupMessage"/>     
159     </RelativeLayout>
160 </LinearLayout>