Android Studio实现简单的QQ登录界面 | 您所在的位置:网站首页 › 为什么我的世界饥饿度一直不减少 › Android Studio实现简单的QQ登录界面 |
项目目录
一、项目概述二、开发环境三、布局设计1、头像设计2、账号输入框3、密码输入框4、复选框5、登录按钮
四、Activity代码1、声明变量2、封装方法3、绑定控件4、逻辑判断5、设置点击事件6、设置对话框
五、项目效果六、项目总结七、源码获取
一、项目概述
QQ是我们日常生活使用最多的软件之一,包含登录界面和进入后的聊天界面、好友列表界面和空间动态界面等。登录界面的制作比较简单,主要考验布局的使用,是实现QQ项目的第一步。现在APP开发的首要工作都是实现登录页面,所以学会了QQ登录界面对以后的软件开发有着很重要的作用。 二、开发环境Android Studio3.6.1是20年4月从官网下载的最新版本,在这个时间点之后从官网下载的都是更新的版本,都符合版本要求。 首先在layout文件里面选择了LinearLayout(线性布局)作为整个页面的布局。 用下面的属性设置布局中子元素的排列方式为垂直排列 android:orientation="vertical"在顶端放置了一个ImageView控件,id设为“iv”,宽度和高度设置的都是70dp。 android:layout_gravity="center_horizontal"设置为水平居中。 然后使头像在整个页面下调一点,不要紧贴着顶端,所以layout_marginTop设置为50dp。 最后选择drawable文件夹中的head文件作为头像。代码如下: 2、账号输入框利用LinearLayout(线性布局)作为账号输入框的外层布局,orientation设置的为水平排列。 放置了一个TextView控件,宽度和高度设置的wrap_content,即适应内容大小,显示文本“账号”。 紧接着放置一个EditText控件,用于输入账号内容,使用layout_toRightOf属性定位于账号的右侧。 使用android:layout_marginLeft="5dp"和android:padding="10dp"进行微调,margin是外边距,padding是内边距。 3、密码输入框最外层依旧是LinearLayout(线性布局),整体放置在上一个LinearLayout的下面,控件排列依然为horizontal(水平)。 放置一个TextView文本显示框,文本内容是“密码”,文本颜色为黑色,文本大小为20sp。 android:background="@null"去除了输入框的背景横线。 再放置一个EditText文本输入框,inputType设置为textPassword,输入时候会隐藏输入内容,使用*** 代替。 4、复选框在文本框和输入框下面,放置一个复选框,用来显示"记住密码"这个选项。android:textSize="16sp" 设置字体大小为16sp,android:textColor="@color/cyan"设置字体颜色为天青色,是自己写在color文件里面的属性。 5、登录按钮最下面放置一个Button控件,文本内容为“登录”,文本颜色为蓝色,就是用来登录的。 四、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的值,若不存在则为false boolean 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() { @Override public 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() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } })设置了“确定”选项的点击事件为:关闭对话框。 .setNegativeButton("取消", new DialogInterface.OnClickListener() { @Override public 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() { @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }) .setNegativeButton("取消", new DialogInterface.OnClickListener() { @Override public 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项目等你来学习。博主从头到尾详细讲述了该项目的搭建运行步骤,代码里面也有详细的注释,如果对你有帮助的话,记得三连支持下哦~ 一切在事业上有所成就的人,在他们的传记里,我们常常可以看到这样一些句子:“利用每一分钟来读书。” |
CopyRight 2018-2019 实验室设备网 版权所有 |