解读 LWUIT 之九:使用布局管理器(Layout Manager)

解读 LWUIT 之九:使用布局管理器(Layout Manager)

LWUIT 开发指南下载
作者写的 Hello TableLayout 源代码下载
        前面的文章里,我们对 LWUIT 控件库中的所有控件有了总体了解。现在我们来认识一下这些控件排放的管理者——布局管理器。其实在前面的例子中,我们的每个应用程序的代码中都接触到了布局管理器,对于它们的应用我们并不陌生。但是每次都是管中窥豹。今天我们就对它们来个全面、详细的认识吧。

        注:源码编写中关于 .res 的编写这里不再赘述,详细编写步骤请参考作者的前一篇博客《解读 LWUIT 之二:关于 LWUIT 开发指南中的 Hello World》。每个项目的 .res 具体配置请到作者上传源码中的 res 目录下使用 ResourceEdit 查看。
        LWUIT 给我们提供了七种布局管理器:边框(BorderLayout)、盒(BoxLayout)、流(FlowLayout)、网格(GridLayout)、组(GroupLayout)、坐标(Coordinate Layout)、表(Table Layout)。
com.sun.lwuit.layouts.BorderLayout

BorderLayout 效果演示图(BorderLayout 效果演示图)
        位置约束保证了当某控件从容器中移出的时候,它的位置不会被其它控件取代。BorderLayout 定义了 5 个常量用来充当位置约束变量:Center、East、North、South、West。添加控件到 BorderLayout 管理的容器中的时候必须指明位置约束,不然程序运行会抛错。我们可以通过这两种方式来添加控件到 BorderLayout 管理的容器:一、addComponent(BorderLayout.CENTER, component);二、addComponent(“Center”, component);不推荐使用第二种,因为那样容易出错。
        BorderLayout 布局中,中间区域会占用最大控件。不过通常容器只使用 BorderLayout 的一或两个区域:中间或者中间和底部。
com.sun.lwuit.layouts.BoxLayout

BoxLayout.X_AXIS 效果演示图(BoxLayout.X_AXIS 效果演示图)

 

BoxLayout_Y_Axis 效果演示图(BoxLayout_Y_Axis 效果演示图)
        BoxLayout 可以根据你的选择把控件一个一个地“摞”起来,也可以在一条直线上“串”起来。BoxLayout 创建的时候,程序员就应该做出这样的选择,比如 BoxLayout boxLayout = new BoxLayout(BoxLayout.X_AXIS);
        使用 BoxLayout.X_AXIS 定义的 BoxLayout 中,控件挨着排地填充容器的宽度,而所有控件高度由容器的高度决定。如果控件数量不多,空白在容器右侧留出;使用 BoxLayout.Y_AXIS 定义的 BoxLayout 中控件挨着排地填充容器的高度,而所有控件宽度由容器的宽度决定。如果控件数量不多,空白在容器下侧留出。
com.sun.lwuit.layouts.FlowLayout

FlowLayout 默认对齐方式演示图(FlowLayout 默认对齐方式演示图)

 

FlowLayout 靠右对齐方式演示图(FlowLayout 靠右对齐方式演示图)
        FlowLayout 是容器对象默认的布局管理器,它简单地将容器中的对象按照各自合适的尺寸挨着排地放在一行,如果超出容器宽度,就开始新的一行排列。FlowLayout 默认的对齐方式是靠左,通过 FlowLayout 重载的构造方法可以将对齐方式修改为居中或者靠右。
com.sun.lwuit.layouts.GridLayout

只有两列的 GridLayout 效果演示图只有两列的 GridLayout 效果演示图)
        GridLayout 将容器内的控件放在了一个网格的单元里,每个控件充满自己的单元格,每个单元格大小一致。
com.sun.lwuit.layouts.GroupLayout
        GroupLayout 是为 GUI 生成器(诸如 Matisse,NetBeans IDE)设计开发,但它同样也可以用于手工代码开发。
com.sun.lwuit.layouts.CoordinateLayout
        不同于其他布局管理器的是,CoordinateLayout 以坐标的形式给容器内的控件指派了一个绝对位置。虽然 CoordinateLayout 允许我们以 X/Y 坐标的形式放置容器内的控件,但是它并不能保证控件的位置不会改变并且它也并不能决定控件的绝对位置。CoordinateLayout 只是“相对地”接收控件的位置,并根据接收到的位置计算出控件应该安放的具体位置。CoordinateLayout 之所以这样做,是因为在程序运行时,容器的有效空间总是随着字体的大小的改变、屏幕的旋转而变化的。
        CoordinateLayout 不同于其他标准的布局管理器的是,在 LWUIT 中 CoordinateLayout 允许控件放置按照 Z 轴顺序放在其他控件的上方。Z 轴次序由控件放入容器的顺序来决定,最后添加的控件总是被放置在最上方。
        HelloCoordinateLayout 的程序源码如下(因为没有 .res 文件的配置,所以没有上传源码):

 
        HelloCoordinateLayout 的运行效果图:

HelloCoordinateLayout 运行效果图
        例子很简单,但是其中的几点比较有趣。1、容器中控件的坐标是由 LWUIT 计算出的,所以我需我们再根据屏幕尺寸进行逻辑运算,比如使用 getWidth/Height;2、容器中控件的尺寸并不由它们的 setWidth 和 getHeight 方法决定,而是由 LWUIT 最优调整计算得来,它们的 setWidth 和 getHeight 方法被忽略;对于大小固定的控件可以运用 setPreferredW 和 setPreferredH 设置为尺寸不变;可以使用控件的 setAlignment 方法设置其在容器中的对齐方式。
com.sun.lwuit.table.TableLayout
        类似于 BorderLayout,使用了 TableLayout 的容器添加控件的时候要指明 BorderLayout 对象约束,例如:container.addComponent(tableConstraint, component);但这个约束可以省略,不像 BorderLayout 那样是必须的。这个约束是 TableLayout.Constraint 类的一个实例,并且只能使用一次,重复使用此实例就会抛异常。就是说在应该使用了 TableLayout 的容器中 TableLayout.Constraint 实例只能对一个控件有效,其他控件必须另行创建 TableLayout.Constraint 实例,然后定义约束。TableLayout.Constraint 可以用来指定某一行的高度和宽度(这一点在实际应用中很重要,具体设置请参阅 com.sun.lwuit.table.TableLayout.Constraint 文档,也可以参考下边给出的源代码)。
        TableLayout 会自动根据行数和列数尽量多地空间分配给控件来使得控件尺寸最优,直到剩余控件被耗尽。在这种情况下,如果容器不是可以水平滚动的,当容器控件被耗尽时,添加进来的控件就会“挤在一块”。
        注意 TableLayout 中的控件尺寸默认设置为充满整个单元。可以调用 Component 或者 Style 类的相关方法来改变每个单元的对齐和填充方式。
        HelloTableLayout 源代码如下:

 
        HelloTableLayout 运行效果图:

HelloTableLayout 运行效果图
        在上图中,“First”单元垂直跨越了两个单元,而“Spanning”水平跨越了三个单元,这在设计复杂 UI 界面的时候是相当有用的。这就是使用了 TableLayout.Constraint 约束的效果。当然,TableLayout.Constraint 约束也可以定义该单元默认的高度/宽度占用屏幕的比例。比如上图当中,“First”标签占用尺寸被设置为 50%,而“Fourth”标签被设置为 20%。

posted @ 2010-03-02 13:17  Defonds  阅读(47)  评论(0编辑  收藏  举报