【插件開發】—— 7 SWT布局詳解，不能再詳細了！

前文回顧：

1 插件學習篇

2 簡單的建立插件工程以及模型文件分析

3 利用擴展點，開發透視圖

4 SWT編程須知

5 SWT簡單控件的使用與布局搭配

6 SWT復雜空間與布局搭配

　　前面幾篇都提到了SWT的布局，布局系統也為規整的UI提供了保障。那么如何設計一個布局呢？

　　Eclipse的布局機制，提供了兩個對象概念，Layout（描述內部布局方式）以及GridData（描述本身布局方式）。

　　什么是Layout?

　　首先說一下Layout,layout定義了一個空間內部的布局格式。比如我們把箱子作為一個整體，那么箱子內部該怎么去設計，怎么放置東西進去，就需要用layout來指定。

　　

　　而常用的布局方式，就包括FillLayout,gridLayout,RowLayout,以及FormLayout。

　　下面就針對這幾種布局進行一下介紹：

　　Filllayout

　　也叫做填充布局，它會讓里面的子空間以填充的方式進行布局。

　　比如我們采用如下的設計方式：

FillLayout layout = new FillLayout();
shell.setLayout(layout);
for(int i=0;i<10;i++){
    Button button = new Button(shell,SWT.PUSH);
    button.setText("Button"+i);
}

　　正常的布局是這樣的：

　　經過拉伸就變成了這樣：

 

　　RowLayout

　　也叫行布局，它會讓內部的子空間以行為單位進行排列，遇到邊界時，自動換成下一行。

　　　　 RowLayout layout = new RowLayout();
        shell.setLayout(layout);
        for(int i=0;i<10;i++){
            Button button = new Button(shell,SWT.PUSH);
            Image img = new Image(null,"icons\\ok.png");
            button.setImage(img);
            button.setText("Button"+i);
        }

　　得到的結果是這樣的：

　　當壓縮邊界的時候，會自動換行

　　GridLayout

　　也叫做網格布局，它以規定網格的形式，指定每一行有多少列，元素會以每列幾個的方式進行排列，超出的部分擠到下一行。

　　

    　　 GridLayout layout = new GridLayout();
        layout.numColumns = 3;
        shell.setLayout(layout);
        for(int i=0;i<10;i++){
            Button button = new Button(shell,SWT.PUSH);
            Image img = new Image(null,"icons\\ok.png");
            button.setImage(img);
            button.setText("Button"+i);
        }        

　　當指定每行有3個子控件時，無論怎么改變窗口的大小，都不會改變排列的方式

　

　　當改變窗口大小時，不會發生變化

 

　　FormLayout

　　感覺這個是最難使用的了，它會以一個Form表單的形式提供布局。先看一下使用方式吧：

    　　 FormLayout layout = new FormLayout();
        shell.setLayout(layout);
        
        Button cancelButton = new Button(shell,SWT.PUSH);
        cancelButton.setText("Cancel");
        FormData formData1 = new FormData();
        formData1.right = new FormAttachment(100,-5); //第一個數字式百分比，也就是說  【寬度-5】
        formData1.bottom = new FormAttachment(100,-5); //第一個數字式百分比，也就是說  【高度-5】
        cancelButton.setLayoutData(formData1);
        
        Button okButton = new Button(shell,SWT.PUSH);
        okButton.setText("OK");
        FormData formData2 = new FormData();
        formData2.right = new FormAttachment(100,-60);
        formData2.bottom = new FormAttachment(100,-5);
        okButton.setLayoutData(formData2);
        
        Text text = new Text(shell,SWT.MULTI | SWT.BORDER | SWT.V_SCROLL | SWT.H_SCROLL);
        FormData formData3 = new FormData();
        formData3.top = new FormAttachment(0,5);
        formData3.bottom = new FormAttachment(cancelButton,-5);//底部距離 【底部控件-5個像素】
        formData3.left = new FormAttachment(0,5);
        formData3.right = new FormAttachment(100,-5);
        text.setLayoutData(formData3);
        Color color = new Color(null,255,0,0);
        text.setForeground(color);    

　　可以看到他提供了一個FormData的布局方式，通過FormAttachment實現，這個類需要兩個參數，第一個是寬度（left或者right）或者高度（top或者bottom）的百分比，第二個參數是它相對加上的值。如果是負數，就是減去的像素值。而且提供Control類型的參數，也就是控件類型的參數。如果第一個參數指定一個控件，比如上面指定的那個bottom，那么他會自動獲取這個控件對應的高度，在進行加減。

　　這樣就保證了，某些控件的相對位置保持不變。

　　下面看一下效果：

拉伸后編程

 

　　什么是GridData呢？又該如何使用呢？

　　下面介紹一下GridData，這個也是一個重量級的參數：

　　這個參數用於指定目標如何擺放，它描述了以表格為單位的布局。

　　它描述了空間本身的一個布局擺放的方式：

　　並且搭配之前的GridLayout布局，通過每行有幾列的方式，控制布局。先看一下都有什么參數，以及參數描述的意義：

　　GridData griddata = new GridData(SWT.FILL,SWT.FILL,false,false,1,1);

　　一般都是上面這樣的參數格式：

　　第一個參數：水平方向如何對齊

　　第二個參數：豎直方向如何對齊

　　第三個參數：是否占用水平的剩余空間

　　第四個參數：是否占用豎直的剩余空間

　　第五個參數：水平的列數

　　第六個參數：豎直的行數

　　這樣一來，舉個例子就簡單了。

　　比如我們指定了一個表格是三行三列的，那么通過設定

　　第一個控件參數是（SWT.FILL,SWT.FILL,false,false,1,1）;

　　第二個參數是（SWT,SWT,false,false,1,2）;

　　第三個參數是（SWT.FILL_BOTH）;

　　第四個得到如下的布局：（SWT.FILL,SWT.FILL,false,false,1,1）;

 

　　這樣我們得到如下的布局：

　　感覺上面的圖頓時拉低了文章的檔次，湊合看吧。可以看到第二個控件，通過指定真的占用了兩列。

　　但是第三個的FILL_BOTH並沒有按照預期占用了剩余的所有控件，這就說明，填充布局還是不會垮行到下一列的布局的。

 

　　另外添加兩個小知識，就是使用顏色以及圖片。

　　顏色通常使用RGB來指定：

Color color = new Color(null,255,0,0);
text.setForeground(color);

　　顏色的第一參數是Device，可以填寫為null；

　　而圖片也圖普通的控件一樣，需要指定一個ImgData來指定圖片的URL即可：

Image img = new Image(null,"icons\\ok.png");
button.setImage(img);

 

　　下面是這個例子所用到的代碼：

package com.xingoo.plugin.swttest.test;

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.Image;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.layout.RowLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

import com.xingoo.plugin.swttest.Abstract.AbstractExample;

public class LayoutTest extends AbstractExample{
    public static void main(String[] args) {
        new LayoutTest().run();
    }

    public void todo(Shell shell) {
        //////////////////////////////////////////////////////
        //FillLayout
        //////////////////////////////////////////////////////
//        FillLayout layout = new FillLayout();
//        shell.setLayout(layout);
//        for(int i=0;i<10;i++){
//            Button button = new Button(shell,SWT.PUSH);
//            button.setText("Button"+i);
//            
////            Image img = new Image(null,"icons\\ok.png");
////            button.setImage(img);
//        }
        //////////////////////////////////////////////////////
        //RowLayout
        //////////////////////////////////////////////////////
//        RowLayout layout = new RowLayout();
//        shell.setLayout(layout);
//        for(int i=0;i<10;i++){
//            Button button = new Button(shell,SWT.PUSH);
//            Image img = new Image(null,"icons\\ok.png");
//            button.setImage(img);
//            button.setText("Button"+i);
//        }
        //////////////////////////////////////////////////////
        //GridLayout
        //////////////////////////////////////////////////////
//        GridLayout layout = new GridLayout();
//        layout.numColumns = 3;
//        shell.setLayout(layout);
//        for(int i=0;i<10;i++){
//            Button button = new Button(shell,SWT.PUSH);
//            Image img = new Image(null,"icons\\ok.png");
//            button.setImage(img);
//            button.setText("Button"+i);
//        }
        GridLayout layout = new GridLayout();
        layout.numColumns = 3;
        shell.setLayout(layout);
        Button btn1 = new Button(shell,SWT.PUSH);
        GridData gd1 = new GridData(SWT.FILL,SWT.FILL,false,false,1,1);
        gd1.widthHint = 100;
        gd1.heightHint = 100;
        btn1.setLayoutData(gd1);
        Button btn2 = new Button(shell,SWT.PUSH);
        GridData gd2 = new GridData(SWT.FILL,SWT.FILL,false,false,1,2);
        gd2.widthHint = 100;
        gd2.heightHint = 100;
        btn2.setLayoutData(gd2);
        Button btn3 = new Button(shell,SWT.PUSH);
        GridData gd3 = new GridData(GridData.FILL_BOTH);
//        gd3.widthHint = 100;
//        gd3.heightHint = 100;
        btn3.setLayoutData(gd3);
        Button btn4 = new Button(shell,SWT.PUSH);
        GridData gd4 = new GridData(SWT.FILL,SWT.FILL,false,false,1,1);
        gd4.widthHint = 100;
        gd4.heightHint = 100;
        btn4.setLayoutData(gd4);
        //////////////////////////////////////////////////////
        //FormLayout
        //////////////////////////////////////////////////////
//        FormLayout layout = new FormLayout();
//        shell.setLayout(layout);
//        
//        Button cancelButton = new Button(shell,SWT.PUSH);
//        cancelButton.setText("Cancel");
//        FormData formData1 = new FormData();
//        formData1.right = new FormAttachment(100,-5); //第一個數字式百分比，也就是說  【寬度-5】
//        formData1.bottom = new FormAttachment(100,-5); //第一個數字式百分比，也就是說  【高度-5】
//        cancelButton.setLayoutData(formData1);
//        
//        Button okButton = new Button(shell,SWT.PUSH);
//        okButton.setText("OK");
//        FormData formData2 = new FormData();
//        formData2.right = new FormAttachment(100,-60);
//        formData2.bottom = new FormAttachment(100,-5);
//        okButton.setLayoutData(formData2);
//        
//        Text text = new Text(shell,SWT.MULTI | SWT.BORDER | SWT.V_SCROLL | SWT.H_SCROLL);
//        FormData formData3 = new FormData();
//        formData3.top = new FormAttachment(0,5);
//        formData3.bottom = new FormAttachment(cancelButton,-5);//底部距離 【底部控件-5個像素】
//        formData3.left = new FormAttachment(0,5);
//        formData3.right = new FormAttachment(100,-5);
//        text.setLayoutData(formData3);
//        Color color = new Color(null,255,0,0);
//        text.setForeground(color);
    }
}

　　當然，最好是參考前幾篇例子，可以真正體會到布局的妙處！