首页 > 代码库 > 第三章 界面UI的基石—UI布局(4)

第三章 界面UI的基石—UI布局(4)

3.2.5表单布局(TableLayout)

TableLayout,即表单布局,以行和列的形式管理控件。每行为一个TableRow对象,也可以为一个View对象。当为View对象时,该对象将横跨该行所有列。

同样的,我们也以一个简单的例子来加以说明,看完例子之后相信大家对TableLayout的应用会有一个比较全面的了解。

<?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="wrap_content"

    android:stretchColumns="0,1,2"

    android:shrinkColumns="1,2" >

    <TextView

        android:text="TableLayout"

        android:gravity="center"/>

    <TableRow>

        <TextView

            android:layout_column="1"

            android:text="姓名"

            android:gravity="center"/>

        <TextView

            android:text="性别"

            android:gravity="center"/>

    </TableRow>

    <TableRow>

        <TextView

            android:text=" 1 "

            android:gravity="center"/>

        <TextView

            android:text="zhangsan"

            android:gravity="left"/>

        <TextView

            android:text="男"

            android:gravity="center"/>

    </TableRow>

    <TableRow>

        <TextView

            android:text=" 2 "

            android:gravity="center"/>

        <TextView

            android:text="lilei"

            android:gravity="left"/>

        <TextView

            android:text="男"

            android:gravity="center"/>

    </TableRow>

    <TableRow>

        <TextView

            android:text="3"

            android:gravity="center"/>

        <TextView

            android:text="hanmeimei"

            android:gravity="left"/>

        <TextView

            android:text="女"

            android:gravity="center"/>

    </TableRow>

</TableLayout>

 

效果图如图3-8所示。

技术分享

图3-8TableLayout表单布局

 

TableLayout布局中,有几个属性是比较常用的,大家应该熟练掌握(下标都是从0开始):

1)android:stretchColumns="0,1,2",设置1、2、3列为可伸展列,设置完后这些列会将剩余的空白填满;

2)android:shrinkColumns="1,2",设置2、3列为可收缩列,设置完后这些列会自动延伸填充可用部分;

3)android:collapse="0",设置第1列隐藏。

3.2.6绝对布局(AbsoluteLayout)

AbsoluteLayout,即绝对布局,又称坐标布局,在布局上灵活性较大,也较复杂。另外由于各种手机屏幕尺寸的差异,给我们的开发也带来较多困难。

同样的,我们也举一个简单的例子来帮助大家掌握。

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content">

    <ImageView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src=http://www.mamicode.com/"@drawable/ball"

        android:layout_x="45px"

        android:layout_y="60px"/>

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="absolutelayout"

        android:textColor="@android:color/black"

        android:layout_x="100px"

        android:layout_y="175px"/>

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="absolutelayout"

        android:textColor="@android:color/black"

        android:layout_x="120px"

        android:layout_y="195px"/>

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="absolutelayout"

        android:textColor="@android:color/black"

        android:layout_x="140px"

        android:layout_y="215px"/>

</AbsoluteLayout>

 

效果图如图3-9所示。

技术分享

图3-9AbsoluteLayout绝对布局

 

使用这种布局时,我们要计算好每一个视图的大小和位置,然后再通过android:layout_x和android:layout_y属性来将它们的位置定好。

 

经验分享:

由于现在的Android设备的屏幕分辨率和尺寸有着很大的差异,所以一般情况下,开发过程中已经不会用到绝对布局了,完全可以使用其它几种布局方式来实现。

如果的确需要使用绝对布局时,有以下几点需要我们注意:

1)坐标原点为屏幕左上角;

2)添加视图时,要精确的计算每个视图的像素大小,最好先在纸上画草图,并将所有元素的像素定位计算好。

第三章 界面UI的基石—UI布局(4)