Android——实现登录和注册功能

前言

自学Android有段时间了，觉得是时候尝试写一些小demo尝试一下。这次尝试写了一个登录注册功能，大概涉及以下几个知识点：使用LitePal操作数据库、颜色渐变、嵌套布局。其他的皆是比较正常的知识。话不多说，进入正题。

正文

UI界面

登录

先来说说登录界面的实现。
在布局上最外层我使用了LinearLayout，这也是我在布局中使用最多也是最熟悉的布局，所以我首选这个，比较方便，里面我嵌套了两个LinearLayout和一个RelativeLayout。算是比较简单吧，也是经过我多次尝试之后选出的最佳方案。上面有的东西就是平常大家常见的功能，头像显示，记住密码忘记密码这些东西，我还特意加了三个其他登陆方式，当然这个没有实现，知识UI上有而已，不过后续完善的时候可以实现。同样的记住密码和忘记密码功能我也没来得及实现。最近比较忙，还要上其他课。话不多说给大家放出登陆界面代码。可结合效果图进行参考。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/background_gradient">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">

    <ImageView
        android:id="@+id/lg_userIcon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:scaleType="fitCenter"
        android:src="@drawable/headportrait"/>

    <EditText
        android:id="@+id/lg_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lg_userIcon"
        android:layout_marginTop="30dp"
        android:drawableLeft="@drawable/user"
        android:theme="@style/myedittext_color"
        android:drawablePadding="5dp"
        android:hint="账号"
        android:maxLines="1"/>

    <EditText
        android:id="@+id/lg_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lg_username"
        android:layout_marginTop="10dp"
        android:theme="@style/myedittext_color"
        android:drawableLeft="@drawable/psd"
        android:drawablePadding="5dp"
        android:hint="密码"
        android:maxLines="1"
        android:inputType="textPassword"/>

    <LinearLayout
        android:id="@+id/ly"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lg_password">

        <CheckBox
            android:id="@+id/lg_rememberPsd"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:text="记住密码"
            android:theme="@style/cb_color"
            android:textColor="#1E90FF"/>

        <TextView
            android:id="@+id/lg_forgetPsd"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="忘记密码"
            android:textColor="#1E90FF"/>

    </LinearLayout>

    <Button
        android:id="@+id/lg_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ly"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="登录"
        android:textSize="18sp"
        android:textColor="#FFFFFF"
        android:background="#1E90FF	"/>


    </RelativeLayout>

    <TextView
        android:id="@+id/lg_register"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:layout_gravity="right"
        android:layout_marginRight="20dp"
        android:text="没有账号？立即注册"
        android:textColor="#1E90FF"/>

    <TextView
        android:id="@+id/lg_other"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="其他登录方式"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:layout_gravity="center_horizontal"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="15dp">

        <ImageView
            android:id="@+id/lg_qq"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/qq"
            android:layout_marginRight="15dp"/>

        <ImageView
            android:id="@+id/lg_wechat"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/wechat"/>

        <ImageView
            android:id="@+id/lg_weibo"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/weibo"
            android:layout_marginLeft="15dp"/>
    </LinearLayout>

</LinearLayout>

注册

注册界面实现和登录界面大同小异，这里就直接给出代码和效果图。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_register">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:background="@color/colorWhite">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="40dp"
            android:layout_marginLeft="40dp"
            android:layout_marginRight="40dp"
            android:layout_marginBottom="40dp">


            <EditText
                android:id="@+id/re_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/myedittext_color"
                android:drawableLeft="@drawable/user"
                android:drawablePadding="5dp"
                android:hint="请输入账号"
                android:maxLines="1"/>

            <EditText
                android:id="@+id/re_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:theme="@style/myedittext_color"
                android:drawableLeft="@drawable/psd"
                android:drawablePadding="5dp"
                android:hint="请输入密码"
                android:maxLines="1"
                android:inputType="textPassword"/>

            <EditText
                android:id="@+id/re_affirm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:theme="@style/myedittext_color"
                android:drawableLeft="@drawable/psd"
                android:drawablePadding="5dp"
                android:hint="请确认密码"
                android:maxLines="1"
                android:inputType="textPassword"/>

            <Button
                android:id="@+id/re_register"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="40dp"
                android:text="注册"
                android:textSize="18sp"
                android:textColor="@color/colorWhite"
                android:background="@color/colorBlue"/>
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

注册功能的实现

注册功能其实非常简单，给注册按钮添加点击事件方法，在方法中获取EditText中输入的数据。然后进行两次密码的比较，如果一样则进行账号密码的存储并返回账号自动填充，然后销毁当前Activity，代码如下。

public class Register extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);

        Button re_register = findViewById(R.id.re_register);
        re_register.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                EditText username = findViewById(R.id.re_username);
                EditText password = findViewById(R.id.re_password);
                EditText passwordAffirm = findViewById(R.id.re_affirm);
                String inputUsername = username.getText().toString();
                String inputPassword = password.getText().toString();
                String inputAffirm = passwordAffirm.getText().toString();
                UserData user = new UserData();
                if (inputAffirm.equals(inputPassword)) {
                    //存储账号密码
                    user.setUsername(inputUsername);
                    user.setPassword(inputPassword);
                    user.save();
                    //传回账号
                    Intent intent = new Intent();
                    intent.putExtra("username", inputUsername);
                    setResult(RESULT_OK, intent);
                    finish();
                } else {
                    Toast.makeText(Register.this,"两次密码不一致", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

登录功能实现

从注册界面那里返回的账号自动进行填充，然后只需要用户填充密码即可进行登录，就不多赘述，代码如下。

public class MainActivity extends AppCompatActivity {



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //创建数据库
        Connector.getDatabase();
        TextView register = findViewById(R.id.lg_register);
        register.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, Register.class);
                startActivityForResult(intent, 1);
            }
        });

        //登录
        Button loginButton = findViewById(R.id.lg_login);
        loginButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                List<UserData> users = LitePal.findAll(UserData.class);
                EditText username = findViewById(R.id.lg_username);
                EditText password = findViewById(R.id.lg_password);

                //账号密码匹配
                for (UserData user : users) {
                    if (user.getUsername().equals(username.getText().toString()) && user.getPassword().equals(password.getText().toString())) {
                        Intent intent = new Intent(MainActivity.this, HomeActivity.class);
                        startActivity(intent);
                        onDestroy();
                    } else {
                        Toast.makeText(MainActivity.this,"账号或密码错误！",Toast.LENGTH_SHORT).show();
                    }
                }
            }
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    //接受传回来的账号
    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        switch (requestCode) {
            case 1:
                if (resultCode == RESULT_OK) {
                    final EditText loginUsername = findViewById(R.id.lg_username);
                    String returnUsername = data.getStringExtra("username");
                    loginUsername.setText(returnUsername);
                    loginUsername.setSelection(returnUsername.length());
                }
                break;
            default:
        }
    }

}

这里之所以可以接受注册界面传回来的账号，是因为在启动实现注册功能的Activity时用到了startActivityForResult()方法，startActivityForResult()接受两个参数，第一个参数还是Intent，第二个参数是一个请求码。用于在之后的回调中判断数据的来源。由于我们使用的是startActivityForResult()方法来启动注册Activity，在销毁活动之后会回调上一个活动的onActivityResult()方法，因此需要在登录Activity中重写这个方法来得到返回的账号。
其中还使用到了其他功能，一一讲解如下。

数据库功能实现

数据库功能的使用过于繁杂，在这里详细讲解的话有点喧宾夺主，这里请参考我的另外一篇博文，博文中使用的代码就是基于本次登陆注册功能实现的。点击跳转

背景颜色渐变

在登录和注册中我都使用了渐变的背景，因为最近学到了，干脆直接拿来使用。首先在drawable下新建两个xml，一个用于登陆界面使用，一个用于注册界面使用，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 登录背景渐变 -->
    <gradient
        android:startColor="@color/colorLightcyan"
        android:endColor="@color/colorAliceblue"
        android:angle="270"
        />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 注册背景渐变 -->
    <gradient
        android:startColor="@color/colorBlue"
        android:endColor="@color/colorDeepskyblue"
        android:angle="0"
        />
</shape>

startColor为开始渐变颜色，endColor为结束渐变颜色，angle是渐变的角度。这里可以自行调试。然后就可以直接使用android:background="@drawable/background_gradient"进行添加。
所有内容都讲解完毕了，这其中有很多不足，希望各位大神看到可以指点一二。