实验二：UI设计

实验二：UI设计

实验目的

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

实验要求

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

实验内容

 # 1. 控件设计

-  常用控件 ：

  - TextView（文本显示）

  - EditText（文本输入）

  - Button（按钮）

  - ImageView（图片显示）

  - CheckBox（复选框）

  - RadioButton（单选按钮）

  - ProgressBar（进度条）

  

-  实现示例 ：

 xml

<!-- activity_main.xml -->

<TextView

    android:id="@+id/tv_title"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="用户登录"

    android:textSize="24sp"/>

 

<EditText

    android:id="@+id/et_username"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:hint="请输入用户名"/>

 

<Button

    android:id="@+id/btn_submit"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="提交"/>

 

 # 2. 布局设计

-  布局类型 ：

  - LinearLayout（线性布局）

  - RelativeLayout（相对布局）

  - ConstraintLayout（约束布局）

  - FrameLayout（帧布局）

  - TableLayout（表格布局）

 

-  布局示例 ：

 xml

<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">

 

    <!-- 这里添加上述控件 -->

    

</LinearLayout>

 

 # 3. 事件处理

-  实现方式 ：

  - 匿名内部类

  - 实现接口

  - Lambda表达式（Java 8+）

 

-  事件处理示例 ：

 java

// MainActivity.java

Button btnSubmit = findViewById(R.id.btn_submit);

btnSubmit.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

        EditText etUsername = findViewById(R.id.et_username);

        String username = etUsername.getText().toString();

        Toast.makeText(MainActivity.this, "欢迎：" + username, Toast.LENGTH_SHORT).show();

    }

});

// 使用Lambda简写

btnSubmit.setOnClickListener(v -> {

    // 处理点击事件

});

 

 

  二、扩展实现建议

1.  复合控件 ：

   - 使用`<include>`标签复用布局

   - 创建自定义组合控件

 

2.  样式优化 ：

 xml

<!-- styles.xml -->

<style name="MyButtonStyle">

    <item name="android:background">@drawable/btn_bg</item>

    <item name="android:textColor">#FFFFFF</item>

    <item name="android:textSize">18sp</item>

</style>

 

 

3.  输入验证 ：

 java

private boolean validateInput() {

    EditText etPassword = findViewById(R.id.et_password);

    return !etPassword.getText().toString().isEmpty();

}

 遇见的问题及解决方案

1.  布局错乱 ：

   - 使用`layout_weight`属性分配剩余空间

   - 添加适当的margin/padding

   - 使用ConstraintLayout进行精确定位

 

2.  事件不响应 ：

    java

   // 检查是否正确设置clickable属性

   android:clickable="true"

   // 检查是否有多层嵌套的事件拦截