第4天：用户界面和布局

内容概述：

本章节代码见： 登录应用（LoginApp）

• 布局介绍：

  • LinearLayout（线性布局）：将子视图以水平或垂直方式排列。
  • RelativeLayout（相对布局）：允许子视图相对于其他视图定位。
  • ConstraintLayout（约束布局）：提供更灵活和高效的布局方式。

• 使用XML构建UI：

  • 布局文件的基本结构。
  • 常用属性：layout_width、layout_height、id等。

实践实例：创建登录界面

1. 创建布局文件

在res/layout目录下创建activity_login.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录"
        android:textSize="24sp"
        android:layout_gravity="center"/>

    <EditText
        android:id="@+id/et_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="用户名"/>

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

    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"/>
</LinearLayout>

2. 创建Activity

在MainActivity.kt中加载该布局，并处理登录按钮点击事件：

package com.example.loginapp

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        val etUsername = findViewById<EditText>(R.id.et_username)
        val etPassword = findViewById<EditText>(R.id.et_password)
        val btnLogin = findViewById<Button>(R.id.btn_login)

        btnLogin.setOnClickListener {
            val username = etUsername.text.toString()
            val password = etPassword.text.toString()

            if (username.isNotEmpty() && password.isNotEmpty()) {
                // 登录逻辑可以在这里实现
                Toast.makeText(this, "欢迎，$username!", Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this, "请输入用户名和密码", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

3. 运行应用

• 确保没有错误，运行应用程序。
• 输入用户名和密码，点击“登录”按钮，检查提示信息。

总结

今天你学习了如何使用XML创建用户界面布局，理解了不同布局类型的用法，并通过Kotlin实现了基本的用户输入处理。接下来可以尝试添加更多功能，比如输入验证、记住密码等。