深入探讨安卓开发布局总结与UI界面交互功能实现

爱学习的梦泽

已于 2024-06-12 09:37:56 修改

阅读量982

点赞数 33

文章标签： android ui 交互

于 2024-06-12 09:21:00 首次发布

本文链接：https://blog.csdn.net/weixin_57520728/article/details/139613363

版权

深入探讨安卓开发布局总结与UI界面交互功能实现

在安卓应用开发中，布局是构建用户界面的基础，合理的布局选择可以显著提升应用的用户体验和性能。本文旨在详细介绍安卓开发中常见的布局类型，包括线性布局、约束布局、表格布局、帧布局和相对布局，并对部分UI界面交互功能的实现方法进行总结和探讨。

一、安卓开发中各种布局的理解

1. 线性布局（LinearLayout）

线性布局是一种简单的布局方式，可以将子视图沿着一个方向（水平或垂直）排列。可以通过orientation属性来设置排列方向。支持权重属性（layout_weight），用于分配子视图的空间。
线性布局是以水平方向或垂直方向将子元素(子组件或子布局)按照线性的方式进行布局。以下为线性布局的常用属性：

属性	作用
orientation	布局中组件的排序方式：horizontal(水平,默认)、vertical(垂直)
gravity	控制布局中所有的子元素的对齐方式：left、right、center等方式
layout_gravity	控制某个组件在父容器中的对齐方式：left、right、center、top和bottom等方式
layout_width	布局的宽度：wrap_content、fill_parent、match_parent
layout_height	布局的高度：wrap_content、fill_parent、match_parent

示例代码：

<?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"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:id="@+id/ll_1"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="horizontal"
        android:background="#028702"
        android:padding="20dp">
    </LinearLayout>
</LinearLayout>

2. 约束布局（ConstraintLayout）

约束布局是一种功能强大的布局，可以通过添加约束条件来灵活地定位和调整子视图。支持复杂布局和动画。需要理解布局约束（constraints）和锚点（anchors）。它允许开发者通过约束条件来控制视图的位置和大小。相比于传统的布局方式，约束布局更加直观和易于维护，可以轻松创建复杂的界面布局。
约束布局的核心是约束条件，它决定了视图在屏幕上的位置和大小。约束条件可以是视图之间的相对位置关系，也可以是视图与屏幕边缘的相对位置关系。通过设置约束条件，可以精确地控制视图的布局位置和大小。
要使用约束布局，首先需要在XML文件中添加一个ConstraintLayout标签作为根元素。然后，可以通过以下几种方式来设置约束条件：

属性	说明
ayout_constraintLeft_toLeftOf	自身的左边位于相对Id的左边
layout_constraintLeft_toRightOf	自己的右边位于相对id的右边
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf	基线对齐
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf-

以下是一个简单的示例代码，演示如何使用约束布局：

<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">  
  
    <ImageView  
        android:id="@+id/imageView"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        app:layout_constraintTop_toTopOf="parent"  
        app:layout_constraintLeft_toLeftOf="parent"  
        app:layout_constraintRight_toRightOf="parent" />  
  
    <TextView  
        android:id="@+id/textView"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        app:layout_constraintTop_toBottomOf="@id/imageView"  
        app:layout_constraintLeft_toLeftOf="parent"  
        app:layout_constraintRight_toRightOf="parent" />  
</androidx.constraintlayout.widget.ConstraintLayout>

在上述代码中，我们创建了一个包含一个ImageView和一个TextView的约束布局。ImageView被约束在父布局的左上角，TextView被约束在ImageView的下方。通过设置约束条件，我们可以确保这些视图按照我们期望的方式排列。

3. 表格布局（TableLayout）

表格布局（TableLayout）是Android中一种常见的布局方式，它允许你将多个视图按照行和列的方式进行排列。表格布局非常适合处理数据集，因为它可以轻松地展示多行和多列的数据。要在XML中使用表格布局，需要添加一个TableLayout标签作为根元素。在TableLayout标签中，你可以添加多个TableRow标签来表示表格的行，每个TableRow标签中可以包含多个视图元素。
以下是一个简单的示例代码，演示如何使用表格布局：

当TableLayout下面写控件、则控件占据一行的大小。(自适应一行，不留空白)
如下设置三个button，其宽度为match_parent、按道应该不占据一行，而却一个button占了一整行

	<TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <Button
            android:layout_width="match_parent"/>
 
        <Button
            android:layout_width="match_parent"/>
 
        <Button
            android:layout_width="match_parent"/>
 
</TableLayout>

多个组件占据一行，则配合TableRow实现：添加TableRow，使其成表格状一个TableRow代表一行
示例代码：

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <TableRow>
            <TextView
                android:background="#E0E0E0"
                android:padding="8dp"
                android:text="Cell 1" />
 
            <TextView
                android:background="#E0E0E0"
                android:padding="8dp"
                android:text="Cell 2" />
 
            <TextView
                android:background="#E0E0E0"
                android:padding="8dp"
                android:text="Cell 3" />
        </TableRow>
 
        <TableRow>
            <Button
                android:layout_width="match_parent"
                android:text="第一列" />
 
            <Button
                android:layout_width="match_parent"
                android:text="第二列" />
 
            <Button
                android:layout_width="match_parent"
                android:text="第三列" />
 
            <TextView
                android:background="#E0E0E0"
                android:padding="8dp"
                android:text="第四列" /> <TextView
                android:background="#E0E0E0"
                android:padding="8dp"
                android:text="第五列" />
        </TableRow>
        <TableRow>
            <Button
                android:layout_width="match_parent"
                android:text="第一列"/>
        </TableRow>
 
</TableLayout>

4. 帧布局（FrameLayout）

这个布局直接在屏幕上开辟出一块空白的区域,往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个组件，后续添加的控件会覆盖前一个，虽然默认会将控件放置在左上角,但是可以通过layout_gravity属性,指定到其他的位置。
示例代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".SixthActivity"
    android:foreground="@mipmap/knowledge"
    />
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#2eaa0f" />
    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#bdaccc" />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#77b8ff" />
</FrameLayout>

5. 相对布局（RelativeLayout）

相对布局（RelativeLayout）是Android中一种常用的布局方式，它可以让视图按照相对于其他视图的位置进行排列。相对布局中的子视图可以根据其他视图的位置进行定位，也可以根据屏幕边缘进行定位。在XML中使用RelativeLayout的方法与LinearLayout类似，只需要在根元素中添加一个RelativeLayout标签即可。RelativeLayout标签的属性主要包括：
android:layout_width和android:layout_height：指定相对布局的宽度和高度。
android:gravity：指定相对布局内元素的排列方式，可选值为center、left、right、top和bottom等。
要使用RelativeLayout中的子视图相对于其他视图进行定位，可以使用以下属性：

属性	注释
android:layout_below	将子视图定位在另一个视图的下方
android:layout_above	将子视图定位在另一个视图的上方
android:layout_toLeftOf	将子视图定位在另一个视图的左侧
android:layout_toRightOf	将子视图定位在另一个视图的右侧

以下是一个简单的XML示例，演示如何使用RelativeLayout：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#9F9B9B"
    tools:context=".ActivityRelativeLayout">
    <TextView
        android:id="@+id/tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#A1EF9F"
        android:text="我在中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#A1EF9F"
        android:text="我在水平中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="#A1EF9F"
        android:text="我在垂直中间"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#A1EF9F"
        android:text="我跟上级左边对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#A1EF9F"
        android:text="我跟上级右边对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#A1EF9F"
        android:text="我跟上级顶部对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_parent_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#A1EF9F"
        android:text="我跟上级底部对齐"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_left_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/tv_center"
        android:layout_alignTop="@+id/tv_center"
        android:background="#A1EF9F"
        android:text="我在中间左边"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_right_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/tv_center"
        android:layout_alignBottom="@+id/tv_center"
        android:background="#A1EF9F"
        android:text="我在中间右边"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_above_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_center"
        android:layout_alignLeft="@+id/tv_center"
        android:background="#A1EF9F"
        android:text="我在中间上面"
        android:textSize="11sp"
        android:textColor="#000000"/>
    <TextView
        android:id="@+id/tv_below_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_center"
        android:layout_alignRight="@+id/tv_center"
        android:background="#A1EF9F"
        android:text="我在中间下面"
        android:textSize="11sp"
        android:textColor="#000000"/>
</RelativeLayout>

二、UI界面交互功能的实现方法

在课程中学习到的UI界面交互功能的实现方法包括按钮点击事件、列表项点击事件、滑动操作、菜单项和对话框等。下面我将结合实际案例进行说明，并对学习过程进行反思，最后描述持续改进措施。

1. 按钮点击事件

案例：text属性字母不管设置大写还是小写，都默认转成大写
实现方法：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".ActivityButton">
    <TextView
        android:id="@+id/tv_btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_btn1"
        android:textColor="#000000"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"/>
    <Button
        android:id="@+id/btn_btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_below="@id/tv_btn1"/>
    <TextView
        android:id="@+id/tv_btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_btn1"
        android:text="@string/tv_btn2"
        android:textColor="#000000"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"/>
    <Button
        android:id="@+id/btn_btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_btn2"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:text="@string/app_name"
        android:textAllCaps="false"/>
</RelativeLayout>

2. 下拉控件

Spinner是下拉框控件，它用于从一串列表中选择某项，其功能类似于单选按钮的组合。下拉列表的展示方式有两种，一种是在当前下拉框的正下方弹出列表框，此时要把spinnerMode属性设置为dropdown,下面是XML文件中采取下拉模式的Spinner标签例子：

<Spinner
    android:id="@+id/sp_dropdown"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
android:spinnerMode="dropdown" />

另一种是在页面中部弹出列表对话框，此时要把spinnerMode属性设置为dialog,下面是XML文件中采取对话框模式的Spinner标签例子:

<Spinner
    android:id="@+id/sp dialog"
    android:layout_width="match parent"
    android:layout_height="wrap_content"
    android:spinnerMode="dialog" />

此外，在Java代码中，Spinner还可以调用下列4个方法。

属性	备注
setPrompt	设置标题文字。注意对话框模式才显示标题，下拉模式不显示标题。
setAdapter	设置列表项的数据适配器
setSelection	设置当前选中哪项。注意该方法要在setAdapter方法后调用。
setOnItemSelectedListener	设置下拉列表的选择监听器，该监听器要实现接口OnItemSelectedListener

下面是初始化下拉框，并设置选择监听器的代码例子：

private void initSpinnerForDialog() {
        // 声明一个下拉列表的数组适配器
        ArrayAdapter<String> starAdapter = new ArrayAdapter<String>(this,
                R.layout.item_select, starArray);
        // 从布局文件中获取名叫sp_dialog的下拉框
        Spinner sp_dialog = findViewById(R.id.sp_dialog);
        // 设置下拉框的标题。对话框模式才显示标题，下拉模式不显示标题
        sp_dialog.setPrompt("请选择行星");
        sp_dialog.setAdapter(starAdapter); // 设置下拉框的数组适配器
        sp_dialog.setSelection(0); // 设置下拉框默认显示第一项
        // 给下拉框设置选择监听器，一旦用户选中某一项，就触发监听器的onItemSelected方法
        sp_dialog.setOnItemSelectedListener(new MySelectedListener());
    }
 


// 定义下拉列表需要显示的文本数组
private String[] starArray = {"水星", "金星", "地球", "火星", "木星", "土星"};
// 定义一个选择监听器，它实现了接口OnItemSelectedListener
class MySelectedListener implements AdapterView.OnItemSelectedListener {
    // 选择事件的处理方法，其中arg2代表选择项的序号
    public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        Toast.makeText(spinner_dialog.this, "您选择的是" + starArray[arg2], Toast.LENGTH_LONG).show();
    }
 
   // 未选择时的处理方法，通常无需关注
    public void onNothingSelected(AdapterView<?> arg0) {}


}

图10

3.对话框

AlertDialog为提醒对话框，它是Android中最常用的对话框，可以完成常见的交互操作，例如提示、确认、选择等功能。由于AlertDialog没有公开的构造方法，因此必须借助建造器AlertDialog.Builder才能完成参数设置，AlertDialog.Builder常用的方法说明如下。

属性	作用
setIcon	设置对话框的标题图标
setTitle	设置对话框的标题文本
setMessage	设置对话框的内容文本。
setPositiveButton	设置肯定按钮的信息，包括按钮文本和点击监听器。
setNegativeButton	设置否定按钮的信息，包括按钮文本和点击监听器。
setNeutralButton	设置中性按钮的信息，包括按钮文本和点击监听器，该方法比较少用。

通过AlertDialog.Builder设置完对话框参数，还需调用建造器的create方法才能生成对话框实例。最后调用对话框实例的show方法，在页面上弹出提醒对话框。

下面是构建并显示提醒对话框的Java代码例子：

实现方法：

//创建提醒对话框的建造器
            android.app.AlertDialog.Builder builder = new android.app.AlertDialog.Builder(this);
            builder.setTitle("尊敬的用户"); // 设置对话框的标题文本
            builder.setMessage("你真的要卸载我吗？"); // 设置对话框的内容文本
            // 设置对话框的肯定按钮文本及其点击监听器
            builder.setPositiveButton("残忍卸载", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    tv_alert.setText("虽然依依不舍，但是只能离开了");
                }
            });
            // 设置对话框的否定按钮文本及其点击监听器
            builder.setNegativeButton("我再想想",new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    tv_alert.setText("让我再陪你三百六十五个日夜");
                }
            });
            android.app.AlertDialog alert = builder.create();//根据建造器构建提醒对话框对象
            alert.show();//显示提醒对话框

图11
图12
图13

三、学习反思

在学习过程中，我发现实际案例对于理解这些UI界面交互功能的实现方法非常重要。通过编写和调试实际的代码，我能更深入地理解这些功能的实现原理，并且在遇到问题时能够更快速地定位和解决。持续改进措施，为了提高技能水平，我采取了以下持续改进措施：
多方面的阅读官方文档：通过访问https://developer.android.google.cn/reference/packages点击前往网站来查阅Android官方文档，了解最新的API和最佳实践；参与开发者社区讨论：参与Stack Overflow、GitHub等开发者社区的讨论，向他人提问并回答问题，从中学习和积累经验；参加相关课程和培训：参加线上或线下的Android开发课程和培训，学习行业内最新的技术和趋势；通过持续不断地学习和实践，我期待能够不断提高自己在UI界面交互功能实现方面的技能水平，为开发出更加优秀的Android应用做出贡献

爱学习的梦泽

关注

33
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
深入探讨安卓开发布局总结与UI界面交互功能实现

在安卓应用开发中，布局是构建用户界面的基础，合理的布局选择可以显著提升应用的用户体验和性能。本文旨在详细介绍安卓开发中常见的布局类型，包括线性布局、约束布局、表格布局、帧布局和相对布局，并对部分UI界面交互功能的实现方法进行总结和探讨。
复制链接

扫一扫