第5天：视图和控件

内容概述

本章节代码见链接: 简单计算器SimpleCalculator

在这一节中，我们将深入学习Android中常用的视图和控件。我们会了解如何使用这些控件来处理用户输入和事件。

常用控件

TextView：显示文本。
EditText：允许用户输入文本。
Button：响应用户的点击事件。
ImageView：显示图片。

处理用户输入

获取EditText的输入内容：使用text属性获取用户输入的字符串。
设置Button的点击事件：使用setOnClickListener方法。

事件监听器

OnClickListener：用于响应按钮点击事件。

实践实例：构建简单计算器界面

我们将创建一个简单的计算器应用，用户可以输入两个数字，点击按钮计算它们的和，并显示结果。

1. 创建项目

打开Android Studio：
- 启动Android Studio并选择“新建项目”。
选择项目模板：
- 在弹出的窗口中选择“Empty Activity”，然后点击“Next”。
配置项目设置：
- Name：输入项目名称，例如 SimpleCalculator。
- Package Name：通常为 com.example.simplecalculator。
- Save Location：选择项目的保存位置。
- Language：选择 Kotlin。
- Minimum API level：选择合适的最低API级别（例如，API 21: Android 5.0 (Lollipop)）。
- 点击“Finish”以创建项目。
等待Android Studio构建项目：
- 创建过程可能需要一些时间，请耐心等待。

2. 创建布局文件

在项目的res/layout目录下，创建一个名为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"
    android:padding="16dp">

    <EditText
        android:id="@+id/et_num1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="输入第一个数字"
        android:inputType="number"/>

    <EditText
        android:id="@+id/et_num2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="输入第二个数字"
        android:inputType="number"/>

    <Button
        android:id="@+id/btn_calculate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="计算"/>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="结果将显示在这里"
        android:paddingTop="16dp"/>
</LinearLayout>

3. 创建MainActivity

在项目的java/com/example/simplecalculator目录下找到MainActivity.kt文件，并添加以下代码：

package com.example.simplecalculator

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

class MainActivity : AppCompatActivity() {

    private lateinit var etNum1: EditText
    private lateinit var etNum2: EditText
    private lateinit var btnCalculate: Button
    private lateinit var tvResult: TextView

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

        // 初始化控件
        etNum1 = findViewById(R.id.et_num1)
        etNum2 = findViewById(R.id.et_num2)
        btnCalculate = findViewById(R.id.btn_calculate)
        tvResult = findViewById(R.id.tv_result)

        // 设置点击事件
        btnCalculate.setOnClickListener {
            calculateSum()
        }
    }

    private fun calculateSum() {
        // 获取用户输入
        val num1 = etNum1.text.toString().toIntOrNull() ?: 0
        val num2 = etNum2.text.toString().toIntOrNull() ?: 0
        val sum = num1 + num2

        // 显示结果
        tvResult.text = "结果：$sum"
    }
}

运行应用

在Android Studio中，确保已选择正确的模拟器或连接真机。
点击“运行”按钮（绿色的三角形），启动应用。
在应用界面输入两个数字，点击“计算”按钮，查看结果。

总结

在本节中，我们学习了如何使用常用的视图和控件（如TextView、EditText、Button），并通过简单的计算器应用实践了用户输入的处理和事件监听。接下来，我们可以继续深入学习更复杂的控件和布局。

秒客网