Grid Bag Layout

(Steven Shi, hi.steven@gmail.com ,2002/05/18)

 

Java提供的版面配置方式有FlowLayout、GridLayout、BorderLayout、CardLayout、BoxLayout及GridBagLayout，在這些Layout Manager裡，除了Grid Bag Layout外，都不需要輔助類別就可以搞定，唯獨Grid Bag Layout需要一個稱為GridBagConstraints的類別來設定其元件的各項屬性，所以Grid Bag Layout也就成為所有版面配置式中最複雜的一個。

底下先列出所有GridBagConstraints類別的欄位，再用一些samples來解釋Grid Bag Layout的使用方式。

 

欄位

作用

int anchor

當元件小於其顯示區域時才用

static int BOTH

重新訂定元件之寬度及高度

static int CENTER

將元件置於顯示區域之中央位置

static int EAST

將元件置於顯示區域之右側位置，並於垂直做置中對齊

int fill

當顯示區域大於元件所需之大小才用此欄位

int gridheight

指定元件顯示區域之列數

int gridwidth

指定元件顯示區域之行數

int gridx

指定元件顯示區域左側之表格

int gridy

指定元件顯示區域上方之表格

static int HORIZONTAL

重新設定元件之水平位置

Insets insets

指定元件外側之間距

int ipadx

指定元件內側之間距x

int ipady

指定元件內側之間距y

static int NONE

表示元件之大小位置不重新設定

static int NORTH

將元件置於顯示區域之上方位置，並於水平做置中對齊

static int NORTHEAST

將元件置於顯示區域之右上角

static int NORTHWEST

將元件置於顯示區域之左上角

static int RELATIVE

指定元件為其行或列上最後一個元件之下一個元件，或上一次增加元件之下一個元件

static int REMAINDER

指定元件為其行或列上之最後一個元件

static int SOUTH

將元件置於顯示區域之下方位置，並於水平做置中對齊

static int SOUTHEAST

將元件置於顯示區域之右下方位置

static int SOUTHWEST

將元件置於顯示區域之左下方位置

static int VERTICAL

重新設定元件之垂直位置，但不設定其水平位置

double weightx

指定其它水平空間的配置方式

double weighty

指定其它垂直空間的配置方式

static int WEST

將元件置於顯示區域之左側位置，並於垂直做置中對齊

 

*    範列1: gridx、gridy

gridx與gridy是用以指定元件的相對位置，由範例1可以看出當gridx及gridy的值變化時，對於Button的位置的改變，gridx和gridy的值是相對的，也就是說gridx值越大的排在越右邊，gridy越大的排在越下面。

 

import java.awt.*;

 

public class Sample1 extends Frame {

  public Sample1() {

    GridBagLayout gridbag = new GridBagLayout();

    GridBagConstraints cons = new GridBagConstraints();

    setLayout(gridbag);

 

    cons.gridy = 3;

    Button btn1 = new Button("Button1");

    gridbag.setConstraints(btn1, cons);

    this.add(btn1);

 

    cons.gridy = 2;

    cons.gridx = 4;

    Button btn2 = new Button("Button2");

    gridbag.setConstraints(btn2, cons);

    this.add(btn2);

 

    cons.gridy = 2;

    cons.gridx = 1;

    Button btn3 = new Button("Button3");

    gridbag.setConstraints(btn3, cons);

    this.add(btn3);

 

    cons.gridy = 4;

    Button btn4 = new Button("Button4");

    gridbag.setConstraints(btn4, cons);

    this.add(btn4);

 

    this.setSize(300, 500);

    this.pack();

    this.show();

  }

  public static void main(String[] args) {

    Sample1 sample11 = new Sample1();

  }

}

 

Sample1執行結果

 

*    範例2: gridwidth、gridheight、fill

gridwidth和gridheight是用來指定元件的相對大小，由範例2可以看出，當gridwidth和gridheight變化時，元件大小的變化。cons.fill = GridBagConstraints.BOTH是指元件將剩餘空間填滿的意思。

 

import java.awt.*;

 

public class Sample2 extends Frame {

 

  public Sample2() {

    GridBagLayout gridbag = new GridBagLayout();

    GridBagConstraints cons = new GridBagConstraints();

    setLayout(gridbag);

 

    cons.fill = GridBagConstraints.BOTH;

 

    cons.gridy = 1;

    cons.gridwidth = 1;

    Button btn1 = new Button("Button1");

    gridbag.setConstraints(btn1, cons);

    this.add(btn1);

 

    cons.gridwidth = 2;

    Button btn2 = new Button("Button2");

    gridbag.setConstraints(btn2, cons);

    this.add(btn2);

 

    cons.gridy = 2;

    cons.gridwidth = 1;

    Button btn3 = new Button("Button3");

    gridbag.setConstraints(btn3, cons);

    this.add(btn3);

 

    Button btn4 = new Button("Button4");

    gridbag.setConstraints(btn4, cons);

    this.add(btn4);

 

    Button btn5 = new Button("Button5");

    gridbag.setConstraints(btn5, cons);

    this.add(btn5);

 

    cons.gridy = 1;

    cons.gridheight = 2;

    Button btn6 = new Button("Button6");

    gridbag.setConstraints(btn6, cons);

    this.add(btn6);

 

    this.pack();

    this.show();

  }

  public static void main(String[] args) {

    Sample2 sample21 = new Sample2();

  }

}

 

Sample2執行結果

 

*    範例3: weightx、wieghty

weightx、weighty設定的是權值，是當外框大小改變時，其內元件變化的倍數值，當weightx、weighty值為0時，元件不會改變大小，如果值大於0則與其它也大於0的元件比較後，依權值大小決定變化的程度。

試著改變weightx、weighty並在程式執行時，透過拖曳改變Frame大小，就可看出weightx、weighty對元件大小的影響。

 

import java.awt.*;

 

public class Sample3 extends Frame {

 

  public Sample3() {

    GridBagLayout gridbag = new GridBagLayout();

    GridBagConstraints cons = new GridBagConstraints();

    setLayout(gridbag);

 

    cons.fill = GridBagConstraints.BOTH;

 

    //cons.weightx = 1;

    cons.weighty = 1;

    cons.anchor = GridBagConstraints.EAST;

    cons.gridy = 1;

    cons.gridx = 1;

    Button btn1 = new Button("Button1");

    gridbag.setConstraints(btn1, cons);

    this.add(btn1);

 

    cons.gridy = 1;

    cons.gridx = 2;

    Button btn2 = new Button("Button2");

    gridbag.setConstraints(btn2, cons);

    this.add(btn2);

 

    cons.gridy = 1;

    cons.gridx = 3;

    Button btn3 = new Button("Button3");

    gridbag.setConstraints(btn3, cons);

    this.add(btn3);

 

    cons.gridy = 2;

    cons.gridx = 1;

    cons.weighty = 0.5;

    Button btn4 = new Button("Button4");

    gridbag.setConstraints(btn4, cons);

    this.add(btn4);

 

    cons.gridy = 2;

    cons.gridx = 2;

    cons.weighty = 0;

    Button btn5 = new Button("Button5");

    gridbag.setConstraints(btn5, cons);

    this.add(btn5);

 

    cons.gridy = 3;

    cons.gridx = 1;

    Button btn6 = new Button("Button6");

    gridbag.setConstraints(btn6, cons);

    this.add(btn6);

 

    this.setSize(300, 500);

    this.pack();

    this.show();

  }

  public static void main(String[] args) {

    Sample3 sample31 = new Sample3();

  }

}

 

Sample3執行結果

 

Sample3拖曳後的結果

 

*    範例4: anchor

anchor是用以指定在指定範圍裡，如果有空間，元件要靠那邊，可指定的值有GridBagConstraints.EAST、GridBagConstraints.WEST、GridBagConstraints.SOUTH、GridBagConstraints.NORTH及GridBagConstraints.CENTER。

試著改變範例4的anchor值，就可發現Button3的位置的改變。

 

import java.awt.*;

 

public class Sample4 extends Frame {

 

  public Sample4() {

    GridBagLayout gridbag = new GridBagLayout();

    GridBagConstraints cons = new GridBagConstraints();

    setLayout(gridbag);

 

    cons.gridy = 1;

    cons.gridx = 1;

    cons.gridwidth = 1;

    cons.gridheight = 1;

    Button btn1 = new Button("Button1");

    gridbag.setConstraints(btn1, cons);

    this.add(btn1);

 

    cons.gridy = 1;

    cons.gridx = 2;

    cons.gridwidth = 2;

    Button btn2 = new Button("Button2");

    gridbag.setConstraints(btn2, cons);

    this.add(btn2);

 

    //cons.anchor = GridBagConstraints.SOUTH;

    cons.anchor = GridBagConstraints.NORTH;

    cons.gridy = 1;

    cons.gridx = 4;

    cons.gridheight = 2;

    cons.gridwidth = 1;

    Button btn3 = new Button("Button3");

    gridbag.setConstraints(btn3, cons);

    this.add(btn3);

 

    cons.gridy = 2;

    cons.gridx = 2;

    cons.gridheight = 1;

    Button btn4 = new Button("Button4");

    gridbag.setConstraints(btn4, cons);

    this.add(btn4);

 

    this.pack();

    this.show();

  }

  public static void main(String[] args) {

    Sample4 sample41 = new Sample4();

  }

}

 

Sample4執行結果 (cons.anchor = GridBagConstraints.NORTH)

 

Sample4執行結果 (cons.anchor = GridBagConstraints. SOUTH)

 

*    範例5: ipadx、ipady

ipadx、ipady是用以指定元件最小寬度、高度外，要再加多少? 當指定了ipadx、ipady後，元件的寬度會是最小寬度加2*ipadx，高度會是最小高度加2*ipady，單位是pixel。

 

import java.awt.*;

 

public class Sample5 extends Frame {

 

  public Sample5() {

    GridBagLayout gridbag = new GridBagLayout();

    GridBagConstraints cons = new GridBagConstraints();

    setLayout(gridbag);

 

    Button btn1 = new Button("Button1");

    gridbag.setConstraints(btn1, cons);

    this.add(btn1);

 

    cons.ipadx = 100;

    cons.ipady = 50;

    Button btn2 = new Button("Button2");

    gridbag.setConstraints(btn2, cons);

    this.add(btn2);

 

    this.pack();

    this.show();

  }

  public static void main(String[] args) {

    Sample5 sample51 = new Sample5();

  }

}

 

Sample5執行結果