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>

下载我的练习工程

相关文章：

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

[转]Android：布局实例之模仿QQ登录界面的更多相关文章

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

    预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...

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

    预览图及布局结构参考: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout ...

  3. java代码完全手写模仿qq登录界面

    这是我模仿QQ2015版界面,实现的基本功能有登陆验证,重置等,当然直接复制代码运行是不一样的,还要注意自己插入自己的图片. 结果截图如下所示: import java.awt.BorderLayou ...

  4. 界面编程模仿篇(QQ登录界面逼真篇)

    写了好多天的爬虫,偷空前前后后用了两天的时间(排除吃饭睡觉)写完了这个QQ登录界面,看起来还凑和着吧,如果是的大神的,莫见笑,纯属业余作品,废话先不多说,截图如下,其中第二幅图片中的红色方框部份有待完 ...

  5. Android菜鸟的成长笔记（3）——给QQ登录界面说So Easy

    原文:Android菜鸟的成长笔记(3)--给QQ登录界面说So Easy 上一篇:Android菜鸟的成长笔记(2)--第一个Android应用 我们前面已经做了第一个Android应用程序,虽然有 ...

  6. QQ登录界面布局

    简单的qq登录界面布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...

  7. WPF开发实例——仿QQ登录界面

    原文:WPF开发实例--仿QQ登录界面 版权声明:本文为博主原创文章,如需转载请标明转载地址 http://blog.csdn.net/u013981858 https://blog.csdn.net ...

  8. WPF模仿QQ登录按钮

    原文:WPF模仿QQ登录按钮 如下图,第一张是未点击时按钮样式,第二张是鼠标划过时按钮样式. 样式代码: <Style TargetType="{x:Type Button}" ...

  9. swing实现QQ登录界面1.0（ 实现了同一张图片只加载一次）、（以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件）

    swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...

随机推荐

  1. 【IDEA】IDEA设置新建文件的模板

    今天在IDEA中新建JS文件的时候想着也像WebStorm一样可以显示作者和时间,所以就研究了下在IDEA中修改文件创建时的模板. 点击settings找到File and Code Template ...

  2. Linux下文件目录权限和对应命令的总结

    Linux下的权限有rwx三种,分别对应读,写,执行三种,在对文件和目录时,分别是下列含义: 对应权限的命令为: 文件: r-- cat, more, head, tail w-- echo, vi ...

  3. [MySQL] gap lock/next-key lock浅析

    当InnoDB在判断行锁是否冲突的时候, 除了最基本的IS/IX/S/X锁的冲突判断意外, InnoDB还将锁细分为如下几种子类型: record lock (RK) 记录锁, 仅仅锁住索引记录的一行 ...

  4. OAuth认证与授权

    什么是OAuth授权?   一.什么是OAuth协议 OAuth(开放授权)是一个开放标准. 允许第三方网站在用户授权的前提下访问在用户在服务商那里存储的各种信息. 而这种授权无需将用户提供用户名和密 ...

  5. C/C++——#和##操作符

    1. #操作符 使用阶段:预处理阶段,只有宏定义中使用(#define) 作用:将宏参数转换为字符串 示例: #define STRING(x) #x 2. ##操作符 使用阶段:预处理阶段,只有宏定 ...

  6. URL中斜杠/和反斜杠\的区别小结

    Unix使用斜杆/ 作为路径分隔符,而web应用最新使用在Unix系统上面,所以目前所有的网络地址都采用 斜杆/ 作为分隔符. Windows由于使用 斜杆/ 作为DOS命令提示符的参数标志了,为了不 ...

  7. 【转载】python-协程

    转载自:廖雪峰的官方网站 协程,又称微线程,纤程.英文名Coroutine. 协程的概念很早就提出来了,但直到最近几年才在某些语言(如Lua)中得到广泛应用. 子程序,或者称为函数,在所有语言中都是层 ...

  8. Linux 硬盘挂载方法

    linux 硬盘分区,分区,删除分区,格式化,挂载,卸载笔记 硬盘挂载操作工作步骤: 1.先查看目前机器上有几块硬盘,查看命令有两种: 命令1:# fdisk –l 命令2:# dmesg | gre ...

  9. google的面试题(三维动态规划的范例)——(87)Scramble String

    转:http://www.cnblogs.com/easonliu/p/3696135.html 分析:这个问题是google的面试题.由于一个字符串有很多种二叉表示法,貌似很难判断两个字符串是否可以 ...

  10. js写一个插件

    //;分号开头,用于防止代码压缩合并时与其它代码混在一起造成语法错误 //而事实证明,uglify压缩工具会将无意义的前置分号去掉,我只是习惯了这么写 //(function(){})();立即执行函 ...