Android Studio实现简单的QQ登录界面

振华OPPO

已于 2023-02-16 22:08:27 修改

阅读量5.2w

点赞数 102

分类专栏： Android项目文章标签： android 移动应用开发安卓 android-studio 安卓app

于 2020-06-06 15:41:45 首次发布

本文链接：https://blog.csdn.net/qq_42257666/article/details/106587509

版权

Android项目专栏收录该内容

57 篇文章 756 订阅

订阅专栏

项目目录

一、项目概述
二、开发环境
三、布局设计
四、Activity代码
五、项目效果
六、项目总结
七、源码获取

一、项目概述

QQ是我们日常生活使用最多的软件之一，包含登录界面和进入后的聊天界面、好友列表界面和空间动态界面等。登录界面的制作比较简单，主要考验布局的使用，是实现QQ项目的第一步。现在APP开发的首要工作都是实现登录页面，所以学会了QQ登录界面对以后的软件开发有着很重要的作用。

二、开发环境

Android Studio3.6.1是20年4月从官网下载的最新版本，在这个时间点之后从官网下载的都是更新的版本，都符合版本要求。
在这里插入图片描述

三、布局设计

1、头像设计

首先在layout文件里面选择了LinearLayout（线性布局）作为整个页面的布局。

用下面的属性设置布局中子元素的排列方式为垂直排列

android:orientation="vertical"

在顶端放置了一个ImageView控件，id设为“iv”，宽度和高度设置的都是70dp。

android:layout_gravity="center_horizontal"设置为水平居中。

然后使头像在整个页面下调一点，不要紧贴着顶端，所以layout_marginTop设置为50dp。

最后选择drawable文件夹中的head文件作为头像。代码如下：

    <ImageView
        android: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是内边距。

	<LinearLayout
        android: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">

        <TextView
            android: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" />

        <EditText
            android: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，输入时候会隐藏输入内容，使用*** 代替。

	<LinearLayout
        android: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">

        <TextView
            android: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" />
        <EditText
            android: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文件里面的属性。

    <CheckBox
        android: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控件，文本内容为“登录”，文本颜色为蓝色，就是用来登录的。

    <Button
        android: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的值，若不存在则为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项目等你来学习。博主从头到尾详细讲述了该项目的搭建运行步骤，代码里面也有详细的注释，如果对你有帮助的话，记得三连支持下哦~
在这里插入图片描述

🚀这有你错过的精彩内容
Android Studio实现外卖订餐系统
Android Studio实现考试管理系统
Android Studio实现图书馆订座系统
Android Studio实现学生信息管理系统
Android Studio实现校园图书管理系统

一切在事业上有所成就的人，在他们的传记里，我们常常可以看到这样一些句子：“利用每一分钟来读书。”

振华OPPO

关注

102
点赞
踩
824

收藏

觉得还不错? 一键收藏
打赏
9
评论
Android Studio实现简单的QQ登录界面

QQ是我们日常生活使用最多的软件之一，包含登录界面和进入后的聊天界面、好友列表界面和空间动态界面等。登录界面的制作比较简单，主要考验布局的使用，是实现QQ项目的第一步。现在APP开发的首要工作都是实现登录页面，所以学会了QQ登录界面对以后的软件开发有着很重要的作用。
复制链接

扫一扫