Android Studio製作簡單登錄界面

Android Studio製作簡單登錄界面應用線性佈局設計登錄界面，要求點擊輸入學號時彈出數字鍵盤界面，點擊輸入密碼時彈出字母鍵盤，出現的文字、數字、尺寸等全部在values文件夾下相應.xml文件中設置好，使用時直接引用。當用戶名或密碼為空，顯示一個提示信息“用戶名與密碼不能為空！”，當用戶名... ...

實現目標

應用線性佈局設計登錄界面，要求點擊輸入學號時彈出數字鍵盤界面，點擊輸入密碼時彈出字母鍵盤，出現的文字、數字、尺寸等全部在values文件夾下相應.xml文件中設置好，使用時直接引用。當用戶名或密碼為空，顯示一個提示信息“用戶名與密碼不能為空！”，當用戶名和密碼匹配，顯示“登錄成功”。

效果圖如下：

實現過程

新建項目

新建一個項目如圖所示：

UI設計

1.新建login.xml，選擇線性佈局

步驟如下：

設計登錄頁面

LinearLayout是線性佈局，佈局中的組件按照垂直或者水平方向進行排列

gravity：設置自身內部元素的對齊方式

layout_gravity：用來控制該控制項在包含該控制項的父控制項中的位置

本設計採用垂直線性佈局，如圖所示：

控制項類型: EditText 是一個允許用戶輸入和編輯文本的控制項。

android:id: 這個屬性為控制項設置了一個唯一的ID（@+id/ed2），使得開發者可以在Java中通過這個ID來引用這個控制項。

android:layout_width 和 android:layout_height: 這些屬性定義了控制項的寬度和高度。531dp 指定了寬度為531設備獨立像素，wrap_content 表示高度會根據內容的大小自動調整。

實現代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/login"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="25dp"
    android:background="@color/white"
    tools:context="com.example.myapplication1.LoginActivity"
    android:orientation="vertical"
    android:weightSum="1">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login_page_title"
        android:textSize="@dimen/text_size_large"
        android:textColor="@android:color/black"
        android:layout_gravity="center_horizontal"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="0.55">
        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
                android:layout_width="@dimen/label_width"
                android:layout_height="wrap_content"
                android:text="@string/student_id_label"
                android:textSize="@dimen/text_size_medium"
                android:textColor="@android:color/black"/>

            <EditText
                android:id="@+id/ed1"
                android:layout_width="531dp"
                android:layout_height="wrap_content"
                android:minHeight="48dp"
                android:padding="12dp"
                android:hint="@string/student_id_hint"
                android:inputType="number"
                android:textColor="@color/black"
                android:textColorHint="@android:color/darker_gray"
                android:visibility="visible" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
                android:layout_width="@dimen/label_width"
                android:layout_height="wrap_content"
                android:text="@string/password_label"
                android:textSize="@dimen/text_size_medium"
                android:textColor="@android:color/black"/>
            <EditText
                android:id="@+id/ed2"
                android:layout_width="531dp"
                android:layout_height="wrap_content"
                android:minHeight="48dp"
                android:padding="12dp"
                android:hint="@string/password_hint"
                android:inputType="text"
                android:textColor="@color/black"
                android:textColorHint="@android:color/darker_gray"
                android:visibility="visible" />
        </LinearLayout>
    </LinearLayout>

    <Button
        android:layout_width="@dimen/login_button_width"
        android:layout_height="wrap_content"
        android:text="@string/login_button_text"
        android:textSize="@dimen/text_size_button"
        android:id="@+id/bt"
        android:layout_gravity="center_horizontal" />
        
</LinearLayout>

2.將文本、數字和尺寸等資源從佈局文件中移動到values文件夾下的相應.xml文件中並引用，需要按照以下步驟操作：

文本（字元串）資源：在values文件夾下的strings.xml文件中定義。

尺寸資源：在values文件夾下的dimens.xml文件中定義。

顏色資源：已經在colors.xml中定義，可以繼續添加新的顏色或使用已有的顏色。

具體代碼如下：

strings.xml

<resources>
    <string name="login_page_title">登錄頁面</string>
    <string name="student_id_hint">請輸入學號</string>
    <string name="password_hint">請輸入密碼</string>
    <string name="student_id_label">學號：</string>
    <string name="password_label">密碼：</string>
    <string name="login_button_text">登錄</string>
</resources>

dimens.xml

<resources>
    <dimen name="text_size_large">30dp</dimen>
    <dimen name="text_size_medium">18dp</dimen>
    <dimen name="login_button_width">285dp</dimen>
    <dimen name="login_input_width">300dp</dimen>
    <dimen name="label_width">65dp</dimen>
    <dimen name="text_size_button">20dp</dimen>
</resources>

調用

1.新建一個LoginActivity進行調用，如圖所示：

定義一個登錄界面的行為：包含兩個文本輸入框（EditText）用於輸入用戶名和密碼，以及一個按鈕（Button）用於提交登錄信息。

成員變數：

usertext 和 passtext 是EditText類型的變數，分別用於獲取用戶輸入的用戶名和密碼。

onCreate方法：

在onCreate方法中，首先調用super.onCreate(savedInstanceState)和setContentView(R.layout.activity_main)來初始化界面。

ButtonListener 類：

ButtonListener實現了View.OnClickListener介面，用於處理按鈕點擊事件。
在其onClick方法中，首先獲取usertext和passtext中的文本內容。
然後，通過一系列的條件判斷，檢查用戶名和密碼是否為空，是否匹配預設的正確用戶名（"2021"）和密碼（"abc"）。
如果用戶名或密碼為空，顯示一個提示信息“用戶名與密碼不能為空！”。
如果用戶名和密碼匹配，顯示“登錄成功”。

具體實現代碼如下：

package com.example.myapplication1;

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

import androidx.appcompat.app.AppCompatActivity;

public class LoginActivity extends AppCompatActivity {
        private EditText usertext;
        private EditText passtext;
        private Button loginbutton;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.login);
            usertext=(EditText)this.findViewById(R.id.ed1);
            passtext=(EditText)this.findViewById(R.id.ed2);
            loginbutton=(Button)this.findViewById(R.id.bt);
            loginbutton.setOnClickListener(new ButtonListener());
        }
        private class ButtonListener implements View.OnClickListener{
            @Override
            public void onClick(View v){
                String user=usertext.getText().toString();
                String pass=passtext.getText().toString();
                if (user.equals("")||pass.equals("")){
                    Toast.makeText(LoginActivity.this,"用戶名與密碼不能為空！",Toast.LENGTH_SHORT).show();
                }
                else if (user.equals("2021")&&pass.equals("abc")){
                    Toast.makeText(LoginActivity.this,"登陸成功",Toast.LENGTH_SHORT).show();
                }
                else{
                    Toast.makeText(LoginActivity.this,"用戶名或密碼輸入有誤，請更正後重新輸入！",Toast.LENGTH_SHORT).show();
                }
            }
        }
    }

配置文件

AndroidManifest.xml是整個Android應用程式的全局面描述配置文件

清單文件中通常包含以下六項信息：

聲明應用程式的包名: 用來識別應用程式的唯一標誌
描述應用程式組件
確定宿主應用組件進程
聲明應用程式擁有的許可權
定義應用程式所支持API的最低等級
列舉應用程式必須鏈接的庫

添加LoginActivity到 AndroidManifest.xml中

具體代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat"
        tools:targetApi="31">
        <activity
            android:name=".LoginActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.AppCompat">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

總結

以上就是簡單的登錄界面的設計的所有內容，簡單介紹了線性佈局以及相應屬性的應用。

如果這篇文章對你或你的朋友有幫助的話，請多多支持和分享，讓更多的人受益。同時，如果你有任何問題或疑問，也歡迎在下方留言，我會儘快回覆並幫助你解決問題。讓我們一起共同進步，共同學習！