• 【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP

    目录

    第一部分、前言

    1、目标效果

    2、准备知识

    第二部分、详细步骤

    1、新建Empty工程

    ​2、添加资源文件

    3、搭建注册界面

    4、搭建登录界面

     5、编写注册界面和登录界面的代码

    6、设置APP初始界面

    7、连接手机，编译工程

    第三部分、总结

    1、参考资料

    2、完整工程和代码

    第一部分、前言

            这段时间由于导师的任务安排，我需要做一个简易的APP，来接收单片机上传的数据，并画出数据的波形。因为之前搞过那种特别简单的APP（就新建一个工程就得到的那种APP），这次为了让APP看起来还算是个APP，所以这段时间就学了一下APP的登录和注册、APP的底部导航栏的实现及应用、APP画简易的波形图等。为了防止自己忘记，这次做了一些简易的笔记并将其分享出来，希望能够给你带来一点小小的灵感。

            那么这一篇文章先讲一下，小白如何从零做一个拥有登录和注册功能的APP？

    1、目标效果

            讲了那么多，首先来看一下这篇文章实现的功能视频是怎样的吧！

    2、准备知识

            首先，你的电脑需要装上Android Studio这个软件，并且能够正常工作，关于软件的下载和安装可以百度，太多了，不做介绍。

            其次，目前我电脑上装的版本是Android Studio 3.5.2这还是2019版，已经有点老了，和目前最新的版本还是有点差距，所以小伙伴如果之前一点都没接触过这个软件，那么我还是建议你装最新版本的Android Studio，因为B站的大部分教学视频都是基于最新版本的。

            最后，对于这个软件完全陌生的小白，你先按照博客的方法一步一步来，如果按照我的方式实现不了效果的，我这里推荐两个干货入门视频，第一个是正哥的视频，第二个是我这篇文章参考的视频。（注意：如果按照博客的步骤往下走，各种文件名称尽量保持一致，这样不容易出错）

     第一个、【7天Java0基础速成安卓开发】Day1 Android工程代码是怎么运行的_哔哩哔哩_bilibili

    第二个、1 as布局介绍和重要文件说明_哔哩哔哩_bilibili

    第二部分、详细步骤

    1、新建Empty工程

    第一步、新建一个Empty Activity工程

     第二步、新建完成后的界面

    ​2、添加资源文件

    第一步、去values文件下的colors.xml文件添加这行代码

    1. <color name="colorBlack">#000000color>
    2. <color name="colorBlue">#78BDF1color>

    第二步、保存下面这个图标，并将其添加到工程当中，命名为box

    第三步、添加Drawable Resource文件，作为登录框的背景

    命名为user_background

    将文件内部代码，替换成以下代码

    1. "1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android">
    3.     <stroke
    4.         android:width="1dp"
    5.         android:color="@color/colorBlack"
    6.         android:background="#CCCCCC"/>
    7.     <corners
    8.         android:radius="100dp"/>
    9. shape>

     得到最终的效果图

    3、搭建注册界面

    第一步、在com.example.myapplication文件夹下，新建一个Empty Activity

     第二步、将新的Activity命名为：LoginActivity，点击确认

     第三步、重复上述的步骤新建一个Activity，命名为RegisterActivity

     第四步、编写注册界面

     第五步、更改原始代码如下，目的是改为线性布局，且布局的排序方式为垂直

     第六步、注册界面布局代码

    1. "1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:orientation="vertical"
    8.     tools:context=".RegisterActivity">
    9.  
    10.     <LinearLayout
    11.         android:layout_width="match_parent"
    12.         android:layout_height="wrap_content">
    13.         <TextView
    14.             android:layout_width="match_parent"
    15.             android:layout_height="match_parent"
    16.             android:text="欢迎注册账号"
    17.             android:textSize="35sp"
    18.             android:gravity="center"
    19.             android:textColor="@color/colorBlack"
    20.             android:layout_marginTop="50dp"
    21.             >TextView>
    22.  
    23.  
    24.     LinearLayout>
    25.     <LinearLayout
    26.         android:layout_width="match_parent"
    27.         android:layout_height="wrap_content"
    28.         android:layout_marginTop="20dp"
    29.         android:layout_marginLeft="10dp"
    30.         android:layout_marginRight="10dp"
    31.  
    32.         >
    33.         <TextView
    34.             android:layout_width="wrap_content"
    35.             android:layout_height="wrap_content"
    36.             android:layout_gravity="center"
    37.             android:text="请输入用户名称："
    38.             android:layout_marginLeft="10dp"
    39.             android:textSize="20sp"
    40.             >TextView>
    41.  
    42.         <EditText
    43.             android:id="@+id/zhuce_user_name"
    44.             android:layout_width="match_parent"
    45.             android:layout_height="60dp"
    46.             android:layout_marginRight="30dp"
    47.             android:textColor="@color/colorBlack"
    48.             android:maxLines="1"
    49.             >EditText>
    50.  
    51.     LinearLayout>
    52.  
    53.     <LinearLayout
    54.         android:layout_width="match_parent"
    55.         android:layout_height="wrap_content"
    56.         android:layout_marginTop="20dp"
    57.         android:layout_marginLeft="10dp"
    58.         android:layout_marginRight="10dp"
    59.         >
    60.         <TextView
    61.             android:layout_width="wrap_content"
    62.             android:layout_height="wrap_content"
    63.             android:layout_gravity="center"
    64.             android:text="请输入账户密码："
    65.             android:layout_marginLeft="10dp"
    66.             android:textSize="20sp"
    67.             >TextView>
    68.  
    69.         <EditText
    70.             android:id="@+id/zhuce_user_password"
    71.             android:layout_width="match_parent"
    72.             android:layout_height="60dp"
    73.             android:layout_marginRight="30dp"
    74.             android:textColor="@color/colorBlack"
    75.             android:maxLines="1"
    76.             android:inputType="textPassword"
    77.             >EditText>
    78.     LinearLayout>
    79.  
    80.     <LinearLayout
    81.         android:layout_width="match_parent"
    82.         android:layout_height="wrap_content"
    83.         android:layout_marginTop="20dp"
    84.         android:layout_marginLeft="10dp"
    85.         android:layout_marginRight="10dp"
    86.         >
    87.         <TextView
    88.             android:layout_width="wrap_content"
    89.             android:layout_height="wrap_content"
    90.             android:layout_gravity="center"
    91.             android:text="请再次输入密码："
    92.             android:layout_marginLeft="10dp"
    93.             android:textSize="20sp"
    94.             >TextView>
    95.  
    96.         <EditText
    97.             android:id="@+id/zhuce_user_password_again"
    98.             android:layout_width="match_parent"
    99.             android:layout_height="60dp"
    100.             android:layout_marginRight="30dp"
    101.             android:textColor="@color/colorBlack"
    102.             android:maxLines="1"
    103.             android:inputType="textPassword"
    104.             >EditText>
    105.     LinearLayout>
    106.  
    107.     <LinearLayout
    108.         android:layout_width="wrap_content"
    109.         android:layout_height="wrap_content"
    110.         android:layout_marginTop="40dp"
    111.         android:layout_gravity="center">
    112.         <Button
    113.             android:id="@+id/zhuce_success"
    114.             android:layout_width="200dp"
    115.             android:layout_height="wrap_content"
    116.  
    117.             android:text="注册完成"
    118.             android:textSize="25dp"
    119.             android:textColor="@color/colorBlack"
    120.             android:background="@color/colorBlue"
    121.  
    122.             >Button>
    123.  
    124.     LinearLayout>
    125.  
    126. LinearLayout>

     第七步、最终效果

    4、搭建登录界面

     第一步、登录界面的布局编写方式也和上面一样，复制下方代码

      第二步、登录界面布局代码

    1. "1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:orientation="vertical"
    8.     tools:context=".LoginActivity">
    9.     
    10.     <LinearLayout
    11.         android:layout_width="match_parent"
    12.         android:layout_height="wrap_content"
    13.         android:gravity="center"
    14.         android:layout_marginTop="50dp">
    15.         <ImageView
    16.             android:layout_width="64dp"
    17.             android:layout_height="64dp"
    18.             android:background="@mipmap/box"
    19.             >ImageView>
    20.  
    21.         <TextView
    22.             android:layout_width="wrap_content"
    23.             android:layout_height="wrap_content"
    24.             android:text="智能药箱"
    25.             android:textColor="@color/colorBlack"
    26.             android:textSize="30dp"
    27.             >TextView>
    28.     LinearLayout>
    29.  
    30.     <LinearLayout
    31.         android:layout_width="match_parent"
    32.         android:layout_height="wrap_content"
    33.         android:layout_marginTop="20dp"
    34.         android:layout_marginLeft="30dp"
    35.         android:layout_marginRight="30dp"
    36.         android:background="@drawable/user_background">
    37.         <TextView
    38.             android:layout_width="wrap_content"
    39.             android:layout_height="wrap_content"
    40.             android:layout_gravity="center"
    41.             android:text="用户名："
    42.             android:layout_marginLeft="10dp"
    43.             android:textSize="25sp"
    44.             >TextView>
    45.  
    46.         <EditText
    47.             android:id="@+id/user_name"
    48.             android:layout_width="match_parent"
    49.             android:layout_height="60dp"
    50.             android:layout_marginRight="30dp"
    51.             android:textColor="@color/colorBlack"
    52.             android:maxLines="1"
    53.             >EditText>
    54.     LinearLayout>
    55.  
    56.     <LinearLayout
    57.         android:layout_width="match_parent"
    58.         android:layout_height="wrap_content"
    59.         android:layout_marginTop="20dp"
    60.         android:layout_marginLeft="30dp"
    61.         android:layout_marginRight="30dp"
    62.         android:background="@drawable/user_background">
    63.         <TextView
    64.             android:layout_width="wrap_content"
    65.             android:layout_height="wrap_content"
    66.             android:layout_gravity="center"
    67.             android:text="密   码："
    68.             android:layout_marginLeft="10dp"
    69.             android:textSize="25sp"
    70.             >TextView>
    71.  
    72.         <EditText
    73.             android:id="@+id/user_password"
    74.             android:layout_width="match_parent"
    75.             android:layout_height="60dp"
    76.             android:layout_marginRight="30dp"
    77.             android:textColor="@color/colorBlack"
    78.             android:maxLines="1"
    79.             android:inputType="textPassword"
    80.             >EditText>
    81.     LinearLayout>
    82.  
    83.     <LinearLayout
    84.         android:layout_width="match_parent"
    85.         android:layout_height="wrap_content"
    86.         android:layout_marginTop="40dp"
    87.         android:orientation="horizontal">
    88.         <Button
    89.             android:id="@+id/denglu"
    90.             android:layout_width="0dp"
    91.             android:layout_weight="1"
    92.             android:layout_marginLeft="25dp"
    93.             android:layout_height="wrap_content"
    94.             android:text="登录"
    95.             android:textSize="25sp"
    96.             android:layout_gravity="center"
    97.             >Button>
    98.  
    99.         <Button
    100.             android:id="@+id/zhuce"
    101.             android:layout_width="0dp"
    102.             android:layout_weight="1"
    103.             android:layout_marginRight="25dp"
    104.             android:layout_marginLeft="50dp"
    105.             android:layout_height="wrap_content"
    106.             android:text="注册"
    107.             android:textSize="25dp"
    108.             >Button>
    109.  
    110.     LinearLayout>
    111. LinearLayout>

    第三步、最终效果

     5、编写注册界面和登录界面的代码

    第一步、在com.example.myapplication文件夹下，新建一个Java Class文件

     命名为Mysql

     将内部的代码全部替换为以下代码

    1. package com.example.myapplication;
    2.  
    3. import android.content.Context;
    4. import android.database.sqlite.SQLiteDatabase;
    5. import android.database.sqlite.SQLiteOpenHelper;
    6. import androidx.annotation.Nullable;
    7.  
    8. //数据库
    9. public class Mysql extends SQLiteOpenHelper {
    10.     public Mysql(@Nullable Context context, @Nullable String name, @Nullable SQLiteDatabase.CursorFactory factory, int version) {
    11.         super(context, name, factory, version);
    12.     }
    13.  
    14.     @Override
    15.     public void onCreate(SQLiteDatabase db) {
    16.         String sql = "create table logins(id integer primary key autoincrement,usname text,uspwd text)";
    17.         db.execSQL(sql);
    18.     }
    19.  
    20.     @Override
    21.     public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
    22.  
    23.     }
    24. }

    替换后的结果

    第二步、编辑RegisterActivity.java文件内部的代码，替换为以下代码

    1. package com.example.myapplication;
    2.  
    3. import androidx.appcompat.app.AppCompatActivity;
    4.  
    5. import android.content.ContentValues;
    6. import android.content.Intent;
    7. import android.content.SharedPreferences;
    8. import android.database.sqlite.SQLiteDatabase;
    9. import android.os.Bundle;
    10. import android.view.View;
    11. import android.widget.Button;
    12. import android.widget.EditText;
    13. import android.widget.Toast;
    14.  
    15. public class RegisterActivity extends AppCompatActivity {
    16.  
    17.     //注册界面的控件
    18.     Button zhuce_success;//注册界面的按键
    19.     EditText zhuce_user_name;//注册界面的用户名
    20.     EditText zhuce_user_password; //注册界面的密码
    21.     EditText zhuce_user_password_again; //注册界面的密
    22.  
    23.     Mysql mysql;
    24.     SQLiteDatabase db;
    25.  
    26.     @Override
    27.     protected void onCreate(Bundle savedInstanceState) {
    28.         super.onCreate(savedInstanceState);
    29.         setContentView(R.layout.activity_register);
    30.  
    31.         //寻找控件ID
    32.         zhuce_success = this.findViewById(R.id.zhuce_success);
    33.         zhuce_user_name = this.findViewById(R.id.zhuce_user_name);
    34.         zhuce_user_password = this.findViewById(R.id.zhuce_user_password);
    35.         zhuce_user_password_again= this.findViewById(R.id.zhuce_user_password_again);
    36.  
    37.         mysql = new Mysql(this,"Userinfo",null,1);      //建数据库
    38.         db = mysql.getReadableDatabase();
    39.         zhuce_success.setOnClickListener(new View.OnClickListener() {
    40.             @Override
    41.             public void onClick(View view) {
    42.                 //保存注册数据的字符串
    43.                 String name = zhuce_user_name.getText().toString();          //用户名
    44.                 String pwd01 = zhuce_user_password.getText().toString();      //密码
    45.                 String pwd02 = zhuce_user_password_again.getText().toString(); //二次输入的密码
    46.                 //判断注册内容
    47.                 if(name.equals("")||pwd01 .equals("")||pwd02.equals("")){
    48.                     //显示弹窗
    49.                     Toast.makeText(getApplicationContext(),"用户名或密码不能为空！！",Toast.LENGTH_SHORT).show();
    50.                 }
    51.                 else {
    52.                     //如果注册时第一次输入的密码和第二次输入的密码一致
    53.                     if(pwd01.equals(pwd02)){
    54.                         //ContentValues是一种基本的存储类型
    55.                         ContentValues cv = new ContentValues();
    56.                         //放入数据
    57.                         cv.put("usname",name);
    58.                         cv.put("uspwd",pwd01);
    59.                         db.insert("logins",null,cv);
    60.                         //从当前界面跳转到登录页面
    61.                         Intent intent = new Intent();
    62.                         intent.setClass(RegisterActivity.this,LoginActivity.class);
    63.                         startActivity(intent);
    64.                         //弹窗
    65.                         Toast.makeText(getApplicationContext(),"账号注册成功！！",Toast.LENGTH_SHORT).show();
    66.                     }
    67.                     else {
    68.                         Toast.makeText(getApplicationContext(),"两次输入的密码不一致！！",Toast.LENGTH_SHORT).show();
    69.                     }
    70.                 }
    71.             }
    72.         });
    73.     }
    74. }

    RegisterActivity.java文件替换后的界面

     第三步、编辑LoginActivity.java文件内部的代码，替换为以下代码

    1. package com.example.myapplication;
    2.  
    3. import androidx.appcompat.app.AppCompatActivity;
    4.  
    5. import android.content.Intent;
    6. import android.database.Cursor;
    7. import android.database.sqlite.SQLiteDatabase;
    8. import android.os.Bundle;
    9. import android.view.View;
    10. import android.widget.Button;
    11. import android.widget.EditText;
    12. import android.widget.Toast;
    13.  
    14. public class LoginActivity extends AppCompatActivity {
    15.     //声明控件
    16.     //登陆界面的控件
    17.     EditText user_name;
    18.     EditText user_password;
    19.  
    20.     Button denglu;
    21.     Button zhuce;
    22.  
    23.     //声明数据库
    24.     Mysql mysql;
    25.     SQLiteDatabase db;
    26.     @Override
    27.     protected void onCreate(Bundle savedInstanceState) {
    28.         super.onCreate(savedInstanceState);
    29.         setContentView(R.layout.activity_login);
    30.         //找到当且xml文件内的控件ID
    31.         //数据编辑框的ID
    32.         user_name = this.findViewById(R.id.user_name);
    33.         user_password = this.findViewById(R.id.user_password);
    34.         //按键属性的ID
    35.         denglu = this.findViewById(R.id.denglu);
    36.         zhuce = this.findViewById(R.id.zhuce);
    37.  
    38.         //取出数据库内的数据
    39.         mysql = new Mysql(this,"Userinfo",null,1);
    40.         db = mysql.getReadableDatabase();
    41.         //登录按键按下之后处理的事情
    42.         denglu.setOnClickListener(new View.OnClickListener() {
    43.             @Override
    44.             public void onClick(View view) {
    45.                 //需要获取的输入的用户名和密码
    46.                 String storage_username = user_name.getText().toString();//用户控件.得到数据.转换为字符串；
    47.                 String storage_userpassword = user_password.getText().toString();//用户控件.得到数据.转换为字符串；
    48.  
    49.                 //查询用户名和密码相同的数据
    50.                 Cursor cursor = db.query("logins",new String[]{"usname","uspwd"}," usname=? and uspwd=?",
    51.                         new String[]{storage_username,storage_userpassword},null,null,null);
    52.                 int flag = cursor.getCount(); //查询出来的记录项的条数，若没有该用户则为0条
    53.                 //登录成功后响应的数据
    54.                 if (flag!=0){
    55.                     Toast.makeText(getApplicationContext(), "登录成功！", Toast.LENGTH_SHORT).show();//显示登录成功的弹窗，简单写法
    56.                     Intent intent = null;  //这个变量初始申明为空
    57.                     intent = new Intent(LoginActivity.this, MainActivity.class);
    58.                     startActivity(intent);
    59.                 }
    60.                 else {
    61.                     //假设正确的账号和密码分别是（VIP账号，没有写入数据库，无需注册账号）
    62.                     if (storage_username.equals("DPT") && storage_userpassword.equals("123456")) {
    63.                         //如果正确
    64.                         Toast.makeText(getApplicationContext(), "超级VIP登录成功！", Toast.LENGTH_SHORT).show();//显示登录成功的弹窗，简单写法
    65.                         Intent intent = null;  //这个变量初始申明为空
    66.                         intent = new Intent(LoginActivity.this, MainActivity.class);
    67.                         startActivity(intent);
    68.                     }
    69.                     else{
    70.                         Toast.makeText(getApplicationContext(), "用户名输入错误或密码不正确，请重新登录！", Toast.LENGTH_SHORT).show();//获取显示的内容
    71.                     }
    72.                 }
    73.  
    74.             }
    75.         });
    76.         //注册按键按下之后，响应的事件
    77.         zhuce.setOnClickListener(new View.OnClickListener() {
    78.             @Override
    79.             public void onClick(View view) {
    80.                 //实现界面跳转，从登录界面跳转到注册界面
    81.                 Intent intent = null;  //这个变量初始申明为空
    82.                 intent = new Intent(LoginActivity.this, RegisterActivity.class);//跳转界面
    83.                 startActivity(intent);
    84.             }
    85.         });
    86.     }
    87. }

    LoginActivity.java文件替换后的界面

    6、设置APP初始界面

    第一步、更改manifests文件夹下AndroidManifest.xml，如下

    第二步、设置APP图标和名称

     第三步、AndroidManifest.xml代码

    1. "1.0" encoding="utf-8"?>
    2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:tools="http://schemas.android.com/tools"
    4.     package="com.example.myapplication">
    5.  
    6.     <application
    7.         android:allowBackup="true"
    8.         android:icon="@mipmap/box"
    9.         android:label="智能药箱"
    10.         android:roundIcon="@mipmap/ic_launcher_round"
    11.         android:supportsRtl="true"
    12.         android:theme="@style/AppTheme"
    13.         tools:ignore="GoogleAppIndexingWarning">
    14.         <activity android:name=".RegisterActivity"/>
    15.         <activity android:name=".LoginActivity" >
    16.             <intent-filter>
    17.                 <action android:name="android.intent.action.MAIN" />
    18.  
    19.                 <category android:name="android.intent.category.LAUNCHER" />
    20.             intent-filter>
    21.         activity>
    22.         <activity android:name=".MainActivity">
    23.  
    24.         activity>
    25.     application>
    26.  
    27. manifest>

    7、连接手机，编译工程

    第一步、小米手机打开开发者模式，允许USB调试，允许USB安装。

    第二步、编译工程

    第三部分、总结

    1、参考资料

            我在实现这个功能的过程中也参考了很多篇博客，最推荐大家看的就是这一篇：

    (9条消息) Android studio 编写一个登录页面，并且具有注册功能_东尃的博客-CSDN博客_android studio登录注册界面实现

            然后关于寻找手机APP图标的网址：iconfont-阿里巴巴矢量图标库

            关于Android Studio开发过程中配色：网页设计常用色彩搭配表 | 网页配色表

    2、完整工程和代码

            这是博主的完整的代码，可以直接下载，但是你是不是要关注点赞收藏，然后再下载？👍👍👍我的APP工程

            有问题的小伙伴欢迎进Q群交流：1020775171

  • 相关阅读:
    别乱用了！文件写入的6种方法
    【Unity ShaderGraph】| 快速制作一个 钛金化不锈钢效果
    「Spring」Boot Docker 认证指南（上）
    链上物理资产「规模化」或将推动产业协作互联网迎来爆发
    B - Dungeon Master
    Spring Data JPA 中的分页和排序
    离子液体修饰的纳米金光学探针，荧光量子点
    Mysql多表练习题30道
    Delphi中关于PChar、Char数组、string[](ShortString)及结构体长度及占用空间的一些特性说明和测试
    常用 Git 命令
  • 原文地址：https://blog.csdn.net/Learning1232/article/details/127634795