Android開發學習筆記整理（4）-登錄界面

RelativeLayout佈局

RelativeLayout：相對佈局，相對於上級或者平行級控件的位置。

常見屬性

相對其他視圖

• layout_toLeftOf：指定視圖的左側
  
• layout_toRightOf：指定視圖的右側
  
• layout_above：指定視圖的上方
  
• layout_below：指定視圖的下方
  
• layout_alignLeft：指定視圖左側對齊
  
• layout_alignRight：指定視圖右側對齊
  
• layout_alignTop：指定視圖頂部對齊
  
• layout_alignBottom：指定視圖底部對齊
  

注：藍色長方形爲基準，黃色長方形爲屬性設置

相對於上級視圖

• layout_centerInParent：在上級視圖中間
• layout_centerHorizontal：在上級視圖水平方向居中
• layout_centerVertical：在上級視圖垂直方向居中
• layout_alignParentTop：與上級視圖頂部對齊
• layout_alignParentBottom：與上級視圖底部對齊
• layout_alignParentLeft：與上級視圖左邊對齊
• layout_alignParentRight：與上級視圖右邊對齊

CheckBox

主要作用：複選框

常見屬性

• checked
• button

響應事件：設置勾選狀態監聽器

• 獲取CheckBox
• 添加事件
• 執行業務邏輯

Switch

主要作用：開關按鈕

常見屬性

• textOn：右側開啓時的文本
• textOff：右側關閉時的文本

響應事件：設置勾選狀態監聽器

• 獲取CheckBox
• 添加事件
• 執行業務邏輯

RadioButton和RadioGroup

主要作用：單選框

常見屬性

• checked
• button

響應事件：設置勾選狀態監聽器

• 獲取RadioButton
• 添加事件
• 執行業務邏輯

Toast

主要作用：提示信息

用法：

Toast.makeText (彈出界面，消息，顯示時間). show() ;

Log

主要作用：打印日誌

用法：

• Log.v的調試，任何消息都會輸出
• Log.d的調試，僅輸出debug調試的意思
• Log.i的調試，一般提示性的消息information
• Log.w的調試，可以看作爲warning警告
• Log.e爲紅色，可以想到error錯誤

狀態列表圖形

• 狀態列表圖形：根據不同的狀態來採用不同的圖形表示

常用狀態

• state_pressed
• state_checked
• state_focused
• seIected

如何使用

• 創建drawable resource file
• 設置不同狀態下的圖片
• 使用

形狀圖形

形狀圖形：描述形狀定義的圖形（shape圖形）

如何使用

• 創建xml文件
• 定義節點並初始化
• 調用

常用屬性

• shape：根結點，描述樣子，取值：rectangle(矩形)、oval(橢圓)、line(線)、ring (圓環)
• corners：圓角
• solid：形狀的填充顏色，color顏色
• stroke：外表線，color、width等

代碼部分：

part1：

activity_main.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:orientation="vertical">

    <Button
        android:id="@+id/relativeParent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相對於父類視圖">
    </Button>

    <Button
        android:id="@+id/relativeOthers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相對於其他視圖">
    </Button>

    <Button
        android:id="@+id/checkboxButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="複選框">
    </Button>

    <Button
        android:id="@+id/radioButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="radioButton">
    </Button>

    <Button
        android:id="@+id/loginButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登錄界面">
    </Button>

</LinearLayout>

效果圖：

activity_relative_parent.xml

<?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">

    <!-- 注：align強於center -->
    <!-- layout_centerInParent：在上級視圖中間 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="centerInParent"
        android:textSize="20sp"
        android:background="#8A00D4"
        android:layout_centerInParent="true">
    </TextView>

    <!-- layout_centerHorizontal：在上級視圖水平方向居中 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="centerHorizontal"
        android:textSize="20sp"
        android:background="#00BCD4"
        android:layout_centerHorizontal="true">
    </TextView>

    <!-- layout_centerVertical：在上級視圖垂直方向居中 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="centerVertical"
        android:textSize="20sp"
        android:background="#6025CA"
        android:layout_centerVertical="true">
    </TextView>

    <!-- layout_alignParentTop：與上級視圖頂部對齊 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top"
        android:textSize="20sp"
        android:background="#D4D400"
        android:layout_alignParentTop="true">
    </TextView>

    <!-- layout_alignParentBottom：與上級視圖底部對齊 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom"
        android:textSize="20sp"
        android:background="#FF5722"
        android:layout_alignParentBottom="true">
    </TextView>

    <!-- layout_alignParentLeft：與上級視圖左邊對齊 (默認)-->
    <!--<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left"
        android:textSize="20sp"
        android:background="#0091D4"
        android:layout_alignParentLeft="true">
    </TextView>-->

    <!-- layout_alignParentRight：與上級視圖右邊對齊 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right"
        android:textSize="20sp"
        android:background="#43EDC6"
        android:layout_alignParentRight="true">
    </TextView>

    <!-- layout_alignParentRight與layout_centerVertical合併 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="and"
        android:textSize="20sp"
        android:background="#AA4AF8"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true">
    </TextView>

    <!-- alignParentRight與layout_alignParentBottom合併 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="and"
        android:textSize="20sp"
        android:background="#FFC107"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true">
    </TextView>

    <!-- layout_centerHorizontal與layout_alignParentBottom合併 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="and"
        android:textSize="20sp"
        android:background="#FF9800"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true">
    </TextView>

</RelativeLayout>

效果圖：

activity_relative_others.xml

<?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">

    <!--
        位置：
            layout_above：指定視圖的上方
            layout_below：指定視圖的下方
            layout_toLeftOf：指定視圖的左側
            layout_toRightOf：指定視圖的右側
        對齊方式：
            layout_alignTop：指定視圖右頂部對齊
            layout_alignBottom：指定視圖右底部對齊
            layout_alignLeft：指定視圖右側對齊
            layout_alignRight：指定視圖左側對齊
    -->

    <!-- 上方 -->
    <View
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#ED4242"
        android:layout_above="@+id/baseView">
    </View>
    <!-- 下方 -->
    <View
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#FF6C22"
        android:layout_below="@+id/baseView">
    </View>
    <!-- 左方 -->
    <View
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#FFFF22"
        android:layout_toLeftOf="@+id/baseView">
    </View>
    <!-- 右方 -->
    <View
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#61FF22"
        android:layout_toRightOf="@+id/baseView">
    </View>

    <!-- 合併 -->
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#124EBD"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/baseView"
        android:layout_centerHorizontal="true">
    </View>

    <!-- 基準View -->
    <View
        android:id="@+id/baseView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#9B3E0C59"
        android:layout_centerInParent="true">
    </View>

</RelativeLayout>

效果圖：

activity_check_box.xml

<?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">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:textColor="#000000"
        android:text="請選擇興趣愛好：">
    </TextView>

    <CheckBox
        android:id="@+id/basketball"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="打籃球"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/title">
    </CheckBox>

    <CheckBox
        android:id="@+id/football"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="踢足球"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/basketball"
        android:layout_below="@+id/title">
    </CheckBox>

    <CheckBox
        android:id="@+id/playGame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="打王者"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@+id/football"
        android:layout_below="@+id/title">
    </CheckBox>

    <Button
        android:id="@+id/submitButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="提交"
        android:layout_centerInParent="true">
    </Button>

</RelativeLayout>

效果圖：

activity_radio_button.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:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="演示RadioButton"
        android:textSize="30sp"
        android:gravity="center">
    </TextView>

    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/manRadioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="男"
            android:textSize="20sp">
        </RadioButton>
        <RadioButton
            android:id="@+id/womanRadioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="女"
            android:textSize="20sp">
        </RadioButton>
    </RadioGroup>

</LinearLayout>

效果圖：

activity_login.xml

<?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">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/logo"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp">
    </ImageView>

    <!-- 按鈕/輸入框設置的高度不低於44dp -->
    <EditText
        android:id="@+id/mobile"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:hint="請輸入手機號"
        android:layout_below="@+id/logo"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:paddingLeft="10dp"
        android:inputType="number"
        android:background="@drawable/input_shape">
    </EditText>

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:hint="請輸入密碼"
        android:inputType="textPassword"
        android:layout_below="@+id/mobile"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:paddingLeft="10dp"
        android:background="@drawable/input_shape">
    </EditText>

    <Button
        android:id="@+id/loginButton"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:text="登        錄"
        android:textSize="20sp"
        android:background="@drawable/button_state"
        android:textColor="#FFFFFF"
        android:layout_below="@+id/password"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp">
    </Button>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="註冊賬戶"
        android:background="#00FFFFFF"
        android:textColor="#55E45B"
        android:layout_below="@+id/loginButton"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp">
    </Button>

</RelativeLayout>

效果圖：

part2：

input_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 圓角 -->
    <corners android:radius="5dp"></corners>

    <!-- 填充色 -->
    <!--<solid android:color="#800D8A"></solid>-->

    <!-- 邊框 -->
    <stroke android:color="#686565" android:width="0.5dp"></stroke>

</shape>

效果圖：

button_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="8dp"></corners>

    <solid android:color="#07AE74"></solid>

</shape>

效果圖：

button_state.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="8dp"></corners>

    <solid android:color="#07AE74"></solid>

</shape>

效果圖：

logo.png

part3：

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {

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

        //跳轉相對父級佈局的界面
        findViewById(R.id.relativeParent).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, RelativeParentActivity.class);
                startActivity(intent);
            }

        });

        //跳轉相對其他控件佈局的界面
        findViewById(R.id.relativeOthers).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, RelativeOthersActivity.class);
                startActivity(intent);
            }

        });

        //跳轉checkbox的界面
        findViewById(R.id.checkboxButton).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, CheckBoxActivity.class);
                startActivity(intent);
            }

        });

        //跳轉radioButton界面
        findViewById(R.id.radioButton).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, RadioButtonActivity.class);
                startActivity(intent);
            }

        });

        //跳轉登錄界面
        findViewById(R.id.loginButton).setOnClickListener(new View.OnClickListener() {

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

        });
    }

}

RelativeParentActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class RelativeParentActivity extends AppCompatActivity {

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

}

RelativeOthersActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class RelativeOthersActivity extends AppCompatActivity {

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

}

CheckBoxActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class CheckBoxActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {

    private List<String> hobbies = new ArrayList<>();
    private static final String TAG = "CheckBoxActivity"; //log如果多次使用，每次使用都創建一次tag，故定義常量且名字一般爲類名

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

        //1.監聽checkbox，並將興趣愛好收集起來
        final CheckBox checkBox = findViewById(R.id.basketball);
        checkBox.setOnCheckedChangeListener(this);
        CheckBox checkBox1 = findViewById(R.id.football);
        checkBox1.setOnCheckedChangeListener(this);
        CheckBox checkBox2 = findViewById(R.id.playGame);
        checkBox2.setOnCheckedChangeListener(this);

        //2.點擊按鈕提示所選的內容
        findViewById(R.id.submitButton).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Log.d(TAG, hobbies.toString()); //tag爲前綴；Logcat中查看（Debug級別）
                Toast.makeText(CheckBoxActivity.this, hobbies.toString(), Toast.LENGTH_SHORT).show();
            }

        });
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        //判斷是否選中，選中添加到集合中去，沒選中移除集合
        if (isChecked) {
            hobbies.add(buttonView.getText().toString());
        } else {
            hobbies.remove(buttonView.getText().toString());
        }
    }

}

效果圖：

RadioButtonActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.Toast;
public class RadioButtonActivity extends AppCompatActivity {

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

        RadioButton radioButton = findViewById(R.id.manRadioButton);
        radioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                //RadioButton radioButton1 = (RadioButton) buttonView;
                //提示操作
                if (isChecked) {
                    String sex = buttonView.getText().toString();
                    Toast.makeText(RadioButtonActivity.this, "您選擇的是：" + sex, Toast.LENGTH_SHORT).show();
                }
            }
        });

        RadioButton radioButton1 = findViewById(R.id.womanRadioButton);
        radioButton1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                //提示操作
                if (isChecked) {
                    String sex = buttonView.getText().toString();
                    Toast.makeText(RadioButtonActivity.this, "您選擇的是：" + sex, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

}

效果圖：

LoginActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class LoginActivity extends AppCompatActivity {

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

}

效果圖：

按壓登錄按鈕，效果如下：