最近，有点空闲的时间就拿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 4xmlns:android="/apk/res/android" 5android:layout_width="fill_parent" 6android:layout_height="fill_parent" 7android:orientation="vertical" 8android: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<RelativeLayout102 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
如果觉得《Android UI布局—— 仿QQ登录界面》对你有帮助，请点赞、收藏，并留下你的观点哦！
