Android的用户登录页面

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);
    }

}

效果图：

按压登录按钮，效果如下：