android ui

转自：http://www.eoeandroid.com/forum.php?mod=viewthread&tid=103147&page=1&extra=#pid1075488

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

1.界面预览图(这个是模拟器上面的预览图)：
 

2.运行结果截图(这个是模拟器运行时的截图)：
 

大家肯定发现了，预览图和实际运行的结果是有很大差别的。
3.大纲视图(Eclipse下截的图，这个直白行了)：
 

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

<?xml version="1.0" encoding="utf-8"?>
<!-- 插入整个布局的背景图片 -->
<LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"  
    android:background="@drawable/back"  
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"> 
    <!-- QQ登录界面最上面的图片 -->
           <ImageView 
            android:id="@+id/image"
            android:src="@drawable/qq"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />  
    <!-- 水平布局，包括QQ头像和输入信息的账号和密码 -->
    <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">    
            <!-- QQ头像，插入图片，重心垂直居中,四周扩充3个像素 -->          
            <ImageView 
                    android:id="@+id/head"
                    android:src="@drawable/head"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:layout_gravity="center_vertical"
            /> 
            <!-- 表格布局，包括账号和密码 -->
            <TableLayout 
                    android:id="@+id/loginInfo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:stretchColumns="1">
                    <!-- 表格的第一行，账号文本和输入框，黑色粗体字，重心靠右，四周扩充5个像素 -->
                    <TableRow>
                            <!-- "账号"文本 -->
                            <TextView 
                                    android:text="账号:"                                    
                                    android:textStyle="bold"
                                    android:textColor="#000000"
                                    android:gravity="right"    
                                    android:padding="5dip"                                          
                            />                               
                            <!-- "账号"输入框，文本超出TextView的宽度的情况下，出现横拉条   -->
                            <EditText 
                                    android:id="@+id/username"
                                    android:scrollHorizontally="true"                                     
                            />
                    </TableRow>
                    <!-- 表格的第二行，密码和密码输入框，黑色粗体字，重心靠右，扩充5个像素 -->
                    <TableRow>
                            <!-- "密码"文本 -->
                            <TextView 
                                    android:text="密码:"                                    
                                    android:textStyle="bold"
                                    android:textColor="#000000"
                                    android:gravity="right"    
                                    android:padding="5dip"                                 
                            />
                            <!-- "密码"输入框；文本超出TextView的宽度的情况下，出现横拉条  -->
                            <EditText 
                                    android:id="@+id/username"
                                    android:password="true"
                                    android:scrollHorizontally="true"  
                            />
                    </TableRow>
            </TableLayout>            
    </LinearLayout>
    <!-- 相对布局，"记住密码"按钮和"自动登录"按钮 -->
    <RelativeLayout 
            android:id="@+id/loginSet"    
            android:layout_height="wrap_content" 
            android:layout_width="fill_parent">
            <!-- "记住密码"多选框，黑体字，左缩进5个像素，选中状态 -->
        <CheckBox                 
                android:id="@+id/rememberPassword" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:text="记住密码" 
                android:textColor="#000000"
                android:checked="true"
                android:layout_marginLeft="5dip"
                />
        <!-- "自动登录"多选框，黑体字，右缩进5个像素，与"记住密码"按钮的顶部和右边对齐 -->
        <CheckBox 
                android:id="@+id/autoLogin" 
                android:layout_width="wrap_content" 
                android:text="自动登录" 
                android:textColor="#000000"
                android:layout_height="wrap_content" 
                android:layout_marginRight="5dip"
                android:layout_alignParentTop="true" 
                android:layout_alignParentRight="true"/>            
    </RelativeLayout>
    <!-- "登录"按钮，重心垂直居中，距顶部和底部3个像素，左右扩充80个像素 -->
    <Button 
            android:id="@+id/login_bt"
            android:text="登  录 "
            android:paddingTop="3dip"
            android:paddingBottom="3dip"
            android:paddingLeft="80dip"
            android:paddingRight="80dip"            
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"            
            android:layout_gravity="center_horizontal" 
            />           
    <!-- 绝对布局，"隐身登录"按钮和"开机振动"按钮以下部分，距顶部3个像素 -->        
    <RelativeLayout 
            android:id="@+id/loginSet"    
            android:layout_width="fill_parent"
            android:layout_marginTop="3dip" 
            android:layout_height="fill_parent">
            <!-- "隐身登录"按钮，左缩进5个像素，黑字体，选中状态 -->
        <CheckBox                 
                android:id="@+id/hidingLogin" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dip"
                android:text="隐身登录" 
                android:textColor="#000000"
                android:checked="true"
                />
        <!-- "开机振动"按钮，右缩进5个像素，黑字体，选中状态 ，与"隐身登录"按钮的顶部和右边对齐-->
        <CheckBox 
                android:id="@+id/startVibrate" 
                android:layout_width="wrap_content" 
                android:text="开机振动" 
                android:layout_marginRight="5dip"
                android:textColor="#000000"
                android:layout_height="wrap_content" 
                android:layout_alignParentTop="true" 
                android:layout_alignParentRight="true"/>    
        <!-- "接收群消息"按钮，左缩进5个像素，黑字体，选中状态 ，在"隐身登录"按钮的下面-->
        <CheckBox 
                android:id="@+id/receiveGroupMessage" 
                android:layout_width="wrap_content" 
                android:text="接收群消息" 
                android:layout_marginLeft="5dip"
                android:textColor="#000000"
                android:layout_height="wrap_content" 
                android:layout_below="@id/hidingLogin"
                android:checked="true"/>
        <!-- "静音登录"按钮，右缩进5个像素，黑体字，选中状态，在"开机振动"按钮的下面，靠右 -->
        <CheckBox 
                android:id="@+id/silenceLogin" 
                android:textColor="#000000" 
                android:layout_width="wrap_content" 
                android:text="静音登录" 
                android:layout_marginRight="5dip"
                android:layout_height="wrap_content" 
                android:layout_below="@+id/startVibrate" 
                android:layout_alignParentRight="true"
                android:checked="true"/>
        <!-- "菜单"按钮，距离底部2个像素，上下扩充3个像素，左右扩充20个像素，与"接收群消息"按钮左对齐，底部对齐 -->
        <Button 
                android:id="@+id/menu" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:text="菜  单" 
                android:paddingTop="3dip"
                    android:paddingBottom="3dip"
                    android:paddingLeft="10dip"
                    android:paddingRight="10dip"  
                    android:layout_marginBottom="2dip"
                android:layout_alignParentBottom="true" 
                android:layout_alignLeft="@+id/receiveGroupMessage"/>
    </RelativeLayout>           
</LinearLayout>

其中，插入了一个背景图，正因为有这个背景图，才把界面衬托得很好。另外，还有两个图片。