Draw2d中的布局管理器Layout比较

最近在研究Eclipse中的GEF开发，在跟着GEF-whole-upload教程做一个GEF应用程序的例子时，发现Figure上的控件无法显示，谷歌了很久也没找到解决方案，最后终于发现是Layout的问题。同时发现还没有人进行过这方面的研究，于是打算写一篇文章对各种Layout进行比较。由于GEF的绘图部分使用的是Draw2d，因此本文是关于Draw2d中的Layout比较。

Draw2d中常用的Layout有BorderLayout、ToolbarLayout、FlowLayout、GridLayout、XYLayout。它们都继承于AbstractLayout，类图如下：

下面本文将对这些Layout的用法进行说明。

BorderLayout

BorderLayout是按五个区域进行布局，即上下左右中。代码如下：

 

protected IFigure createFigure() {

        // TODO Auto-generated method stub

        Figure figure = new Figure();

        figure.setLayoutManager(new BorderLayout());

        

        Label label1 = new Label();

        label1.setText("test1");

        figure.add(label1, BorderLayout.LEFT);

        

        Label label2 = new Label();

        label2.setText("test2");

        figure.add(label2, BorderLayout.RIGHT);

        

        Label label3 = new Label();

        label3.setText("test3");

        figure.add(label3, BorderLayout.TOP);

        

        Label label4 = new Label();

        label4.setText("test4");

        figure.add(label4, BorderLayout.BOTTOM);

        

        Label label5 = new Label();

        label5.setText("test5");

        figure.add(label5, BorderLayout.CENTER);

        

        return figure;

}

效果如下：

ToolbarLayout

ToolbarLayout顾名思义，类似于工具栏按钮的布局，可以设置控件布局的方向、间隔等，代码如下：

protected IFigure createFigure() {

        // TODO Auto-generated method stub

        Figure figure = new Figure();

        

        ToolbarLayout layout = new ToolbarLayout();

        layout.setMinorAlignment(ToolbarLayout.ALIGN_TOPLEFT);  

        layout.setStretchMinorAxis(false);  

        layout.setSpacing(2);

        figure.setLayoutManager(layout);

        

        Label label1 = new Label();

        label1.setText("test1");

        figure.add(label1);

        

        Label label2 = new Label();

        label2.setText("test2");

        figure.add(label2);

        

        Label label3 = new Label();

        label3.setText("test3");

        figure.add(label3);

        

        Label label4 = new Label();

        label4.setText("test4");

        figure.add(label4);

        

        Label label5 = new Label();

        label5.setText("test5");

        figure.add(label5);

        

        return figure;

}

效果如下：

FlowLayout

FlowLayout与ToolbarLayout类似，都是继承于OrderLayout。唯一的不同是FlowLayout允许控件布局的时候换行，而ToolbarLayout只能有一行。代码如下：

protected IFigure createFigure() {

        // TODO Auto-generated method stub

        Figure figure = new Figure();

        

        FlowLayout flowLayout = new FlowLayout(true);//水平

        flowLayout.setMinorSpacing(20);

        flowLayout.setMajorAlignment(FlowLayout.ALIGN_TOPLEFT);

        figure.setLayoutManager(flowLayout);

        

        Label label1 = new Label();

        label1.setText("test1");

        figure.add(label1);

        

        Label label2 = new Label();

        label2.setText("test2");

        figure.add(label2);

        

        Label label3 = new Label();

        label3.setText("test3");

        figure.add(label3);

        

        Label label4 = new Label();

        label4.setText("test4");

        figure.add(label4);

        

        Label label5 = new Label();

        label5.setText("test5");

        figure.add(label5);

        

        return figure;

}

效果如下：

GridLayout

GridLayout是网格布局，即将控件按照网格的形式排列，可以通过numColumns参数指定有几列。具体每个格子的大小可以通过GridData修改。代码如下：

protected IFigure createFigure() {

        // TODO Auto-generated method stub

        Figure figure = new Figure();

        

        GridLayout gridLayout = new GridLayout();

        gridLayout.numColumns = 2;

        figure.setLayoutManager(gridLayout);

        

        Label label1 = new Label();

        label1.setText("test1");

        figure.add(label1);

        

        GridData label_gd1 = new GridData();

        label_gd1.widthHint = 50;

        label_gd1.heightHint = 50;

        gridLayout.setConstraint(label1, label_gd1);

        

        Label label2 = new Label();

        label2.setText("test2");

        figure.add(label2);

        

        Label label3 = new Label();

        label3.setText("test3");

        figure.add(label3);

        

        Label label4 = new Label();

        label4.setText("test4");

        figure.add(label4);

        

        Label label5 = new Label();

        label5.setText("test5");

        figure.add(label5);

        

        return figure;

}

效果如下：

XYLayout

XYLayout是通过绝对坐标进行定位，在代码中指定每个控件的坐标即可。代码如下：

protected IFigure createFigure() {

        // TODO Auto-generated method stub

        Figure figure = new Figure();

        figure.setLayoutManager(new XYLayout());

        

        Label label1 = new Label();

        label1.setText("test1");

        figure.add(label1, new Rectangle(0, 0, 50, 50));

        

        Label label2 = new Label();

        label2.setText("test2");

        figure.add(label2, new Rectangle(25, 25, 50, 50));

        

        Label label3 = new Label();

        label3.setText("test3");

        figure.add(label3, new Rectangle(50, 50, 50, 50));

        

        Label label4 = new Label();

        label4.setText("test4");

        figure.add(label4, new Rectangle(75, 100, 50, 50));

        

        Label label5 = new Label();

        label5.setText("test5");

        figure.add(label5, new Rectangle(40, 75, 50, 50));

        

        return figure;

}

效果如下：