《物联网应用开发》课件-表格布局使用方法

物联网应用开发任务2-1

表格布局使用方法项目2智慧城市界面的实现CONTENTS目录01任务目标02知识准备03任务实施04任务总结表格布局使用方法在Android开发中，TableLayout提供了一种以表格形式展示数据的布局方式。它通过将视图组件排列在行（TableRow）中，使得开发者能够更容易地对数据进行布局上的控制。它的使用类似于HTML中的表格，可以方便地实现具有网格状结构的用户界面。TableLayout在Android应用中尤为有用，尤其在需要展示大量数据或者信息分类明确的界面时，可以提高界面的可读性和易用性。与LinearLayout或RelativeLayout等布局相比，TableLayout具有更好的数据展示优势，特别是在固定列数的表格中，显示效果更为出色。任务目标1.掌握表格布局的基本概念2.掌握表格布局的常见属性3.掌握表格布局的应用知识准备1.表格布局的基本概念TableLayout是一种基于表格模型的布局容器，用于将子视图按行列的形式排列。TableLayout的核心思想是将视图按“表格”的方式组织，每一行由TableRow容器承载，而TableRow内的控件则按列排列。在TableLayout中，所有的子视图都被组织为若干行，每一行中可以包含多个列。通过这种方式，开发者可以轻松地创建出结构化的布局，适用于表单、数据展示以及其他需要表格样式的界面。知识准备2.TableLayout的常用属性TableLayout提供了多种属性来帮助开发者精确控制子视图的排列和布局。掌握这些属性的使用，可以使我们在开发中更加高效地创建符合需求的界面。以下是一些常用的属性：这个属性允许我们指定哪些列应该自动拉伸以填充剩余的空间。当表格的列宽不固定时，可以通过设置该属性来确保特定列占据更多空间。例子代码如下：<TableLayout

android:stretchColumns="1,2"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<!--子视图--></TableLayout>在这个例子中，android:stretchColumns="1,2"，表示第二列和第三列将自动拉伸，以填充剩余的空间。（1）android:stretchColumns知识准备这个属性与android:stretchColumns类似，但它的作用是控制哪些列应该自动收缩以适应内容。例如，如果某些列内容较少，我们希望它们收缩以节省空间，就可以使用这个属性。例子代码如下：<TableLayoutandroid:shrinkColumns="0,1"android:layout_width="match_parent"android:layout_height="wrap_content"><!--子视图--></TableLayout>这里，android:shrinkColumns="0,1"表示第一列和第二列在需要时会收缩。（2）android:shrinkColumns知识准备这个属性允许我们指定某些列在显示时完全被隐藏（宽度为0）。对于一些不需要显示的列，可以使用此属性来避免占用空间，从而使布局更加紧凑。例子代码如下：<TableLayoutandroid:collapseColumns="1"android:layout_width="match_parent"android:layout_height="wrap_content"><!--子视图--></TableLayout>在此示例中，android:collapseColumns="1"表示第二列将完全被隐藏。（3）android:collapseColumnsTableLayout的排列方向是由android:orientation属性决定的。尽管TableLayout默认按纵向排列子视图，但仍然可以显式设置这个属性来决定排列方向。例子代码如下：<TableLayoutandroid:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"><!--子视图--></TableLayout>将android:orientation设置为horizontal后，所有的TableRow会横向排列子控件。知识准备（4）android:orientation和android:layout_height与其他布局一样，TableLayout也使用android:layout_width和android:layout_height来定义布局的尺寸，通常，我们会将其设置为match_parent或wrap_content，以便布局根据子视图的内容或父视图的尺寸来调整。例子代码如下：<TableLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><!--子视图--></TableLayout>知识准备（5）android:layout_width任务实施在这一部分，我们将使用TableLayout布局来实现一个简单的登录页面。在这个示例中，我们将创建一个包含用户名和密码输入框，以及登录和退出按钮的界面，展示如何利用TableLayout来布局这些元素。具体代码如下：TableLayout的使用示例<TableLayoutxmlns:android="/apk/res/android"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_vertical">

<!--第一行--><TableRow><TextViewandroid:text="用户名:"android:padding="5dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#000000"/><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:minWidth="200dp"/></TableRow>

<!--第二行--><TableRow><TextViewandroid:text="密码:"任务实施android:padding="5dp"android:textColor="#000000"/><EditTextandroid:id="@+id/et_password"android:layout_width="match_parent"android:layout_height="wrap_content"android:minWidth="200dp"/></TableRow>

<!--第三行--><TableRow><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="登录"android:layout_marginLeft="30dp"/><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="退出"android:layout_marginLeft="30dp"/></TableRow></TableLayout>任务实施首先我们使用TableLayout作为根布局容器，