2025.3.10（周一）

实验二：UI设计

实验目的

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

实验要求

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

实验内容

一、       常用控件

1、  常用控件介绍

（1）基本控件

  • TextView：用于显示文本内容，可以设置字体、颜色、大小等属性。
  • EditText：用于输入文本，可设置输入类型，如密码、数字、邮箱等。
  • Button：按钮控件，支持点击事件。
  • ImageView：用于显示图片，支持从资源文件、URL加载图片。
  • CheckBox：复选框，可用于多选操作。
  • RadioButton 和 RadioGroup：单选按钮，通常配合RadioGroup使用，实现单选功能。
  • Switch / ToggleButton：用于开启或关闭某个选项。

（2）选择控件

  • Spinner：下拉选择框，用户可以从列表中选择一个选项。
  • SeekBar：滑动条，可用于音量、亮度等调节。
  • RatingBar：评分控件，通常用于显示星级评分。

（3）进度控件

  • ProgressBar：进度条，可以是水平或环形，适用于加载或下载任务。
  • SeekBar：滑动条，可用于调整进度值。

（4）布局控件

  • LinearLayout：线性布局，子控件可垂直或水平排列。
  • RelativeLayout（已废弃，建议使用ConstraintLayout）：子控件可相对定位。
  • ConstraintLayout：更灵活的布局方式，适用于复杂的UI设计。
  • FrameLayout：适用于叠加视图，比如Fragment。
  • GridLayout：类似表格的布局，支持多行多列。

（5）列表和网格

  • RecyclerView：用于显示大数据列表，支持水平、垂直滚动，替代ListView。
  • ListView（已不推荐）：用于显示垂直列表，性能较RecyclerView差。
  • GridView：用于显示网格布局的数据列表。

（6）高级控件

  • ViewPager2：用于实现页面滑动，常用于轮播图或选项卡。
  • WebView：用于加载网页内容，可以加载URL或HTML代码。
  • CardView：卡片式布局，适用于美观的UI设计。
  • Toolbar：增强版的ActionBar，可自定义导航栏。

（7）对话框和通知

  • AlertDialog：弹出提示框，可设置按钮、列表等。
  • Toast：短暂提示信息，通常用于显示轻量级通知。
  • Snackbar：类似Toast，但支持交互按钮，比如“撤销”操作。
  • Notification：系统通知，可用于消息推送。

（8）手势和交互

  • GestureDetector：监听手势，如单击、双击、滑动等。
  • SwipeRefreshLayout：下拉刷新控件，常用于RecyclerView和ListView。

2、  控件的实现

我们改变xml文件的格式使之可以输入文本、出现按钮

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="220dp"
        android:text="Hello World!"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.523"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Please write down your first Android code"
        android:padding="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        app:layout_constraintTop_toBottomOf="@id/editText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

package com.example.sy1;

import android.os.Bundle;
import android.widget.EditText;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;

public class hw extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);  // 假设布局文件名是 activity_hw.xml

        // 获取布局和视图对象
        ConstraintLayout constraintLayout = findViewById(R.id.main);
        TextView textView = findViewById(R.id.textView);
        EditText editText = findViewById(R.id.editText);

        // 创建 ConstraintSet 对象来修改约束
        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(constraintLayout);  // 克隆现有布局的约束

        // 设置 EditText 的顶部约束连接到 TextView 的底部
        constraintSet.connect(editText.getId(), ConstraintSet.TOP, textView.getId(), ConstraintSet.BOTTOM);

        // 应用新的约束
        constraintSet.applyTo(constraintLayout);
    }
}

 

hw.java

package com.example.sy1;

import android.os.Bundle;
import android.widget.EditText;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.constraintlayout.widget.ConstraintSet;

public class hw extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);  // 假设布局文件名是 activity_hw.xml

        // 获取布局和视图对象
        ConstraintLayout constraintLayout = findViewById(R.id.main);
        TextView textView = findViewById(R.id.textView);
        EditText editText = findViewById(R.id.editText);

        // 创建 ConstraintSet 对象来修改约束
        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(constraintLayout);  // 克隆现有布局的约束

        // 设置 EditText 的顶部约束连接到 TextView 的底部
        constraintSet.connect(editText.getId(), ConstraintSet.TOP, textView.getId(), ConstraintSet.BOTTOM);

        // 应用新的约束
        constraintSet.applyTo(constraintLayout);
    }
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Sy1"
        tools:targetApi="31">
        <activity
            android:name=".hw"
            android:exported="true">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity" android:exported="true"/>

    </application>

</manifest>

最后页面效果为

posted @ 2025-03-23 09:14  记得关月亮  阅读(59)  评论(0)    收藏  举报