Android：布局实例之模仿QQ登录界面

预览图：

准备：

1、找到模仿对象 QQ登陆界面UI下载>>>>>

2、导入工程

3、查看布局结构和使用控件

其对应效果图分布为

4、分析样式选择器

下拉箭头2种样式：点击和默认状态

文本框2种样式：聚焦和默认状态

复选框3种样式：选择、不选择和鼠标点着不放

左下角按钮2种样式：点击和默认

登录按钮2样式：点击和默认

============================================帖代码===========================

布局：

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

     <include layout="@layout/head" />

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1.0"
         android:background="@drawable/default_bg"
         android:orientation="vertical" >

         <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginLeft="15px"
             android:layout_marginRight="15px"
             android:layout_marginTop="63px"
             android:background="@drawable/login_back"
             android:paddingBottom="10px"
             android:paddingTop="21px" >

             <!-- QQ左栏logo -->

             <ImageView
                 android:id="@+id/faceImg"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:background="@drawable/qqfaceleft" />

             <!-- 帐号文本框 -->

             <EditText
                 android:id="@+id/login_edit_account"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_alignParentTop="true"
                 android:layout_marginBottom="5px"
                 android:layout_marginLeft="5dp"
                 android:layout_marginRight="5dp"
                 android:layout_marginTop="5dp"
                 android:layout_toRightOf="@+id/faceImg"
                 android:background="@drawable/qq_edit_login"
                 android:paddingLeft="45sp"
                 android:text="输入帐号"
                 android:textColor="#ddd" />

             <!-- 文本框左边帐号提示 -->

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignBottom="@+id/login_edit_account"
                 android:layout_alignLeft="@+id/login_edit_account"
                 android:layout_alignTop="@+id/login_edit_account"
                 android:layout_marginRight="15.0sp"
                 android:gravity="center_vertical"
                 android:paddingLeft="7sp"
                 android:text="帐号"
                 android:textSize="16dp" />

             <!-- 下拉菜单按钮 -->

             <ImageButton
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignBottom="@+id/login_edit_account"
                 android:layout_alignRight="@+id/login_edit_account"
                 android:layout_alignTop="@+id/login_edit_account"
                 android:layout_marginRight="1dp"
                 android:background="@drawable/more_select" />

             <!-- 密码文本框 -->

             <EditText
                 android:id="@+id/login_edit_pwd"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignLeft="@+id/login_edit_account"
                 android:layout_alignRight="@+id/login_edit_account"
                 android:layout_below="@+id/login_edit_account"
                 android:background="@drawable/qq_edit_login"
                 android:paddingLeft="45sp"
                 android:text="输入帐号"
                 android:textColor="#ddd" />

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignBottom="@+id/login_edit_pwd"
                 android:layout_alignLeft="@+id/login_edit_pwd"
                 android:layout_alignTop="@+id/login_edit_pwd"
                 android:layout_marginRight="15.0sp"
                 android:gravity="center_vertical"
                 android:paddingLeft="7sp"
                 android:text="密码"
                 android:textSize="16dp" />

             <!-- 记住密码选项 -->

             <CheckBox
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_alignBaseline="@+id/login_btn_login"
                 android:button="@drawable/qq_btn_check"
                 android:text="记住密码" />

             <!-- 登录按钮 -->

             <Button
                 android:id="@+id/login_btn_login"
                 android:layout_width="130px"
                 android:layout_height="42px"
                 android:layout_alignParentRight="true"
                 android:layout_below="@+id/login_edit_pwd"
                 android:layout_marginRight="7px"
                 android:layout_marginTop="12px"
                 android:text="登录" />
         </RelativeLayout>
         <!-- 复选框层 -->

         <TableLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginLeft="20px"
             android:layout_marginRight="20px"
             android:stretchColumns="1" >

             <TableRow>

                 <CheckBox
                     style="@style/MyCheckBox"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="隐身登录" />

                 <CheckBox
                     style="@style/MyCheckBox"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_gravity="right"
                     android:text="开启震动" />
             </TableRow>

             <TableRow>

                 <CheckBox
                     style="@style/MyCheckBox"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="接收群消息" />

                 <CheckBox
                     style="@style/MyCheckBox"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_gravity="right"
                     android:text="静音登录" />
             </TableRow>
         </TableLayout>
     </LinearLayout>
     <!-- 底部 -->

     <RelativeLayout
         android:layout_width="match_parent"
         android:layout_height="44dp"
         android:background="@drawable/bottom"
         android:gravity="center_vertical" >

         <ImageButton
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="@drawable/option" />
     </RelativeLayout>

 </LinearLayout>

布局xml

样式：

    <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">#7fffffff</item>
        <item name="android:paddingLeft">28px</item>
        <item name="android:button">@drawable/qq_btn_check</item>
    </style>

CheckBox样式

样式选择器：

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_window_focused="false" android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/btn_check_on" />
    <item android:state_window_focused="false" android:state_enabled="true" android:state_checked="false" android:drawable="@drawable/btn_check_off" />

    <item android:state_enabled="true" android:state_checked="true" android:state_pressed="true" android:drawable="@drawable/btn_check_on_pressed" />
    <item android:state_enabled="true" android:state_checked="false" android:state_pressed="true" android:drawable="@drawable/btn_check_off_pressed" />

    <item android:state_focused="true" android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/btn_check_on_selected" />
    <item android:state_focused="true" android:state_enabled="true" android:state_checked="false" android:drawable="@drawable/btn_check_off_selected" />

    <item android:state_enabled="true" android:state_checked="false" android:drawable="@drawable/btn_check_off" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/btn_check_on" />
</selector>

复选框selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="false" android:drawable="@drawable/login_input"></item>
    <item android:state_pressed="true" android:drawable="@drawable/login_input"></item>
    <item android:state_focused="true" android:drawable="@drawable/input_over"></item>
</selector>

文本框selector

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/option_selected" />
    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/option_selected" />
    <item android:state_enabled="true" android:drawable="@drawable/option_normal" />
</selector>

左下角按钮selector

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/button2_down" />
    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/button2_over" />
    <item android:state_enabled="true" android:drawable="@drawable/button2" />
</selector>

下拉菜单selector

下载我的练习工程

相关文章：

Android：布局实例之模仿京东登录界面