实验二：UI设计
实验目的
本次实验的目的是让大家熟悉Android开发中的UI设计，包括了解和熟悉常用控件的使用、界面布局和事件处理等内容。
实验要求
- 熟悉和掌握界面控件设计
- 了解Android界面布局
- 掌握控件的事件处理
实验内容
一、常用控件
Android中有许多常用控件（简单分类）：
文本框：TextView、EditText
按钮：Button、RadioButton、RadioGroup、CheckBox、ImageButton
列表：List、ExpandableListView、Spinner、AutoCompleteTextView、GridView、ImageView
进度条：ProgressBar、ProgressDialog、SeekBar、RatingBar
选择器：DatePicker、TimePicker
菜单：Menu、ContentMenu
对话框：Dialog、ProgressDialog
常用的控件有文本框、按钮和列表等。
EditText 是 TextView 上的覆盖，将自身配置为可编辑。 它是 TextView 的预定义子类，包含丰富的编辑功能。我的理解就是一个输入框
2.控件的实现
TextView
- <TextView
- android:id="@+id/my_textView"
- android:layout_width="322dp"
- android:layout_height="75dp"
- android:layout_marginLeft="20dp"
- android:gravity="center_vertical"
- android:textSize="24sp"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintLeft_toLeftOf="parent"
- app:layout_constraintRight_toRightOf="parent"
- app:layout_constraintTop_toTopOf="parent" />
EditText
- <EditText
- android:id="@+id/myEditText"
- android:layout_width="match_parent"
- android:layout_height="100dp"
- android:layout_marginLeft="@dimen/fab_margin"
- android:layout_marginRight="@dimen/fab_margin"
- android:background="@drawable/editext_style"
- android:hint="请输入提款金额"
- android:ems="10"
- android:gravity="center|center_vertical"
- android:inputType="numberDecimal"
- android:textCursorDrawable="@android:color/black"
- android:textSize="36sp"
- android:textStyle="bold" />
- <Button
- android:id="@+id/myButton"
- android:layout_width="match_parent"
- android:layout_height="75dp"
- android:layout_marginLeft="@dimen/fab_margin"
- android:layout_marginTop="@dimen/fab_margin"
- android:layout_marginRight="@dimen/fab_margin"
- android:background="@drawable/button_style"
- android:enabled="false"
- android:text="提 现"
- android:textSize="24sp" />
Button
RadioButton
- <RadioButton
- android:id="@+id/rbMainCitySJZ"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:checked="false"
- android:text="石家庄"
- android:textSize="24sp" />
- <RadioGroup
- android:id="@+id/rgMainCity"
- android:layout_width="234dp"
- android:layout_height="127dp"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintHorizontal_bias="0.497"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toTopOf="parent"
- app:layout_constraintVertical_bias="0.241">
- 。。。。。。
- </RadioGroup>
- <CheckBox
- android:id="@+id/cbMainSJZ"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:checked="true"
- android:text="石家庄"
- android:textSize="24sp"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintHorizontal_bias="0.449"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toTopOf="parent"
- app:layout_constraintVertical_bias="0.373" />
- <ImageButton
- android:id="@+id/ibtnMainOK"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- app:layout_constraintBottom_toBottomOf="parent"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintHorizontal_bias="0.485"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toTopOf="parent"
- app:layout_constraintVertical_bias="0.764"
- app:srcCompat="@drawable/image_1" />
RadioGroup
CheckBox
ImageButton
3.控件的属性(放的是一些不熟悉的)
|
属性 |
作用 |
|
android:gravity="center|center_vertical" |
用于设置视图内容在水平和垂直方向上的对齐方式 |
|
android:ems="10" |
宽度为10个汉字 |
|
android:gravity="center|center_vertical" |
用于设置视图内容在水平和垂直方向上的对齐方式
|
|
android:inputType="numberDecimal" |
输入类型为数字类型 |
|
android:orientation="vertical" |
把子视图垂直排列 |
|
android:textCursorDrawable="@android:color/black" |
用于设置 EditText光标颜色 |
|
android:enabled="false" |
某个组件是否被启用 |
|
android:checked="true" |
用于设置可选中控件 |
|
app:layout_constraintBottom_toBottomOf="parent" |
将视图的底部与父布局（parent）的底部对齐。 |
|
app:layout_constraintHorizontal_bias="0.498" |
设置视图在水平方向上的偏移比例。取值范围：0 到 1。0：视图偏向左侧。1：视图偏向右侧。 |
|
app:layout_constraintLeft_toLeftOf="parent" |
将视图的左侧与父布局（parent）的左侧对齐。 |
|
app:layout_constraintVertical_bias="0.181" |
设置视图在垂直方向上的偏移比例。取值范围：0 到 1。0：视图偏向上。1：视图偏向下 |
|
app:layout_constraintRight_toRightOf="parent" |
将视图的右侧与父布局（parent）的右侧对齐。 |
|
app:layout_constraintTop_toTopOf="parent" |
将视图的顶部与父布局（parent）的顶部对齐。 |
|
app:srcCompat="@drawable/image_1" |
用于设置ImageView或ImageButton等视图的图像资源的属性 |
|
|
|
二、界面布局
LinearLayout布局
- <LinearLayout
- android:id="@+id/myLinearLayout"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:layout_editor_absoluteX="196dp"
- tools:layout_editor_absoluteY="462dp">
- ....
- </LinearLayout>
在线性布局中，控件排列有水平和垂直两个方向，控件排列方向由android:orientation属性来控制，该属性需要加在LinearLayout标记的属性中。
线性布局的控件默认是从左往右排列或从上往下排列，如果想让线性布局中的控件排列对齐右边缘或者底部，可以用gravity属性控制。
LinearLayout中另外一个常用的属性是layout_weight，该属性需要加在LinearLayout的子控件中。其作用是分配线性布局中的剩余空间到该控件上。
三、事情处理
点击按钮后，Toast弹出按钮被触碰的事件信息
Toast.makeText(MainActivity.this,"click",Toast.LENGTH_SHORT).show();
View提供了多种事件监听器，用于处理用户与视图的交互。除了 setOnClickListener、setOnTouchListener 和 setOnKeyListener 之外，还有其他常用的监听器。
1.setOnClickListener：
用途：处理点击事件。
myButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 处理点击事件
}
});
2.setOnTouchListener
用途：处理触摸事件（按下、移动、抬起等）。
myButton.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 按下事件
break;
case MotionEvent.ACTION_MOVE:
// 移动事件
break;
case MotionEvent.ACTION_UP:
// 抬起事件
break;
}
return false; // 返回 true 表示事件已处理，不再传递
}
});
3.setOnKeyListener
用途：处理按键事件（如物理键盘或遥控器按键）
myButton.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (event.getAction() == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_ENTER) {
// 处理回车键按下事件
return true; // 返回 true 表示事件已处理
}
return false; // 返回 false 表示事件未处理
}
});
4.setOnLongClickListener
用途：处理长按事件。
myButton.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
// 处理长按事件
return true; // 返回 true 表示事件已处理
}
});
5.setOnFocusChangeListener
用途：处理焦点变化事件（如视图获得或失去焦点）。
myButton.setOnFocusChangeListener(new View.OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
// 视图获得焦点
} else {
// 视图失去焦点
}
}
});
6.setOnDragListener
用途：处理拖拽事件。
myButton.setOnDragListener(new View.OnDragListener() {
@Override
public boolean onDrag(View v, DragEvent event) {
switch (event.getAction()) {
case DragEvent.ACTION_DRAG_STARTED:
// 拖拽开始
break;
case DragEvent.ACTION_DRAG_ENDED:
// 拖拽结束
break;
case DragEvent.ACTION_DROP:
// 拖拽释放
break;
}
return true; // 返回 true 表示事件已处理
}
});
7. setOnCreateContextMenuListener
用途：处理上下文菜单创建事件（长按视图时弹出菜单）
myButton.setOnCreateContextMenuListener(new View.OnCreateContextMenuListener() {
@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
// 添加上下文菜单项
menu.add("菜单项1");
menu.add("菜单项2");
}
});
8. setOnSystemUiVisibilityChangeListener
用途：处理系统 UI 可见性变化事件（如状态栏或导航栏的显示/隐藏）。
myButton.setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
@Override
public void onSystemUiVisibilityChange(int visibility) {
if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {
// 系统 UI（如状态栏）可见
} else {
// 系统 UI 隐藏
}
}
});
9. setOnGenericMotionListener
用途：处理通用运动事件（如鼠标或轨迹球事件）。
myButton.setOnGenericMotionListener(new View.OnGenericMotionListener() {
@Override
public boolean onGenericMotion(View v, MotionEvent event) {
// 处理通用运动事件
return true; // 返回 true 表示事件已处理
}
});
10. setOnHoverListener
用途：处理悬停事件（如鼠标悬停）。
myButton.setOnHoverListener(new View.OnHoverListener() {
@Override
public boolean onHover(View v, MotionEvent event) {
// 处理悬停事件
return true; // 返回 true 表示事件已处理
}
});
