安卓登錄注冊界面開發(附源碼)

源碼下載和博客訪問：安卓登錄注冊界面開發(附源碼)

前言

最近找安卓登錄注冊界面，找了好久也沒找到比較滿意的設計，最后想想其實登錄和注冊兩個界面也不復雜，干脆花點時間自己弄。

界面預覽

最后的效果如下：

界面開發

安卓靜態布局使用XML語言描述，采用布局+控件的方式實現。

首先創建編輯框和按鈕的樣式文件，避免大量的重復代碼，這樣可以使用一行代碼引用該樣式。

編輯框樣式：

在"app/res/drawable"文件夾下新建xml文件“translucent_edit.xml”

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#DCDCDC" />
    <stroke android:width="1dip" android:color="#fefefe" />
    <corners android:radius="20dp"/>
    <padding android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

按鈕樣式：

在"app/res/drawable"文件夾下新建xml文件“translucent_button.xml”

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#4682B4" />
    <stroke android:width="1dip" android:color="#fefefe" />
    <corners android:radius="20dp"/>
    <padding android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"/>
</shape>

這兩個樣式文件都是實現圓角和顏色效果，接下來就是登錄和注冊界面。

登錄和注冊界面兩個界面的元素都是Logo、標題、編輯框和按鈕四個，區別僅僅是數量不同。兩個界面均采用線性布局嵌套的方式布局，並將屬性“orientation”設置為"vertical"，每一行均使用一個線性布局。

登錄界面：

在"app/res/layout"文件夾下新建xml文件“activity_main.xml”

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--使用線性布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#F5F5F5">

        <!--Logo-->
        <ImageView
            android:id="@+id/LogoImage"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_marginTop="100dp"
            android:src="@drawable/logo"/>

        <!--標題-->
        <TextView
            android:id="@+id/TitleText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="25dp"
            android:text="愛零食•登錄"
            android:gravity="center"
            android:textStyle="italic"
            android:textColor="#808080"
            android:textSize="30dp" />

        <!--嵌套線性布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/UserNameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <!--用戶名輸入-->
                <EditText
                    android:id="@+id/UserNameEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="15dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="輸入用戶名"
                    android:textSize="24dp"
                    android:singleLine="true" />

            </LinearLayout>

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/PassWordLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <!--密碼輸入-->
                <EditText
                    android:id="@+id/PassWordEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="15dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="輸入用戶密碼"
                    android:textSize="24dp"
                    android:maxLength="16"
                    android:singleLine="true"
                    android:inputType="textPassword" />

            </LinearLayout>

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/LayoutButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--登錄按鈕-->
                <Button
                    android:id="@+id/LoginButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:textColor="@color/white"
                    android:background="@drawable/translucent_button"
                    android:text="登   錄"
                    android:textSize="24dp" />

                <!--注冊按鈕-->
                <Button
                    android:id="@+id/SignUpButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:textColor="@color/white"
                    android:background="@drawable/translucent_button"
                    android:text="注   冊"
                    android:textSize="24dp" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

注冊界面：

在"app/res/layout"文件夾下新建xml文件“activity_sign_up.xml”

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SignUpActivity">

    <!--使用線性布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#F5F5F5">

        <!--Logo-->
        <ImageView
            android:id="@+id/LogoImage"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_marginTop="50dp"
            android:src="@drawable/logo"/>

        <!--標題-->
        <TextView
            android:id="@+id/TitleText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="愛零食•注冊"
            android:gravity="center"
            android:textStyle="italic"
            android:textColor="#808080"
            android:textSize="30dp" />

        <!--嵌套線性布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/UserNameLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <!--用戶名輸入-->
                <EditText
                    android:id="@+id/UserNameEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="輸入用戶名"
                    android:textSize="24dp"
                    android:singleLine="true" />

            </LinearLayout>

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/PassWordLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--密碼輸入-->
                <EditText
                    android:id="@+id/PassWordEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="輸入密碼"
                    android:textSize="24dp"
                    android:maxLength="16"
                    android:singleLine="true"
                    android:inputType="textPassword" />

            </LinearLayout>

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/PasswordAgainLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--二次密碼輸入-->
                <EditText
                    android:id="@+id/PassWordAgainEdit"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="再次輸入密碼"
                    android:maxLength="16"
                    android:textSize="24dp"
                    android:singleLine="true"
                    android:inputType="textPassword" />

            </LinearLayout>

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/EmailLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--郵箱輸入-->
                <EditText
                    android:id="@+id/EmailEdit"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="10dp"
                    android:background="@drawable/translucent_edit"
                    android:hint="輸入郵箱地址"
                    android:textSize="24dp"
                    android:maxLength="16"
                    android:singleLine="true" />

            </LinearLayout>

            <!--嵌套線性布局-->
            <LinearLayout
                android:id="@+id/ButtonLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <!--立即注冊按鈕-->
                <Button
                    android:id="@+id/SignUpButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:background="@drawable/translucent_button"
                    android:text="立即注冊"
                    android:textColor="@color/white"
                    android:textSize="24dp" />

                <!--返回登錄按鈕-->
                <Button
                    android:id="@+id/BackLoginButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="15dp"
                    android:layout_margin="15dp"
                    android:layout_weight="1"
                    android:textColor="@color/white"
                    android:background="@drawable/translucent_button"
                    android:text="返回登錄"
                    android:textSize="24dp" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

如果按鈕顯示為紫色，解決方法參考Android Studio設置Button樣式無效(為默認藍紫色)。

可以看到兩個界面布局並不復雜，美觀性也算合格，接下來實現兩個界面交互就行了。

界面交互

完成界面交互需要實現的功能：

1.登錄界面點擊“注冊”按鈕會跳轉到注冊界面

2.注冊界面填寫完信息后點擊“立即注冊”按鈕會跳轉到登錄界面

3.注冊界面點擊“返回登錄”按鈕會跳轉到登錄界面

可選的附加功能：

1.檢查輸入的用戶名和密碼與預設的是否匹配

2.檢查注冊的信息基本格式是否正確

接下來實現上述功能。

登錄界面的Activity類：

在"app/java/項目包名"目錄下新建Class"MainActivity"

package 項目包名;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;


public class MainActivity extends Activity {
    // 調用Actvity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 關聯activity.xml
        setContentView(R.layout.activity_main);
        // 關聯用戶名、密碼和登錄、注冊按鈕
        EditText userName = (EditText) this.findViewById(R.id.UserNameEdit);
        EditText passWord = (EditText) this.findViewById(R.id.PassWordEdit);
        Button loginButton = (Button) this.findViewById(R.id.LoginButton);
        Button signUpButton = (Button) this.findViewById(R.id.SignUpButton);
        // 登錄按鈕監聽器
        loginButton.setOnClickListener(
                new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 獲取用戶名和密碼
                        String strUserName = userName.getText().toString().trim();
                        String strPassWord = passWord.getText().toString().trim();
                        // 判斷如果用戶名為"123456"密碼為"123456"則登錄成功
                        if (strUserName.equals("123456") && strPassWord.equals("123456")) {
                            Toast.makeText(MainActivity.this, "登錄成功！", Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(MainActivity.this, "請輸入正確的用戶名或密碼！", Toast.LENGTH_SHORT).show();
                        }
                    }
                }
        );
        // 注冊按鈕監聽器
        signUpButton.setOnClickListener(
                new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 跳轉到注冊界面
                        Intent intent = new Intent(MainActivity.this, SignUpActivity.class);
                        startActivity(intent);
                    }
                }
        );

    }
}

其中的“項目包名”需要替換為自己的項目包名。

注冊界面Activity類：

在"app/java/項目包名"目錄下新建Class"SignUpActivity"

package 項目包名;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class SignUpActivity extends Activity {
    // 調用Actvity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //關聯activity_register.xml
        setContentView(R.layout.activity_sign_up);
        // 關聯用戶名、密碼、確認密碼、郵箱和注冊、返回登錄按鈕
        EditText userName = (EditText) this.findViewById(R.id.UserNameEdit);
        EditText passWord = (EditText) this.findViewById(R.id.PassWordEdit);
        EditText passWordAgain = (EditText) this.findViewById(R.id.PassWordAgainEdit);
        EditText email = (EditText) this.findViewById(R.id.EmailEdit);
        Button signUpButton = (Button) this.findViewById(R.id.SignUpButton);
        Button backLoginButton = (Button) this.findViewById(R.id.BackLoginButton);

        // 立即注冊按鈕監聽器
        signUpButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        String strUserName = userName.getText().toString().trim();
                        String strPassWord = passWord.getText().toString().trim();
                        String strPassWordAgain = passWordAgain.getText().toString().trim();
                        String strPhoneNumber = email.getText().toString().trim();
                        //注冊格式粗檢
                        if (strUserName.length() > 10) {
                            Toast.makeText(SignUpActivity.this, "用戶名長度必須小於10！", Toast.LENGTH_SHORT).show();
                        } else if (strUserName.length() < 4) {
                            Toast.makeText(SignUpActivity.this, "用戶名長度必須大於4！", Toast.LENGTH_SHORT).show();
                        } else if (strPassWord.length() > 16) {
                            Toast.makeText(SignUpActivity.this, "密碼長度必須小於16！", Toast.LENGTH_SHORT).show();
                        } else if (strPassWord.length() < 6) {
                            Toast.makeText(SignUpActivity.this, "密碼長度必須大於6！", Toast.LENGTH_SHORT).show();
                        } else if (!strPassWord.equals(strPassWordAgain)) {
                            Toast.makeText(SignUpActivity.this, "兩次密碼輸入不一致！", Toast.LENGTH_SHORT).show();
                        } else if (!strPhoneNumber.contains("@")) {
                            Toast.makeText(SignUpActivity.this, "郵箱格式不正確！", Toast.LENGTH_SHORT).show();
                        } else {
                            Toast.makeText(SignUpActivity.this, "注冊成功！", Toast.LENGTH_SHORT).show();
                            // 跳轉到登錄界面
                            Intent intent = new Intent(SignUpActivity.this, MainActivity.class);
                            startActivity(intent);
                        }
                    }
                }
        );
        // 返回登錄按鈕監聽器
        backLoginButton.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 跳轉到登錄界面
                        Intent intent = new Intent(SignUpActivity.this, MainActivity.class);
                        startActivity(intent);
                    }
                }
        );

    }
}

其中的“項目包名”需要替換為自己的項目包名。

最后向AndroidManifest注冊界面：

編輯"app/manifests"目錄下的"AndroidManifest.xml"

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="項目包名">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.項目名">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SignUpActivity" />
    </application>

</manifest>

其中的“項目包名”和“項目名”需要替換為自己的項目包名和項目名。

大功告成！這樣所有功能都實現了！

源碼

源碼下載和博客訪問：安卓登錄注冊界面開發(附源碼)

最后

登錄注冊界面使用到的布局和控件都比較簡單，Activity類實現的功能也很基礎，但萬丈高樓皆從平地起，有了根基，高樓只是時間問題。