Eclipse Plug-in - How to use SashForm, FormData to create FormLayout

今天要探討的是如何利用SashForm來分割SWT Widgets達到做調整splitter(橫桿 or 直桿)動作,

再加上設定FormData來處理FormLayout內SWT Widgets排版。這次的範例將使用上一篇提到

的Graph example來修改!

首先,上一篇使用的排版為GridLayout,左側的List及右側的Graph之間的splitter是不可調整

的!  當使用SashForm包進這兩個widgets後,此splitter就可以自由移動調整大小,再加上設定

FormData進行排版!




相關程式碼修改如下:
  1. //1. split Layout to two columns
  2. parent.setLayout(new FormLayout());
  3. Text statusTxt = new Text(parent, SWT.LEFT | SWT.READ_ONLY);
  4. statusTxt.setText("Hello!!");
  5. FormData form = new FormData();
  6. form.left = new FormAttachment(0,0);
  7. form.right = new FormAttachment(100,0);
  8. form.top = new FormAttachment(statusTxt,0);
  9. form.bottom = new FormAttachment(100,0);
  10. SashForm composite = new SashForm(parent, SWT.HORIZONTAL);
  11. composite.setLayoutData(form);
  12. //2. create SWT List and set layout
  13. .....
  14. composite.setWeights(new int[]{1,4});

首先,請將上一篇範例的註解//1. split Layout to two columns該區塊的code註解掉

只須set FormLayout(),再來加上Text來新增一狀態列

接著,為了SashForm的排版需定義FormData

SashForm設定為水平排版,因此還需設定左側的List與右側的Graph各占多少比例

由composite.setWidgets(...)表示,若為兩個元件就定義初始化int塞入兩個數值,以此類推

FormData部分屆時會set進SashForm的Layout內,因此請以它的角度去思考,即

form.top => new FormAttachment(statusTxt, 0)
上方是狀態列

form.right => new FormAttachment(100, 0)
右方自動延伸至底

form.right => new FormAttachment(0, 0)
左方不動

form.bottom => new FormAttachment(100, 0)
下方自動延伸至底

至於為何了解要定義這些FormAttachment,除了參考官方範例外,另外參數怎知要塞什麼?

因為假設SashForm最後沒做setLayoutData的動作,UI會變成這樣


由上圖可知,SashForm與Text狀態列將重疊在一起,且SashForm並沒有自動放大

由官方API可以得知

FormAttachment(int numerator, int offset)

在這邊使用的第一個參數為分子,而查了一下底層code其分母預設是帶100

可以理解成這是一放大比例,在這邊我填入右側及下側皆為100,因此為放大比率對照整

個Layout為100%大小

PS. 在List及Graph內setLayoutData請註解掉,本來是set GridData的設定

留言