LinearLayout布局的应用

什么是布局

定义 UI 的可视化结构

通过布局参数（LayoutParams）定义子元素的尺寸、位置

布局是不可见的容器（ViewGroup）

LinearLayout布局的使用

LinearLayout是线性布局控件，它作为容器将其包含的子控件以横向或纵向的方式排列

子元素被排列成一行或一列

orientation 属性设置排列方向

layout_gravity属性 设置元素在容器中的位置

gravity属性 设置元素所包含的内容或子元素在元素中的位置。

属性值 位置
top 在布局顶部（horizontal 时可用）
bottom 在布局底部（horizontal 时可用）
left 在布局左则（vertical 时可用）
right 在布局右侧（vertical 时可用）
center_horizontal 水平居中（vertical 时可用）
center_vertical 垂直居中（horizontal 时可用）
center 水平或垂直居中（均有效）

hint属性 设置提示文字

text属性 设置默认文字（可删除）

RelativeLayout布局的应用

RelativeLayout布局

元素在相对位置显示

可避免嵌套，保持简洁的层次结构

如下图所示：

image-20210115172704358

属性名称 描述
layout_alignParentTop 父元素顶部对齐（true）
layout_alignParentBottom 父元素底部对齐（true）
layout_alignParentStart 父元素左侧对齐（true）
layout_alignParentEnd 父元素右侧对齐（true）
layout_centerHorizontal 水平居中（true）
layout_centerVertical 垂直居中（true）
layout_marginTop 距离顶部
layout_marginBottom 距离底部
layout_marginStart 距离左侧
layout_marginEnd 距离右侧
layout_above 底部置于给定元素之上
llayout_below 顶部置于给定元素之下
layout_alignTop 顶部与给定元素顶部对齐
layout_alignBaseline baseline 与给定元素的 baseline 对齐
layout_alignBottom 底部与给定元素底部对齐
layout_alignEnd 右侧对齐给定元素
layout_toStartOf 右侧对齐给定元素开始的位置
layout_toEndOf 左侧对齐给定元素结束的位置

TextView、EditText控件的应用

TextView控件

显示文字

只读

可设置字体、字号、颜色、链接等样式

View与TextView的关系

TextView由View控件派生而来

image-20210115173619457

EditText控件

显示和编辑文字

可编辑

可设置软键盘类型

TextView与EditText的关系

EditText由TextView派生而来

image-20210115173919206

Button控件的应用

Button控件

普通按钮

带图标的按钮

按钮事件

Button与TextView的关系

Button由TextView派生而来

Button控件的事件

  • 单击事件

    通过触屏或鼠标点击按钮所激发的事件

  • 长按事件
    通过触屏或鼠标按下按钮控并保持不放开所激发的事件

Button控件单点事件定义方法

  • 通过设置控件属性
    Button控件提供了onClick属性

  • 事件监听器绑定方法
    通过调用控件的setOnClickListener绑定相应方法

RadioButton控件的应用

RadioButton控件

单项选择的实现

通过分组容器对RadioButton进行分组

RadioButton的继承关系图

image-20210115175301752

CheckBox控件的应用

CheckBox控件

核选项的实现

多项选择的实现

用户登录小案例

设计一套登录界面，用户可输入用户名、密码，同时可勾选“记住密码”选项。

xml页

image-20210115175705874

xml页代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".DisplayMessageActivity">

    <TextView
        android:id="@+id/TVUserlogin"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:gravity="center|center_horizontal"
        android:text="TextView"
        android:textSize="30sp"
        tools:text="@string/UserLogin" />

    <EditText
        android:id="@+id/ETUserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/UserName"
        android:inputType="textPersonName" />

    <EditText
        android:id="@+id/ETPassWord"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="密码"
        android:inputType="textPassword" />

    <RadioGroup
        android:id="@+id/LoginMethod"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioButtonByUsername"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:checked="true"
            android:text="RadioButton"
            tools:text="用户名登陆" />

        <RadioButton
            android:id="@+id/radioButtonByEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="邮箱登录" />

    </RadioGroup>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <CheckBox
            android:id="@+id/checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CheckBox"
            tools:text="@string/RemeberUser" />

    </RadioGroup>

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/Login" />

    <TextView
        android:id="@+id/ErrorMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/design_default_color_error" />
</LinearLayout>

后端控制页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
package com.example.myapplication1;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class DisplayMessageActivity extends AppCompatActivity {

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

//        // Get the Intent that started this activity and extract the string
//        Intent intent = getIntent();
//        String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
//
//        // Capture the layout's TextView and set the string as its text
//        TextView textView = findViewById(R.id.TVUserlogin);
//        textView.setText(message);

        //用户登录页
        Button btnlogin = (Button) findViewById(R.id.btnLogin);
        btnlogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                RadioButton rbtnByUsername = (RadioButton)findViewById(R.id.radioButtonByUsername);
                //RadioButton rbtnByEmail = (RadioButton)findViewById(R.id.radioButtonByEmail);
                String DBUser,DBPassword;
                if(rbtnByUsername.isChecked()){
                    //user-login
                    DBUser = "llz";
                    DBPassword = "123456";
                }
                else{
                    //Email-login
                    DBUser = "llz@qq.com";
                    DBPassword = "123456";
                }
                EditText ETUsername = (EditText)findViewById(R.id.ETUserName);
                EditText ETPassword = (EditText)findViewById(R.id.ETPassWord);
                TextView ErrorMessage = (TextView)findViewById(R.id.ErrorMessage);
                if(ETUsername.getText().toString().equals(DBUser)){
                    if(ETPassword.getText().toString().equals(DBPassword)){
                        ErrorMessage.setText("success");
                    }
                    else{
                        ErrorMessage.setText("密码错误");
                    }
                }
                else{
                    ErrorMessage.setText("账号不存在");
                }
            }
        });

    }
}

效果图

image-20210115181052387