4.11日报
完成移动应用开发实验二：
实验二：UI设计
实验目的
本次实验的目的是让大家熟悉Android开发中的UI设计，包括了解和熟悉常用控件的使用、界面布局和事件处理等内容。
实验要求
- 熟悉和掌握界面控件设计
- 了解Android界面布局
- 掌握控件的事件处理
实验内容
一、常用控件
1.常用控件介绍
Android中有许多常用控件（简单分类）：
文本框：TextView、EditText
按钮：Button、RadioButton、RadioGroup、CheckBox、ImageButton、Switch
列表：List、ExpandableListView、Spinner、AutoCompleteTextView、GridView、ImageView
进度条：ProgressBar、ProgressDialog、SeekBar、RatingBar
选择器：DatePicker、TimePicker
菜单：Menu、ContentMenu
对话框：Dialog、ProgressDialog
图片显示：ImageView、ImageButton
常用的控件有文本框、按钮和列表等。
2控件实现：
<?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"
android:padding="16dp">
<Button
android:id="@+id/viewMeetingRoomsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="浏览会议室信息"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"/>
<Button
android:id="@+id/searchMeetingRoomsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="查询会议室信息"
android:layout_centerHorizontal="true"
android:layout_below="@id/viewMeetingRoomsButton"
android:layout_marginTop="20dp"/>
<Button
android:id="@+id/bookMeetingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="会议预约"
android:layout_centerHorizontal="true"
android:layout_below="@id/searchMeetingRoomsButton"
android:layout_marginTop="20dp"/>
<Button
android:id="@+id/viewMeetingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="参会信息"
android:layout_centerHorizontal="true"
android:layout_below="@id/bookMeetingButton"
android:layout_marginTop="20dp"/>
</RelativeLayout>
二、界面布局
在Android开发中，界面布局是指如何组织和排列控件（如按钮、文本框、图片等）以构建用户界面。Android提供了多种布局方式，每种布局方式都有其特点和适用场景。以下是几种常见的布局方式：
1. LinearLayout
LinearLayout 是一种简单的布局方式，它将控件按水平或垂直方向排列。通过设置android:orientation属性，可以指定控件的排列方向。
<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_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用户名"
android:inputType="text"
android:layout_marginBottom="16dp" />
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密码"
android:inputType="textPassword"
android:layout_marginBottom="16dp" />
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登录"
android:layout_marginBottom="16dp" />
<TextView
android:id="@+id/tv_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#FF0000" />
</LinearLayout>
RelativeLayout
RelativeLayout 是一种灵活的布局方式，它允许控件相对于其他控件或父布局进行定位。通过设置android:layout_above、android:layout_below、android:layout_toLeftOf等属性，可以实现复杂的布局效果。
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用户名"
android:inputType="text"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp" />
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密码"
android:inputType="textPassword"
android:layout_below="@id/et_username"
android:layout_marginTop="16dp" />
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登录"
android:layout_below="@id/et_password"
android:layout_marginTop="16dp" />
<TextView
android:id="@+id/tv_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#FF0000"
android:layout_below="@id/btn_login"
android:layout_marginTop="16dp" />
</RelativeLayout>
ConstraintLayout
ConstraintLayout 是一种强大的布局方式，它允许通过约束来定义控件的位置和大小。它结合了RelativeLayout的灵活性和LinearLayout的简单性，同时提供了更高效的布局性能。
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<EditText
android:id="@+id/et_username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="用户名"
android:inputType="text"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp" />
<EditText
android:id="@+id/et_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="密码"
android:inputType="textPassword"
app:layout_constraintTop_toBottomOf="@id/et_username"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp" />
<Button
android:id="@+id/btn_login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="登录"
app:layout_constraintTop_toBottomOf="@id/et_password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp" />
<TextView
android:id="@+id/tv_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#FF0000"
app:layout_constraintTop_toBottomOf="@id/btn_login"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
三、事情处理
在Android开发中，事件处理是指响应用户与界面控件的交互，如点击按钮、输入文本等。以下是一些常见的事件处理方式：
1. 按钮点击事件
为按钮添加点击事件监听器，可以在用户点击按钮时执行特定的操作。
示例代码：
java
复制
btnLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String username = etUsername.getText().toString();
String password = etPassword.getText().toString();
if ("".equals(username)) {
tvMessage.setText("用户名不能为空");
} else if ("".equals(password)) {
tvMessage.setText("密码不能为空");
} else if ("admin".equals(username) && "123456".equals(password)) {
tvMessage.setText("登录成功");
Toast.makeText(MainActivity.this, "欢迎, " + username, Toast.LENGTH_SHORT).show();
} else {
tvMessage.setText("用户名或密码错误");
}
}
});
2. 文本输入事件
为EditText添加文本输入监听器，可以在用户输入文本时执行特定的操作。
示例代码：
java
复制
etUsername.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
// 在文本改变之前调用
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
// 在文本改变时调用
tvMessage.setText("");
}
@Override
public void afterTextChanged(Editable s) {
// 在文本改变之后调用
}
});
3. 其他事件
Android还支持其他类型的事件，如LongClickListener（长按事件）、FocusChangeListener（焦点变化事件）等。可以根据需要为控件添加相应的事件监听器。
实验总结
通过本次实验，我们深入了解了Android界面布局和控件的事件处理。我们使用了LinearLayout、RelativeLayout和ConstraintLayout来布局控件，并为按钮添加了点击事件监听器，为文本框添加了文本输入监听器。这些技能将帮助我们在实际开发中构建更复杂和交互丰富的用户界面。
浙公网安备 33010602011771号