最近，有点空闲的时间就拿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>
源码下载地址：QQUiDemo.rar
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
