【插件開發】—— 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);
 } }

View Code

　　固然，最好是參考前幾篇例子，能夠真正體會到佈局的妙處！