安卓基礎練習 02 |登錄註冊

寫在前面的話

1、參考自網絡。
2、內容如果有不對的，希望可以指出或補充。
3、任務練習。

一、文件準備

總體要求：完成相應的頁面跳轉和點擊事件。

如下。

二、登錄界面

1、佈局設計

① 登錄界面（layout文件夾下的login_activity.xml），編寫如下。

<?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:background="@mipmap/bg2"
    android:gravity="center"
    android:orientation="vertical"
    >
    <!--用戶部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用戶："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/edt_username"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:hint="請輸入用戶名"
            android:textSize="20sp"
            android:background="@color/white"

            />
    </LinearLayout>
    <!--密碼部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密碼："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/edt_password"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:hint="請輸入密碼"
            android:textSize="20sp"
            android:background="@color/white"
            android:inputType="textPassword"/>
    </LinearLayout>
    <!--按鈕部分-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:gravity="center"
        >
        <Button
            android:id="@+id/btn_login"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登錄"
            android:textSize="20sp"
            android:layout_marginRight="25dp"
            android:backgroundTint="#30ffffff"/>
        <Button
            android:id="@+id/btn_cancel_login"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:textSize="20sp"
            android:backgroundTint="#30ffffff"/>
    </LinearLayout>

</LinearLayout>

② 展示如下。

2、登錄窗口

① 在com.example.tasktwo包下的LoginActivity.java裏，編寫如下。

package com.example.tasktwo;

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

import androidx.appcompat.app.AppCompatActivity;

public class LoginActivity extends AppCompatActivity {
   
   
    //聲明控件變量
    private EditText edtName, edtPwd;
    private Button btnLogin, btnCancel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
   
        super.onCreate(savedInstanceState);
        //加載登錄佈局頁面
        setContentView(R.layout.login_activity);
        //獲取相應控件
        edtName = findViewById(R.id.edt_username);
        edtPwd = findViewById(R.id.edt_password);
        btnLogin = findViewById(R.id.btn_login);
        btnCancel = findViewById(R.id.btn_cancel_login);
        ///登錄事件
        btnLogin.setOnClickListener(new View.OnClickListener(){
   
   
            @Override
            public void onClick(View v) {
   
   
                String name = edtName.getText().toString().trim();
                String pwd = edtPwd.getText().toString().trim();

                if(name.equals("admin") && pwd.equals("admin")){
   
   
                    // Toast.LENGTH_SHORT大概顯示時間爲1秒，Toast.LENGTH_LONG大概顯示時間爲3秒
                    Toast.makeText(LoginActivity.this,"恭喜，用戶名與密碼正確！",
                            Toast.LENGTH_SHORT).show();


                    Intent intent_l = new Intent(LoginActivity.this,LoginMessage.class);
                    //封裝數據
                    Bundle usrData =new Bundle();
                    usrData.putString("l_name",name);
                    //攜帶數據包
                    intent_l.putExtras(usrData);
                    //啓動目標組件
                    startActivity(intent_l);

                }else{
   
   
                    Toast.makeText(LoginActivity.this,"遺憾，用戶名或密碼錯誤！請重新輸入",
                            Toast.LENGTH_SHORT).show();
                }
            }
        });
        //取消事件，也就是關閉當前界面
        btnCancel.setOnClickListener(new View.OnClickListener(){
   
   
            @Override
            public void onClick(View v) {
   
   
                finish();
            }
        });
    }
}

3、登錄信息展示界面

4、登錄信息展示窗口

在LoginMessage.java裏，編寫如下。

package com.example.tasktwo;

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

import androidx.appcompat.app.AppCompatActivity;

public class LoginMessage extends AppCompatActivity {
   
   
    private Button btnBack_l;
    private TextView message_test_l;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login_message);

        //獲取相應控件
        btnBack_l = findViewById(R.id.message_btn_back_l);
        message_test_l = findViewById(R.id.message_test_login);

        //獲取跳轉的意圖對象
        Intent intent_l = getIntent();
        if(intent_l != null){
   
   
            //獲取意圖攜帶的數據包
            Bundle usrData = intent_l.getExtras();
            String l_name = usrData.getString("l_name");

            message_test_l.setText("歡迎您："+l_name);
        }

        btnBack_l.setOnClickListener(new View.OnClickListener(){
   
   
            @Override
            public void onClick(View v) {
   
   
                finish();
            }
        });
    }
}

三、註冊界面

與登錄界面做法同理。

1、佈局設計

① 登錄界面（layout文件夾下的register_activity.xml），編寫如下。

<?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:background="@mipmap/bg2"
    android:gravity="center"
    android:orientation="vertical"
    >
    <!--姓名部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="姓名："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/reg_name"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:hint=""
            android:textSize="20sp"
            android:background="@color/white"/>
    </LinearLayout>
    <!--性別部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="性別："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/reg_sex"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textSize="20sp"
            android:background="@color/white"
            />
    </LinearLayout>
    <!--年齡部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="年齡："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/reg_age"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textSize="20sp"
            android:background="@color/white"
            />
    </LinearLayout>
    <!--電話部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="電話："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/reg_phone"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textSize="20sp"
            android:background="@color/white"
            />
    </LinearLayout>
    <!--郵箱-部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="郵箱："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/reg_email"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textSize="20sp"
            android:background="@color/white"
            />
    </LinearLayout>
    <!--主頁部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="主頁："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/reg_sheet"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textSize="20sp"
            android:background="@color/white"
            />
    </LinearLayout>
    <!--備註部分-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="備註："
            android:textSize="30sp"
            android:textColor="@color/white"/>
        <EditText
            android:id="@+id/reg_remarks"

            android:layout_width="200dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:textSize="20sp"
            android:background="@color/white"
            />
    </LinearLayout>
    <!--按鈕部分-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="30dp"
        android:gravity="center"
        >
        <Button
            android:id="@+id/btn_register"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="註冊"
            android:textSize="20sp"
            android:layout_marginRight="30dp"
            android:backgroundTint="#30ffffff"/>
        <Button
            android:id="@+id/btn_cancel_register"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:textSize="20sp"
            android:backgroundTint="#30ffffff"/>
    </LinearLayout>

</LinearLayout>

② 展示如下。

2、註冊窗口

在RegisterActivity.java裏，編寫如下。

package com.example.tasktwo;

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

import androidx.appcompat.app.AppCompatActivity;


public class RegisterActivity extends AppCompatActivity {
   
   
    private EditText edtName, edtSex, edtAge, edtPhone, edtEmail, edtSheet, edtRemarks;
    private Button btnRegister, btnCancel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
   
        super.onCreate(savedInstanceState);
        //加載註冊顯示佈局頁面
        setContentView(R.layout.register_activity);
        //獲取相應控件
        edtName = findViewById(R.id.reg_name);
        edtSex = findViewById(R.id.reg_sex);
        edtAge = findViewById(R.id.reg_age);
        edtPhone = findViewById(R.id.reg_phone);
        edtEmail = findViewById(R.id.reg_email);
        edtSheet = findViewById(R.id.reg_sheet);
        edtRemarks = findViewById(R.id.reg_remarks);
        btnRegister = findViewById(R.id.btn_register);
        btnCancel = findViewById(R.id.btn_cancel_register);
        ///註冊事件
        btnRegister.setOnClickListener(new View.OnClickListener(){
   
   
            @Override
            public void onClick(View v) {
   
   
                //.trim()去除字符串的頭尾空格
                String name = edtName.getText().toString().trim();
                String sex = edtSex.getText().toString().trim();
                String age = edtAge.getText().toString().trim();
                String phone = edtPhone.getText().toString().trim();
                String email = edtEmail.getText().toString().trim();
                String sheet = edtSheet.getText().toString().trim();
                String remarks = edtRemarks.getText().toString().trim();

                Intent intent = new Intent(RegisterActivity.this,RegisterMessage.class);
                //封裝數據
                Bundle data =new Bundle();
                data.putString("r_name",name);
                data.putString("r_sex",sex);
                data.putString("r_age",age);
                data.putString("r_phone",phone);
                data.putString("r_email",email);
                data.putString("r_sheet",sheet);
                data.putString("r_remarks",remarks);
                //攜帶數據包
                intent.putExtras(data);
                //啓動目標組件
                startActivity(intent);
            }
        });

        //取消事件
        btnCancel.setOnClickListener(new View.OnClickListener(){
   
   
            @Override
            public void onClick(View v) {
   
   
                finish();
            }
        });
    }

}

3、註冊信息展示界面

4、註冊信息展示窗口

在RegisterMessage.java裏，編寫如下。

package com.example.tasktwo;

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

import androidx.appcompat.app.AppCompatActivity;

public class RegisterMessage extends AppCompatActivity {
   
   
    private Button btnBack;
    private TextView message_test;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.register_message);
        //獲取相應控件
        btnBack = findViewById(R.id.message_btn_back);
        message_test = findViewById(R.id.message_test);

        //獲取跳轉的意圖對象
        Intent intent = getIntent();
        if(intent != null){
   
   
            //獲取意圖攜帶的數據包
            Bundle data = intent.getExtras();
            String r_name = data.getString("r_name");
            String r_sex = data.getString("r_sex");
            String r_age = data.getString("r_age");
            String r_phone = data.getString("r_phone");
            String r_email = data.getString("r_email");
            String r_sheet = data.getString("r_sheet");
            String r_remarks = data.getString("r_remarks");

            String message="姓名："+r_name
            +"\n性別："+r_sex
            +"\n年齡："+r_age
            +"\n電話："+r_phone
            +"\n郵箱："+r_email
            +"\n主頁："+r_sheet
            +"\n備註："+r_remarks;
            message_test.setText(message);
        }

        btnBack.setOnClickListener(new View.OnClickListener(){
   
   
            @Override
            public void onClick(View v) {
   
   
                finish();
            }
        });
    }
}

四、主界面

1、在AndroidManifest.xml（項目清單）文件裏面添加如下聲明。

2、主佈局

設計一個簡單的包含有登錄以及註冊按鈕的主頁面，如下。

注：在這個版本里面（Android Studio4.1.1）使用background設置顏色沒有效果，只好用backgroundTint（背景顏色渲染）了。

3、主窗口

在MainActivity.java裏，編寫如下。

package com.example.tasktwo;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {
   
   

    private Button btnLogin,btnRegister;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
   
        super.onCreate(savedInstanceState);
        //加載主界面
        setContentView(R.layout.activity_main);
        //獲取相應控件
        btnLogin = findViewById(R.id.btn_login_main);
        btnRegister = findViewById(R.id.btn_register_main);

        //轉到登錄界面
        btnLogin.setOnClickListener(new View.OnClickListener(){
   
   

            @Override
            public void onClick(View v) {
   
   
                Intent intent= new Intent(MainActivity.this, LoginActivity.class);
                //啓動activity
                startActivity(intent);
            }
        });

        //轉到註冊界面
        btnRegister.setOnClickListener(new View.OnClickListener(){
   
   

            @Override
            public void onClick(View v) {
   
   
                Intent intent= new Intent(MainActivity.this, RegisterActivity.class);
                //啓動activity
                startActivity(intent);
            }
        });

    }

}

五、效果展示

運行結果如下。

六、補充

1、android xml 設置半透明

2、Android中的EditText的一些常用屬性設置

3、Android意圖(intent)：是一個要執行的操作的抽象描述。主要用來啓動activity或者service(並攜帶需要傳遞的參數信息)，可理解成activity之間的粘合劑。