Android Studio实现简单的QQ登录界面
项目目录
- 一、项目概述
- 二、开发环境
- 三、布局设计
- 1、头像设计
- 2、账号输入框
- 3、密码输入框
- 4、复选框
- 5、登录按钮
- 四、Activity代码
- 1、声明变量
- 2、封装方法
- 3、绑定控件
- 4、逻辑判断
- 5、设置点击事件
- 6、设置对话框
- 五、项目效果
- 六、项目总结
- 七、源码获取
一、项目概述
QQ是我们日常生活使用最多的软件之一,包含登录界面和进入后的聊天界面、好友列表界面和空间动态界面等。登录界面的制作比较简单,主要考验布局的使用,是实现QQ项目的第一步。现在APP开发的首要工作都是实现登录页面,所以学会了QQ登录界面对以后的软件开发有着很重要的作用。
二、开发环境
三、布局设计
1、头像设计
首先在layout文件里面选择了LinearLayout(线性布局)作为整个页面的布局。
用下面的属性设置布局中子元素的排列方式为垂直排列
android:orientation="vertical"
在顶端放置了一个ImageView控件,id设为“iv”,宽度和高度设置的都是70dp。
android:layout_gravity="center_horizontal"
设置为水平居中。
然后使头像在整个页面下调一点,不要紧贴着顶端,所以layout_marginTop设置为50dp。
最后选择drawable文件夹中的head文件作为头像。代码如下:
<ImageViewandroid:id='@+id/iv'android:layout_width="70dp"android:layout_height="70dp"android:layout_gravity="center_horizontal"android:layout_marginTop="50dp"android:background="@drawable/head"/>
2、账号输入框
利用LinearLayout(线性布局)作为账号输入框的外层布局,orientation设置的为水平排列。
放置了一个TextView控件,宽度和高度设置的wrap_content,即适应内容大小,显示文本“账号”。
紧接着放置一个EditText控件,用于输入账号内容,使用layout_toRightOf属性定位于账号的右侧。
使用android:layout_marginLeft="5dp"
和android:padding="10dp"
进行微调,margin是外边距,padding是内边距。
<LinearLayoutandroid:id="@+id/account"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/iv"android:layout_gravity="center_horizontal"android:layout_marginBottom="5dp"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:layout_marginTop="30dp"android:background="#ffffff"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_account"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="10dp"android:text="账号:"android:textColor="#000"android:textSize="20sp" /><EditTextandroid:id="@+id/et_account"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_toRightOf="@id/tv_account"android:layout_marginLeft="5dp"android:background="@null"android:inputType="text"android:padding="10dp" /></LinearLayout>
3、密码输入框
最外层依旧是LinearLayout(线性布局),整体放置在上一个LinearLayout的下面,控件排列依然为horizontal(水平)。
放置一个TextView文本显示框,文本内容是“密码”,文本颜色为黑色,文本大小为20sp。
android:background="@null"
去除了输入框的背景横线。
再放置一个EditText文本输入框,inputType设置为textPassword,输入时候会隐藏输入内容,使用*** 代替。
<LinearLayoutandroid:id="@+id/password"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/account"android:layout_centerVertical="true"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"android:background="#ffffff"android:orientation="horizontal"><TextViewandroid:id="@+id/tv_password"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="10dp"android:text="密码:"android:textColor="#000"android:textSize="20sp" /><EditTextandroid:id="@+id/et_password"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="5dp"android:layout_toRightOf="@id/tv_password"android:background="@null"android:inputType="textPassword"android:padding="10dp"/></LinearLayout>
4、复选框
在文本框和输入框下面,放置一个复选框,用来显示"记住密码"这个选项。android:textSize="16sp"
设置字体大小为16sp,android:textColor="@color/cyan"
设置字体颜色为天青色,是自己写在color文件里面的属性。
<CheckBoxandroid:id="@+id/remember"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="记住密码"android:textSize="16sp"android:layout_margin="10dp"android:textColor="@color/cyan"/>
5、登录按钮
最下面放置一个Button控件,文本内容为“登录”,文本颜色为蓝色,就是用来登录的。
<Buttonandroid:id="@+id/login"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="60dp"android:background="#3C8DC4"android:text="登录"android:textColor="#000"android:textSize="20sp" />
四、Activity代码
1、声明变量
【访问类型】+【变量类型】+【变量名】+“;”
//分别声明布局文件中用到的变量private EditText account;private EditText password;private CheckBox remember;private Button login;
//声明数据存储对象private SharedPreferences pref;private SharedPreferences.Editor editor;
2、封装方法
所有的初始化代码封装到initView中,显得更加整洁。
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//所有初始化封装到此方法中initView();}
3、绑定控件
将之前声明的变量和对应的控件进行绑定,这样该变量就代表了被绑定的控件
pref= PreferenceManager.getDefaultSharedPreferences(this);//绑定控件,这样变量就代表了被绑定的控件account=findViewById(R.id.et_account);password=findViewById(R.id.et_password);remember=findViewById(R.id.remember);login=findViewById(R.id.login);
4、逻辑判断
我们要用到SharedPreferences数据存储,这是Android自带的三种存储方法中——最方便且最容易的数据存储方法。其实就是利用键值对的形式,写入的时候用editor对象写到该存储文件中,然后读的时候用getString方法从数据文件中读出来,getString第一个参数为键,第二个参数为默认值,即不存在该键值对时候的值。
//获取键为remember_password的值,若不存在则为falseboolean isRemember=pref.getBoolean("remember_password",false);if(isRemember){//将账号和密码都设置到文本框中String acc=pref.getString("account","");String pass=pref.getString("password","");account.setText(acc);password.setText(pass);remember.setChecked(true);}
5、设置点击事件
对登录按钮设置了setOnClickListener,即点击事件监听器。
在监听器里面重写了onClick方法,首先获取到输入框中的账号和密码,然后进行if判断,如果和默认的账号“admin”和密码“123456”一样,则认为登录成功,然后再进行复选框选择的判断,如果复选框被选中了,即记住密码,则把账号和密码保存到数据文件中,等到下次进行应用时候从数据文件中获取即可。
如果复选框没有被选中,即没有记住密码,则清除编辑器内容。最后editor.apply();
提交编辑器内容,Toast.makeText(MainActivity.this,"登录成功",Toast.LENGTH_SHORT).show();
设置了登录成功的提示信息。
login.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {String ed_account=account.getText().toString();String ed_password=password.getText().toString();//如果账号是admin,密码是123456,就认为登录成功if(ed_account.equals("admin")&&ed_password.equals("123456")){editor= pref.edit();if(remember.isChecked()){//若复选框被选中,则保存账号和密码到pref中editor.putBoolean("remember_password",true);editor.putString("account",ed_account);editor.putString("password",ed_password);}else {editor.clear();}editor.apply();Toast.makeText(MainActivity.this,"登录成功",Toast.LENGTH_SHORT).show();}
6、设置对话框
AlertDialog dialog;
声明一个对话框对象。
AlertDialog.Builder builder=new AlertDialog.Builder(MainActivity.this)
初始化该对象。
.setTitle("账号或密码输入有误")
设置了对话框的标题为。
.setIcon(R.mipmap.ic_launcher)
设置了对话框图标.
.setMessage("请输入正确的账号和密码")
设置了对话框的提示信息。
.setPositiveButton("确定", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss();}})
设置了“确定”选项的点击事件为:关闭对话框。
.setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss();MainActivity.this.finish();}});
设置了“取消”选项的点击事件为:关闭对话框,退出程序。
这部分代码如下:
else {//设置对话框AlertDialog dialog;AlertDialog.Builder builder=new AlertDialog.Builder(MainActivity.this).setTitle("账号或密码输入有误").setIcon(R.mipmap.ic_launcher).setMessage("请输入正确的账号和密码").setPositiveButton("确定", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss();}}).setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss();MainActivity.this.finish();}});dialog=builder.create();dialog.show();}
以上就是完整的代码及介绍。
五、项目效果
1、用API为22的模拟器运行项目。
2、如果输入的账号或者密码不对,点击登录会显示对话框。
点击确定按钮,对话框会消失;点击取消按钮,则会退出应用。
3、当我们输入正确的账号和密码后,点击登录会显示“成功登录”的提示信息。
4、我们勾选上【记住密码】的复选框,再点击登录。然后我们退出应用并再次打开,发现上次登录的账号和密码依然被保存。
六、项目总结
本次项目虽然属于比较基础的内容,但是知识点涉及的还是比较全面的,有布局有控件,有Toast提示信息,还有dialog对话框,甚至还有SharedPreferences的数据存储。希望大家通过这次项目熟练掌握界面布局和控件的使用,为以后的项目开发打下坚实的基础。
七、源码获取
需要源码学习的同学可以关注我的微信公众号,回复:QQ登录界面 ,获取源码。还有很多经典的Android项目等你来学习。博主从头到尾详细讲述了该项目的搭建运行步骤,代码里面也有详细的注释,如果对你有帮助的话,记得三连支持下哦~
Android Studio实现简单的QQ登录界面相关推荐
- 在 Android Studio 中创建一个简单的 QQ 登录界面
一,创建一个新的 Android Studio 项目 打开 Android Studio,选择 "Start a new Android Studio project",然后填写应 ...
- Android Studio实现简单的QQ应用
项目目录 一.项目概述 二.开发环境 三.详细设计 1.主界面的搭建 2.消息界面的搭建 3.联系人界面的搭建 4.动态界面的搭建 5.聊天界面的搭建 6.跳转功能实现 6.1.选项卡的切换 6.2. ...
- Android学习笔记之 仿QQ登录界面的实现
原网址:http://www.cnblogs.com/wjdawx/p/3512493.html 先来看下效果图 1.首先是布局文件XML文件,不解释直接上 1>主界面 1 &l ...
- Android UI布局—— 仿QQ登录界面
最近,有点空闲的时间就拿QQ登录界面来模仿练手,做了个简单的登录界面.界面一般般吧,不算很漂亮,现在拿出来分享,希望大家一起学习与进步.有什么不足之处,请各位大侠多多赐教,谢谢.这个界面涉及到Line ...
- android页面布局计算机,Android Studio制作简单计算器App
Android Studio制作简单计算器App 计算机界面如图: 程序设计步骤: (1)在布局文件中声明编辑文件框EditText,按钮Button等组件. (2)在MainActivity中获取组 ...
- Android 模仿QQ登录界面解决软键盘遮挡问题
Android 软件盘弹出可能会遮挡住界面上的某些控件.当 windowSoftInputMode 为 adjustPan 时,一般不会挡住 EditText,但是假如 EditText 下面是一个登 ...
- 【Android笔记12】使用Android实现QQ登录界面功能
这篇文章,主要利用前面学习的Android相关开发知识,模拟实现QQ登录界面的功能. 目录 一.效果展示 (1)登录界面布局分析 (2)具体实现效果 二.
- java qq登录成功界面_java实现简单QQ登录界面
本文实例为大家分享了java实现简单QQ登录界面的具体代码,供大家参考,具体内容如下 java在图形界面,不是太强项,但不是不可以做,它的开源是very nice! 实现代码如下(想实现完美的界面,可 ...
- java实现简单QQ登录界面验证_QQ登录界面实现
正版现货ui设计必修课sketch ue光盘 191.8元 包邮 (需用券) 去购买 > Java实现QQ登录界面 QQ登录界面也是界面的一种,在实现界面时我们需要一些界面开发包,如: pack ...
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
最新文章
- 搜索进程内存地址_Linux编程 6 (查看进程 ps 及输出风格)
- JDK6.0+Eclipse3.2+MyEclipse5.0GA+Tomcat5.0+Win2003搭建J2EE开发平台.
- 写出漂亮 Python 代码的 20条准则
- 平安技术开放日质量保证技术专场第一期 [附部分 ppt]
- Qcon大会归来(r12笔记第36天)
- java.lang.NoClassDefFoundError: org/springframework/dao/support/DaoSupport
- 一篇文章了解架构设计的本质
- A股开盘:深证区块链50指数跌0.20%,136只概念股下跌
- php存省市,PHP格式化全国省市区列表
- 2017ps计算机考证
- pr中如何自定义序列尺寸
- Node.js常用console中的几种方法
- 土耳其央行行长当得不容易 | 经济学人早报精选
- WPS for linux 安装及windows字体添加
- 我的秋招圆满落幕了,很开心
- Vue elementui 实现表格selection的默认勾选
- 小程序ios页面数据空白问题
- ART-PI 嵌入式人形检测 附源码(RT-AK Demo)
- Microsoft Azure和WPF实现人脸检测
- 为什么CNN可以自动提取图像特征???(2)