Android UI布局—— 仿QQ登录界面
最近,有点空闲的时间就拿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 4 xmlns:android="http://schemas.android.com/apk/res/android" 5 android:layout_width="fill_parent" 6 android:layout_height="fill_parent" 7 android:orientation="vertical" 8 android: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 <RelativeLayout 102 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
转载于:https://www.cnblogs.com/yangyu20121220/archive/2012/08/19/2646736.html
Android UI布局—— 仿QQ登录界面相关推荐
- java gui界面设计qq_Java swing界面开发(仿QQ登录界面)
首先引入包的概念,包:给代码分类,提高的了代码的可读性,封装后方便管理.在包中类的引入:import 包名.类名;包名需小写,多单词用"."隔开.类名的命名规范:首字母大写其后的每 ...
- java仿qq登录 界面设计,Java Swing仿QQ登录界面效果
本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下 闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEcl ...
- java如何引入qq登陆,Java Swing仿QQ登录界面 学习之用
闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEclipse的拖动功能). 源代码如下: package ibees.qq; import java ...
- Android实现仿QQ登录界面背景动画效果
登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...
- JavaSwing仿QQ登录界面,注释完善,适合新手学习
使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为"素材"的文件夹. 素材: ht ...
- 详解使用NetBeans IDE 8.2进行可视化图形界面设计——高仿QQ登录界面
目录 前言 QQ登录界面的设计与实现 1.新建一个Java项目 2.在任意包下新建一个JFrame窗体类 3.添加图片 4.设置账号文本框(JTextField)与密码框(JPasswordField ...
- Android仿QQ登录界面示例,实现登录、注册功能。
首语 欢迎大家关注我的公众号:八归少年 微信公众号优先更新文章.扫描上面二维码即可关注!一起进步,一同成长. Android开发经常用到注册.登录功能,于是便整理出一般通用的登录界面,并实现其相应功能 ...
- php仿qq登录界面安卓,Android_Android仿QQ登陆窗口实现原理,今天根据腾讯qq,我们做一个 - phpStudy...
Android仿QQ登陆窗口实现原理 今天根据腾讯qq,我们做一个练习,来学习如何制作一个漂亮的布局.首先看一下官方图片 还是一个启动画面,之后进入登录页面,导航页面就不介绍了,大家可以参考微信的导航 ...
- java仿qq 界面_界面--仿qq登录界面
[java]代码库package s1127qq登陆界面; import java.awt.BorderLayout; import java.awt.Color; import java.awt.C ...
最新文章
- 用Asp.net实现简单的文字水印
- linux存储--进程栈 线程栈 内核栈 中断栈(十六)
- HBase常用功能和HBase+MapReduce使用总结
- HTML图片瓦片,HTML5 可扩展瓦片式导航栏
- BZOJ2301: [HAOI2011]Problem b(莫比乌斯反演)
- oracle 10741 trace,RedHat5.3上安装Oracle 10.2.0.1
- Haar特征原理与icvCreateIntHaarFeatures方法的具体实现附详细注释—— 人脸识别的尝试系列(二)
- Maxcompute造数据-方法详解
- ActiveX控件的另类免费签名法
- ae插件form_AE插件 | 没有这些插件,还想做特效?
- 学习easyui疑问(二)
- opencv BRIEF角检测
- Apache-配置、测试和调试
- 写给MongoDB开发者的50条建议Tip14
- mysql 左连接写法_mysql左连接复杂正确写法
- RFID扫描APP Android
- 南京20年房价变迁史:别人在买房,你在干什么?
- ORACLE DUL 工具使用方法介绍
- springboot的jsp应该放在哪_七、SpringBoot项目集成JSP以及项目不同启动方式及访问路径配置...
- js实现任意节日倒计时html
热门文章
- LeetCode 1966. Binary Searchable Numbers in an Unsorted Array
- TensorFlow 2.0 - TFRecord存储数据集、@tf.function图执行模式、tf.TensorArray、tf.config分配GPU
- LeetCode 1723. 完成所有工作的最短时间(DFS+剪枝 / 状态压缩DP)
- LeetCode 792. 匹配子序列的单词数(二分查找)
- LeetCode MySQL 1435. 制作会话柱状图
- 程序员面试金典 - 面试题 16.10. 生存人数(自定义优先队列)
- LintCode 1652. 区间异或 II
- LeetCode 1367. 二叉树中的列表(双重递归)
- LeetCode 589. N叉树的前序遍历(前序遍历)
- 总结与整理:Ubuntu系统下安装、配置Nginx及其他注意事项