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

最新推荐文章于 2022-05-30 20:36:52 发布

weixin_30446613

最新推荐文章于 2022-05-30 20:36:52 发布

阅读量253

点赞数

原文链接：http://www.cnblogs.com/ZhuRenWang/p/4849814.html

版权

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

预览图：

准备：

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

2、导入工程

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

其对应效果图分布为

4、分析样式选择器

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

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

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

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

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

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

布局：

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  3  android:layout_width="match_parent"  4  android:layout_height="match_parent"  5  android:orientation="vertical" >  6  7 <include layout="@layout/head" />  8  9 <LinearLayout  10 android:layout_width="match_parent"  11  android:layout_height="wrap_content"  12  android:layout_weight="1.0"  13  android:background="@drawable/default_bg"  14  android:orientation="vertical" >  15  16 <RelativeLayout  17 android:layout_width="match_parent"  18  android:layout_height="wrap_content"  19  android:layout_marginLeft="15px"  20  android:layout_marginRight="15px"  21  android:layout_marginTop="63px"  22  android:background="@drawable/login_back"  23  android:paddingBottom="10px"  24  android:paddingTop="21px" >  25  26 <!-- QQ左栏logo -->  27  28 <ImageView  29 android:id="@+id/faceImg"  30  android:layout_width="wrap_content"  31  android:layout_height="wrap_content"  32  android:background="@drawable/qqfaceleft" />  33  34 <!-- 帐号文本框 -->  35  36 <EditText  37 android:id="@+id/login_edit_account"  38  android:layout_width="match_parent"  39  android:layout_height="wrap_content"  40  android:layout_alignParentTop="true"  41  android:layout_marginBottom="5px"  42  android:layout_marginLeft="5dp"  43  android:layout_marginRight="5dp"  44  android:layout_marginTop="5dp"  45  android:layout_toRightOf="@+id/faceImg"  46  android:background="@drawable/qq_edit_login"  47  android:paddingLeft="45sp"  48  android:text="输入帐号"  49  android:textColor="#ddd" />  50  51 <!-- 文本框左边帐号提示 -->  52  53 <TextView  54 android:layout_width="wrap_content"  55  android:layout_height="wrap_content"  56  android:layout_alignBottom="@+id/login_edit_account"  57  android:layout_alignLeft="@+id/login_edit_account"  58  android:layout_alignTop="@+id/login_edit_account"  59  android:layout_marginRight="15.0sp"  60  android:gravity="center_vertical"  61  android:paddingLeft="7sp"  62  android:text="帐号"  63  android:textSize="16dp" />  64  65 <!-- 下拉菜单按钮 -->  66  67 <ImageButton  68 android:layout_width="wrap_content" 69 android:layout_height="wrap_content" 70 android:layout_alignBottom="@+id/login_edit_account" 71 android:layout_alignRight="@+id/login_edit_account" 72 android:layout_alignTop="@+id/login_edit_account" 73 android:layout_marginRight="1dp" 74 android:background="@drawable/more_select" /> 75 76 <!-- 密码文本框 --> 77 78 <EditText 79 android:id="@+id/login_edit_pwd" 80 android:layout_width="wrap_content" 81 android:layout_height="wrap_content" 82 android:layout_alignLeft="@+id/login_edit_account" 83 android:layout_alignRight="@+id/login_edit_account" 84 android:layout_below="@+id/login_edit_account" 85 android:background="@drawable/qq_edit_login" 86 android:paddingLeft="45sp" 87 android:text="输入帐号" 88 android:textColor="#ddd" /> 89 90 <TextView 91 android:layout_width="wrap_content" 92 android:layout_height="wrap_content" 93 android:layout_alignBottom="@+id/login_edit_pwd" 94 android:layout_alignLeft="@+id/login_edit_pwd" 95 android:layout_alignTop="@+id/login_edit_pwd" 96 android:layout_marginRight="15.0sp" 97 android:gravity="center_vertical" 98 android:paddingLeft="7sp" 99 android:text="密码" 100 android:textSize="16dp" /> 101 102 <!-- 记住密码选项 --> 103 104 <CheckBox 105 android:layout_width="wrap_content" 106 android:layout_height="wrap_content" 107 android:layout_alignBaseline="@+id/login_btn_login" 108 android:button="@drawable/qq_btn_check" 109 android:text="记住密码" /> 110 111 <!-- 登录按钮 --> 112 113 <Button 114 android:id="@+id/login_btn_login" 115 android:layout_width="130px" 116 android:layout_height="42px" 117 android:layout_alignParentRight="true" 118 android:layout_below="@+id/login_edit_pwd" 119 android:layout_marginRight="7px" 120 android:layout_marginTop="12px" 121 android:text="登录" /> 122 </RelativeLayout> 123 <!-- 复选框层 --> 124 125 <TableLayout 126 android:layout_width="match_parent" 127 android:layout_height="wrap_content" 128 android:layout_marginLeft="20px" 129 android:layout_marginRight="20px" 130 android:stretchColumns="1" > 131 132 <TableRow> 133 134 <CheckBox 135 style="@style/MyCheckBox" 136 android:layout_width="wrap_content" 137 android:layout_height="wrap_content" 138 android:text="隐身登录" /> 139 140 <CheckBox 141 style="@style/MyCheckBox" 142 android:layout_width="wrap_content" 143 android:layout_height="wrap_content" 144 android:layout_gravity="right" 145 android:text="开启震动" /> 146 </TableRow> 147 148 <TableRow> 149 150 <CheckBox 151 style="@style/MyCheckBox" 152 android:layout_width="wrap_content" 153 android:layout_height="wrap_content" 154 android:text="接收群消息" /> 155 156 <CheckBox 157 style="@style/MyCheckBox" 158 android:layout_width="wrap_content" 159 android:layout_height="wrap_content" 160 android:layout_gravity="right" 161 android:text="静音登录" /> 162 </TableRow> 163 </TableLayout> 164 </LinearLayout> 165 <!-- 底部 --> 166 167 <RelativeLayout 168 android:layout_width="match_parent" 169 android:layout_height="44dp" 170 android:background="@drawable/bottom" 171 android:gravity="center_vertical" > 172 173 <ImageButton 174 android:layout_width="wrap_content" 175 android:layout_height="wrap_content" 176 android:background="@drawable/option" /> 177 </RelativeLayout> 178 179 </LinearLayout>

样式：

    <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>

样式选择器：

<?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>

<?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>

<?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>

<?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>