最近,有点空闲的时间就拿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登录界面相关推荐

  1. java gui界面设计qq_Java swing界面开发(仿QQ登录界面)

    首先引入包的概念,包:给代码分类,提高的了代码的可读性,封装后方便管理.在包中类的引入:import 包名.类名;包名需小写,多单词用"."隔开.类名的命名规范:首字母大写其后的每 ...

  2. java仿qq登录 界面设计,Java Swing仿QQ登录界面效果

    本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下 闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEcl ...

  3. java如何引入qq登陆,Java Swing仿QQ登录界面 学习之用

    闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEclipse的拖动功能). 源代码如下: package ibees.qq; import java ...

  4. Android实现仿QQ登录界面背景动画效果

    登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...

  5. JavaSwing仿QQ登录界面,注释完善,适合新手学习

    使用说明: 这是一个java做的仿制QQ登录界面,界面仅使用一个类, JDK版本为jdk-11 素材包的名字为:素材(下载)请在项目中新建一个名字为"素材"的文件夹. 素材: ht ...

  6. 详解使用NetBeans IDE 8.2进行可视化图形界面设计——高仿QQ登录界面

    目录 前言 QQ登录界面的设计与实现 1.新建一个Java项目 2.在任意包下新建一个JFrame窗体类 3.添加图片 4.设置账号文本框(JTextField)与密码框(JPasswordField ...

  7. Android仿QQ登录界面示例,实现登录、注册功能。

    首语 欢迎大家关注我的公众号:八归少年 微信公众号优先更新文章.扫描上面二维码即可关注!一起进步,一同成长. Android开发经常用到注册.登录功能,于是便整理出一般通用的登录界面,并实现其相应功能 ...

  8. php仿qq登录界面安卓,Android_Android仿QQ登陆窗口实现原理,今天根据腾讯qq,我们做一个 - phpStudy...

    Android仿QQ登陆窗口实现原理 今天根据腾讯qq,我们做一个练习,来学习如何制作一个漂亮的布局.首先看一下官方图片 还是一个启动画面,之后进入登录页面,导航页面就不介绍了,大家可以参考微信的导航 ...

  9. java仿qq 界面_界面--仿qq登录界面

    [java]代码库package s1127qq登陆界面; import java.awt.BorderLayout; import java.awt.Color; import java.awt.C ...

最新文章

  1. 用Asp.net实现简单的文字水印
  2. linux存储--进程栈 线程栈 内核栈 中断栈(十六)
  3. HBase常用功能和HBase+MapReduce使用总结
  4. HTML图片瓦片,HTML5 可扩展瓦片式导航栏
  5. BZOJ2301: [HAOI2011]Problem b(莫比乌斯反演)
  6. oracle 10741 trace,RedHat5.3上安装Oracle 10.2.0.1
  7. Haar特征原理与icvCreateIntHaarFeatures方法的具体实现附详细注释—— 人脸识别的尝试系列(二)
  8. Maxcompute造数据-方法详解
  9. ActiveX控件的另类免费签名法
  10. ae插件form_AE插件 | 没有这些插件,还想做特效?
  11. 学习easyui疑问(二)
  12. opencv BRIEF角检测
  13. Apache-配置、测试和调试
  14. 写给MongoDB开发者的50条建议Tip14
  15. mysql 左连接写法_mysql左连接复杂正确写法
  16. RFID扫描APP Android
  17. 南京20年房价变迁史:别人在买房,你在干什么?
  18. ORACLE DUL 工具使用方法介绍
  19. springboot的jsp应该放在哪_七、SpringBoot项目集成JSP以及项目不同启动方式及访问路径配置...
  20. js实现任意节日倒计时html

热门文章

  1. LeetCode 1966. Binary Searchable Numbers in an Unsorted Array
  2. TensorFlow 2.0 - TFRecord存储数据集、@tf.function图执行模式、tf.TensorArray、tf.config分配GPU
  3. LeetCode 1723. 完成所有工作的最短时间(DFS+剪枝 / 状态压缩DP)
  4. LeetCode 792. 匹配子序列的单词数(二分查找)
  5. LeetCode MySQL 1435. 制作会话柱状图
  6. 程序员面试金典 - 面试题 16.10. 生存人数(自定义优先队列)
  7. LintCode 1652. 区间异或 II
  8. LeetCode 1367. 二叉树中的列表(双重递归)
  9. LeetCode 589. N叉树的前序遍历(前序遍历)
  10. 总结与整理:Ubuntu系统下安装、配置Nginx及其他注意事项