`
sarin
  • 浏览: 1758040 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
E3b14d1f-4cc5-37dd-b820-b6af951740bc
Spring数据库访问系列...
浏览量:173792
C2083dc5-6474-39e2-993e-263652d27795
Android学习笔记
浏览量:368254
5f40a095-b33c-3e8e-8891-606fcf3b8d27
iBatis开发详解
浏览量:189384
B272a31d-e7bd-3eff-8cc4-c0624ee75fee
Objective-C学习...
浏览量:99957
社区版块
存档分类
最新评论

Android学习笔记13:表格布局管理器TableLayout

阅读更多
    接上文
    在Web开发中,我们会接触到形形色色的表格,HTML中的<table>元素为我们实现了表格的实现,可以说,表格是我们使用最多的元素。在Android中,我们可以使用TableLayout来实现表格布局。HTML的表格中使用<tr>来表示表格的一行,类似的,在TableLayout中,我们也有对应的TableRow来表示表格的一行。但在Android中就不往下区分表格单元了,也就是没有相应的<td>。
    下面首先来看一下TableLayout的文档:

    它是LinearLayout线性布局管理器的子类,其继承结构为:
java.lang.Object
   ↳ android.view.View
   ↳ android.view.ViewGroup
   ↳ android.widget.LinearLayout
   ↳ android.widget.TableLayout

    从文档中不难看出,要使用TableLayout就离不开TableRow,那么TableRow的文档如下:

    其也是LinearLayout的子类,继承结构如下:
java.lang.Object
   ↳ android.view.View
   ↳ android.view.ViewGroup
   ↳ android.widget.LinearLayout
   ↳ android.widget.TableRow

    在Eclipse中创建一个项目来说明TableLayout,首先使用XML来定义布局管理器:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <TableRow>
        <EditText
            android:id="@+id/edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="请输入内容" />
        <Button
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="搜索" />
    </TableRow>
    <View
        android:id="@+id/hr"
        android:layout_height="2dp"
        android:background="#FDF5E6" />
    <TableRow>
        <TextView
            android:id="@+id/label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="请选择您的性别" />
        <RadioGroup
            android:id="@+id/gender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkedButton="@+id/male"
            android:orientation="vertical" >
            <RadioButton
                android:id="@+id/male"
                android:text="男" />
            <RadioButton
                android:id="@+id/female"
                android:text="女" />
        </RadioGroup>
    </TableRow>
</TableLayout>

    我们创建了一个表格布局管理器,在其中创建了两行,也就是两个TableRow元素。在第一行中,我们放置了两个组件,一个是文本输入组件,给出默认提示文字。第二个是一个按钮,构成一个搜索框。
    第二个TableRow中我们放置了一个提示文本和一个单选按钮,那么创建一个TextView和一个RadioGroup就行了。在RadioGroup中我们设置RadioButton是纵向排列的,然后默认选中一个。
    在两个TableRow中间,我们放置了一个<View>元素,可以表示任意的组件,这里我们放置一个水平线,就像HTML中的<hr>元素效果,设置宽度是2dp,颜色为#FDF5E6。
    运行这段程序,我们就得到如下的显示效果:

    我们在Web开发中使用表格最多的应用就是数据显示了,那么在Android中也会需要用表格来显示数据,下面我们就来看看如何使用TableLayout和TableRow来显示数据,再创建一个布局管理器文件(在layout下创建datadisplay.xml),

    那么在R.java中我们就会得到对应的资源:
package org.pioneer;
public final class R {
    public static final class attr {
    }
    public static final class drawable {
        public static final int ic_launcher=0x7f020000;
    }
    public static final class id {
        public static final int btn=0x7f050001;
        public static final int edit=0x7f050000;
        public static final int female=0x7f050006;
        public static final int gender=0x7f050004;
        public static final int hr=0x7f050002;
        public static final int label=0x7f050003;
        public static final int male=0x7f050005;
    }
    public static final class layout {
        public static final int datadisplay=0x7f030000;
        public static final int main=0x7f030001;
    }
    public static final class string {
        public static final int app_name=0x7f040001;
        public static final int hello=0x7f040000;
    }
}

    下面来编写这个布局文件,其内容如下:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TableRow>
        <TextView
            android:layout_column="0"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="序号" />
        <TextView
            android:layout_column="1"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="姓名" />
        <TextView
            android:layout_column="2"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="城市" />
        <TextView
            android:layout_column="3"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="性别" />
    </TableRow>
</TableLayout>

    这里我们仅仅定义出表格的表头,有4列显示内容,那么layout_column表示的就是该列的编号,可以看出,这个编号是从0开始的,同时这是显示样式的水平居中显示,并且都有10dp的间距。修改Activity程序中的布局管理器文件:
super.setContentView(R.layout.datadisplay);

    运行程序,此时得到如下显示效果:

    那么可以看到,表头我们就做出来了,下面继续设置内容:
    <View
        android:layout_height="2dp"
        android:background="#FDF5E6" />
    <TableRow>
        <TextView
            android:layout_column="0"
            android:gravity="center_horizontal"
            android:padding="5dp"
            android:text="001" />
        <TextView
            android:layout_column="1"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="Sarin" />
        <TextView
            android:layout_column="2"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="辽宁省大连市高新园区七贤岭汇贤园七号腾飞软件园二号楼" />
        <TextView
            android:layout_column="3"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="男" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_column="0"
            android:gravity="center_horizontal"
            android:padding="5dp"
            android:text="002" />
        <TextView
            android:layout_column="1"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="Tom" />
        <TextView
            android:layout_column="2"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="北京市" />
        <TextView
            android:layout_column="3"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="男" />
    </TableRow>

    我们设置了一条水平横线,下面是两条数据的显示,那么运行程序,我们会看到这样的显示效果:

    显示不下不要紧,我们切换到横屏模式下再看:

    但是问题仍然存在,因为某一个文本太长了,并且我们设置了水平居中显示的效果,所以后面的内容都显示不下消失了,显然这么显示不合理,需要列可以折行显示内容,设置如下内容:
下内容:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:shrinkColumns="2">

    在TableLayout元素上我们设置一个shrinkColumns属性,就是设置哪一列可以折行显示,这里是第三列需要折行显示,设置完成,显示效果如下:

    我们就得到了预期的效果。表格布局中还可以设置隐藏列,那么需要在TableLayout上设置如下属性:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:shrinkColumns="2"
    android:collapseColumns="0,3">

    这里我们设置第一列和第四列为不显示状态,那么就得到如下显示效果:

    和前面两个布局管理器类似,我们也可以通过程序来控制表格布局管理器。不难想到这里我们需要四个类来完成,分别是TableLayout,TableLayout.LayoutParams,TableRow,TableRow.LayoutParams
    下面来看一下TableLayout.LayoutParams的文档:

    可以看出TableLayout.LayoutParams继承自LinearLayout.LayoutParams,其继承结构如下:
java.lang.Object
   ↳ android.view.ViewGroup.LayoutParams
   ↳ android.view.ViewGroup.MarginLayoutParams
   ↳ android.widget.LinearLayout.LayoutParams
   ↳ android.widget.TableLayout.LayoutParams

    下面是TableRow.LayoutParams,其实它们都是类似的:

    它的继承结构为:
java.lang.Object
   ↳ android.view.ViewGroup.LayoutParams
   ↳ android.view.ViewGroup.MarginLayoutParams
   ↳ android.widget.LinearLayout.LayoutParams
   ↳ android.widget.TableRow.LayoutParams

    下面我将在XML布局管理文件中配置的数据表格用程序来进行编写,那么就需要准备数据,表格数据可以看作是二维表,那么很自然想到,在数据量不大时可以使用而为数组来表示,其代码如下:
package org.pioneer;
import android.app.Activity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
public class TableLayoutDemoActivity extends Activity {
	private String tableData[][] = new String[][] { { "序号", "姓名", "地址", "性别" },
			{ "001", "Sarin", "辽宁省大连市高新园区七贤岭汇贤园七号腾飞软件园二号楼", "男" },
			{ "002", "Tom", "北京市", "男" } };// 定义显示的数据
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		TableLayout layout = new TableLayout(this);// 定义布局管理器
		TableLayout.LayoutParams layoutParams = new TableLayout.LayoutParams(
				ViewGroup.LayoutParams.FILL_PARENT,
				ViewGroup.LayoutParams.FILL_PARENT);// 定义布局管理器参数
		layout.setBackgroundResource(R.drawable.ic_launcher);// 设置背景图片
		for (int i = 0; i < tableData.length; i++) {
			TableRow row = new TableRow(this);// 定义TableRow
			for (int j = 0; j < tableData[i].length; j++) {
				TextView text = new TextView(this);// 定义TextView组件
				text.setText(tableData[i][j]);// 设置TextView的显示文字
				row.addView(text, j);// 向TableRow中添加TextView组件
			}
			layout.addView(row);// 向布局管理器中添加表格行
		}
		super.setContentView(layout, layoutParams);// 设置布局管理器
	}
}

    对于二维数组的遍历必然是嵌套的循环来进行,运行程序,我们得到如下效果:

    可以看到,我们之前设置的显示效果都不存在了,当然这可以通过代码继续设置样式,但该代码已经相当的复杂了,如果继续修改程序,那程序必然显得十分臃肿。所以对复杂布局我们采用XML文件的配置方式来进行是比较好的方法。
    示例代码请参考附件
    接下文
  • 大小: 124.4 KB
  • 大小: 136.5 KB
  • 大小: 51.1 KB
  • 大小: 53.3 KB
  • 大小: 34.2 KB
  • 大小: 40.2 KB
  • 大小: 44.1 KB
  • 大小: 49.9 KB
  • 大小: 46.2 KB
  • 大小: 138.4 KB
  • 大小: 131.3 KB
  • 大小: 131.3 KB
11
0
分享到:
评论
4 楼 q316085319 2014-06-19  
非常不错的学习网站:http://www.glmei.cn/
3 楼 lgp0203 2013-10-22  
感谢LZ总结
2 楼 qianguming 2013-09-29  
紧紧跟随13
1 楼 小色帝 2012-12-27  
112344

相关推荐

    Android学习笔记(十):Activity-TableLayout和ScrollView.doc

    TableLayout是Android中的一个布局容器,它允许开发者按照表格的形式组织界面元素。TableLayout由TableRow组成,每个TableRow则包含一个或多个View或ViewGroup。TableLayout的工作原理类似于HTML中的table,通过行和...

    Android基础学习笔记

    Android基础学习笔记主要涵盖了一系列关于Android开发的基本概念和关键组件,以下是这些知识点的详细解析: 1. **Activity**: 是Android应用程序的基本单元,它代表用户在屏幕上看到的一个界面。每个Activity都必须...

    Android 学习笔记

    除了这些,Android还提供了其他的布局管理器,如LinearLayout(线性布局)、RelativeLayout(相对布局)、GridLayout(网格布局)、TableLayout(表格布局)和ConstraintLayout(约束布局)等。每种布局都有其特定的...

    android初学者开发笔记

    ### Android初学者开发笔记知识点详解 #### 一、六大布局详解 在Android开发过程中,合理的布局设计对于用户体验至关重要。下面详细介绍六种常见的Android布局及其特点。 ##### 1. **FrameLayout(帧布局)** - *...

    android 学习笔记

    ### Android学习笔记知识点详解 #### 一、电话拨号功能实现 在Android开发中,实现电话拨号功能可以通过使用系统自带的意图(Intent)对象来完成。具体步骤如下: 1. **创建Intent对象**:首先需要创建一个Intent...

    xamarin学习笔记A04(安卓基本布局)

    在“xamarin学习笔记A04(安卓基本布局)”中,我们将深入探讨以下几个关键知识点: 1. **布局类型**: - **线性布局(LinearLayout)**: 这是最基础的布局,可将子视图水平或垂直排列。可以设置权重分配,使得子...

    Android 入门学习笔记实用源码

    这份"Android入门学习笔记实用源码"集合了多个关键概念和实践案例,旨在帮助初学者快速理解Android应用开发的基础。以下是对这些文件名称所对应知识点的详细说明: 1. **Test1Intent**: Intent是Android中的一个...

    黑马程序员之android学习笔记--用户界面 View(一).docx

    ### 黑马程序员之android学习笔记--用户界面 View(一) #### 一、View与ViewGroup概念解析 在深入探讨Android应用开发时,理解和掌握**View**与**ViewGroup**的概念至关重要。 - **View**: 在Android中,View是...

    新版Android开发教程 笔记6--应用3、4 布局

    6. **表格布局(TableLayout)**:基于表格的布局,适合展示数据,使用`TableRow`来定义行,`android:stretchColumns`可以拉伸列宽。 7. **滚动布局(ScrollView & HorizontalScrollView)**:当内容超过屏幕时,...

    一些平时的学习笔记C#/OPENCV/Android等

    - TableLayout(表格布局) 每种布局都有其特点和适用场景,选择合适的布局可以提高UI设计的效率和效果。 ### 4. Android UI线程与多线程操作 - **链接**: [线程与UI]...

    android笔记

    3. **TableLayout**:表格布局,可以用来展示表格数据。 4. **FrameLayout**:帧布局,所有的子视图都默认位于左上角,适合于作为容器。 在布局文件中,可以使用以下属性进行更精细的控制: - `android:layout_...

    学习安卓的笔记

    - `TableLayout`: 表格布局,继承自LinearLayout,以表格形式展示内容,通常用于创建表单或结构化的数据展示。 - `FrameLayout`: 帧布局,允许在一个位置显示一个子View,常用于显示浮动对话框或覆盖其他视图。 3...

    android安卓笔记

    - **TableLayout**:`TableLayout`用于创建表格布局,可以方便地组织具有行和列的数据。 - **RelativeLayout**:`RelativeLayout`允许子视图根据相对位置(相对于父容器或其它子视图)进行布局,提供了更大的灵活性...

    layout 课件 part1

    "Layout课件Part1"是针对初学者的基础教程,旨在帮助新接触这一领域的学习者建立对布局管理器的基本理解和应用技巧。 布局是任何用户界面(UI)设计的基础,它决定了应用程序中各个组件(如按钮、文本、图像等)的...

    OPhone应用开发专题——【第一季】

    TableLayout用于创建表格布局,适合显示表格数据。它可以通过嵌套`TableRow`来定义每一行的内容。 **3.6 名师讲解——Layout** 深入学习不同布局类型的原理和应用场景,通过实际案例来理解每种布局的特点和适用...

Global site tag (gtag.js) - Google Analytics