4.15UI设计

实验目的

本次实验的目的是让大家熟悉Android开发中的UI设计，包括了解和熟悉常用控件的使用、界面布局和事件处理等内容。

实验要求

熟悉和掌握界面控件设计
了解Android界面布局
掌握控件的事件处理

实验内容

一、环境准备

1.打开 Android Studio

确保使用 2022.3.1 或更高版本

检查已安装组件：

Android SDK 33

Kotlin 1.8+

ConstraintLayout 2.1.4

2.配置模拟器

点击工具栏 Device Manager ➔ Create device

选择 Pixel 5 ➔ 下载 API 33 系统镜像

完成配置后启动模拟器

二、创建新项目

1.选择项目模板

File ➔ New ➔ New Project

选择 Empty Views Activity

配置项目参数：

Name: UIExperiment

Package name: com.yourname.uiexperiment

Language: Kotlin

Minimum SDK: API 33

三、

Android中有很多布局：

l FrameLayout：最简单的一个布局对象。它里面只显示一个显示对象。Android屏幕元素中所有的显示对象都将会固定在屏幕的左上角，不能指定位置。但允许有多个显示对象，但后一个将会直接在前一个之上进行覆盖显示，把前一个部份或全部挡住（除非后一个是透明的）。

l LinearLayout：以单一方向对其中的显示对象进行排列显示，如以垂直排列显示，则布局管理器中将只有一列；如以水平排列显示，则布局管理器中将只有一行。同时，它还可以对个别的显示对象设置显示比例。

l TableLayout：以拥有任意行列的表格对显示对象进行布局，每个显示对象被分配到各自的单元格之中，但单元格的边框线不可见。

l AbsoluteLayout：允许以坐标的方式，指定显示对象的具体位置，左上角的坐标为(0, 0)，向下及向右，坐标值变大。这种布局管理器由于显示对象的位置定死了，所以在不同的设备上，有可能会出现最终的显示效果不一致。

l RelativeLayout：允许通过指定显示对象相对于其它显示对象或父级对象的相对位置来布局。如一个按钮可以放于另一个按钮的右边，或者可以放在布局管理器的中央。

布局中可以放置控件，而每个布局又可以嵌套其他布局，这种思想和之前学习java的布局是一样的。

例如在main.xml中如下布局：

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户登录"
        android:textSize="24sp"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="24dp"/>

    <EditText
        android:id="@+id/usernameInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="用户名"
        android:inputType="text"
        android:layout_marginBottom="16dp"/>

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

    <CheckBox
        android:id="@+id/rememberCheck"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="记住密码"
        android:layout_marginBottom="24dp"/>

    <Button
        android:id="@+id/loginButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:layout_marginBottom="16dp"/>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:visibility="gone"/>

</LinearLayout>

使用ConstraintLayout实现了响应式布局

通过约束关系(position constraints)控制组件位置

使用0dp宽度让输入框和按钮自动填充可用空间

三、事情处理

事件监听和时间处理的概念大家以前都学习过，android中主要有如下事件方法：

l onClick(View v) 一个普通的点击按钮事件

l boolean onKeyMultiple(int keyCode,int repeatCount,KeyEvent event)用于在多个事件连续时发生，用于按键重复

l boolean onKeyDown(int keyCode,KeyEvent event) 用于在按键进行按下时发生

l boolean onKeyUp(int keyCode,KeyEvent event）用于在按键进行释放时发生

l onTouchEvent(MotionEvent event)触摸屏事件，当在触摸屏上有动作时发生

l boolean onKeyLongPress(int keyCode, KeyEvent event)当长时间按时发生

下面以点击一个Button为例子：

package com.example.logindemo

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

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

        // 获取UI组件引用
        val usernameInput = findViewById<EditText>(R.id.usernameInput)
        val passwordInput = findViewById<EditText>(R.id.passwordInput)
        val rememberCheck = findViewById<CheckBox>(R.id.rememberCheck)
        val loginButton = findViewById<Button>(R.id.loginButton)
        val progressBar = findViewById<ProgressBar>(R.id.progressBar)

        // 设置登录按钮点击事件
        loginButton.setOnClickListener {
            val username = usernameInput.text.toString()
            val password = passwordInput.text.toString()
            val remember = rememberCheck.isChecked

            // 简单的输入验证
            if (username.isEmpty() || password.isEmpty()) {
                Toast.makeText(this, "用户名和密码不能为空", Toast.LENGTH_SHORT).show()
                return@setOnClickListener
            }

            // 显示进度条
            progressBar.visibility = ProgressBar.VISIBLE
            loginButton.isEnabled = false

            // 模拟网络请求延迟
            android.os.Handler().postDelayed({
                // 隐藏进度条
                progressBar.visibility = ProgressBar.GONE
                loginButton.isEnabled = true

                // 模拟登录成功
                if (username == "admin" && password == "123456") {
                    Toast.makeText(
                        this,
                        "登录成功${if (remember) "，已记住密码" else ""}",
                        Toast.LENGTH_LONG
                    ).show()
                } else {
                    Toast.makeText(this, "用户名或密码错误", Toast.LENGTH_SHORT).show()
                }
            }, 2000)
        }
    }
}

使用setOnClickListener处理按钮点击事件

实现了基本的输入验证

使用Toast显示提示信息

使用ProgressBar显示加载状态

posted @ 2025-04-26 21:49 席阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

yindantong