Ch03 Swing 套件的版面配置

Y

>_<

IY

一 ,一

I

Ch03 Swing套件的版面配置

物件導向系統實務

Y

>_<IY

一 ,一

I

大綱• 中間層容器

– JPanel類別– JScrollPane類別

• 版面配置管理員– BorderLayout版面配置– FlowLayout版面配置– CardLayout版面配置– GridLayout版面配置– GridBagLayout版面配置– BoxLayout版面配置

Y

>_<IY

一 ,一

I

Swing的中間層容器類別• Swing套件的中間層容器類別的目的是將

Swing元件群組化，以便使用”版面配置管理員”來編排新增的 GUI元件， Swing套件提供相當多種中間層容器類別。–例如： JPanel、 JScrollPane、 JSplitPane、

JTabbedPane和 JInternalFrame等。

Y

>_<IY

一 ,一

I

JPanel類別 -說明與建構子• JPanel類別屬於一般用途的中間層容器，預設為透明、沒有背景色彩，這是一種看不見的中間層容器類別，預設使用FlowLayout版面配置，其使用方式類似ContentPane類別， JPanel類別的建構子，如下表所示：

建構子說明JPanel()

JPanel(LayoutManager)建立 JPanel物件，參數設定 JPanel物件使

用的版面配置

Y

>_<IY

一 ,一

I

JPanel類別 -方法• JPanel關於版面配置的相關方法，如下表所示：

方法說明void setLayout(LayoutManager) 設定 JPanel使用的版面配置

LayoutManager getLayout() 取得 JPanel的版面配置

Y

>_<IY

一 ,一

I

JScrollPane類別 -說明與建構子

• JScrollPane類別擁有捲動軸，可以顯示更大尺寸的 Swing元件。例如： JTextArea文字區域因為可以輸入整篇文章，所以需要 JScrollPane新增捲動軸功能來檢視這篇文章。 JScrollPane類別的建構子，如下表所示：

建構子說明JScrollPane()

JScrollPane(Component)JScrollPane(int, int)

JScrollPane(Component, int, int)

建立 JScrollPane物件，參數 Component

是用來捲動的元件，2個整數參數是捲動方式的常數

Y

>_<IY

一 ,一

I

JScrollPane類別 -方法• JScrollPane類別的相關方法，如下表所示：

方法說明void setViewportView(Component) 設定 JScrollPane捲動的目標元件void setVerticalScrollBarPolicy(int)

int getVerticalScrollBarPolicy()設定和取得 JScrollPane垂直方向

捲動軸的顯示方式void setHorizontalScrollBarPolicy(int)

int getHorizontalScrollBarPolicy()設定和取得 JscrollPane水平方向捲

動軸的顯示方式void setViewportBorder(Border)

Border getViewportBorder()設定和取得捲動範圍的框線

Y

>_<IY

一 ,一

I

Swing元件的版面配置管理員 -說明

• 「版面配置管理員」（ Layout Manager）可以編排新增到 ContentPane物件和中間層容器的 Swing元件，版面配置管理員設定容器內各元件的尺寸和位置，不同的版面配置管理員擁有不同預設的編排方式，只需依照需求選擇使用的版面配置管理員，就可以編排出漂亮的 GUI介面。

Y

>_<IY

一 ,一

I

Swing元件的版面配置管理員 -說明• JComponent類別關於版面配置的相關方法，如下表所示：

方法說明void setPreferredSize(Dimension)

Dimension getPreferredSize()設定和取得最佳尺寸

void setMaximumSize(Dimension)Dimension getMaximumSize()

設定和取得最大尺寸

void setMinimumSize(Dimension)Dimension getMinimumSize()

設定和取得最小尺寸

void setAlignmentX(float)float getAlignmentX()

設定和取得 X軸的對齊方式，參數值範圍是 0~1，0.5為置中

void setAlignmentX(float)float getAlignmentX()

設定和取得 Y軸的對齊方式，參數值範圍是 0~1，0.5為置中

void setLayout(LayoutManager)LayoutManager getLayout()

設定和取得使用的版面配置

Y

>_<IY

一 ,一

I

FlowLayout版面配置 -說明• FlowLayout水流式版面配置屬於一種簡易的版面配置方式， JPanel預設使用這種版面配置。 FlowLayout版面配置依序在同一列放置元件，並沒有任何特殊編排，如果元件超過邊界，就置於下一列。

Y

>_<IY

一 ,一

I

FlowLayout版面配置 -建構子

• FlowLayout類別的建構子，如下表所示：建構子說明

FlowLayout()FlowLayout(int)

FlowLayout(int, int, int)

建立 FlowLayout物件，如果只有 1個 int參數是對齊方式，3個 int參數，新增的 2個

分別為水平和垂直間隙

Y

>_<IY

一 ,一

I

BorderLayout版面配置 -說明 1

• BorderLayout邊界式版面配置是將元件放置在中間（ Center），然後在北（ North）、南（ South）、東（ East）和西（West）的 4個邊界放置元件，如下圖所示：

Y

>_<IY

一 ,一

I

BorderLayout版面配置 -說明 2• 容器類別如果使用 BorderLayout版面配置（這是 JFrame的 ContentPane預設的版面配置），在 JComponent類別的 add()方法就需要第 2個參數來指定版面配置方式，如下所示：c.add(new JButton("北按鈕 "),

BorderLayout.NORTH);

• 上述程式碼的第 2個參數是元件放置的位置。

Y

>_<IY

一 ,一

I

BorderLayout版面配置 -建構子與方法• BorderLayout類別的建構子，如下表所示：

• BorderLayout類別的相關方法，如下表所示：

建構子說明BorderLayout()

BorderLayout(int, int)建立 BorderLayout物件，2個 int參數指定水

平和垂直間隙

方法說明void setHgap(int) 設定參數的水平間隙void setVgap(int) 設定參數的垂直間隙

Y

>_<IY

一 ,一

I

範例 1:使用 BorderLayout1. import javax.swing.*;

2. import java.awt.*;

3. import java.awt.event.*;

4. public class Ch07_01 extends JFrame

5. { public Ch07_01()

6. { super("Ch07_01第一個視窗程式加上 Panel物件 ");

7. Container c = getContentPane();

8. c.setBackground(Color.blue);

9. BorderLayout border2 = new BorderLayout();

10. JButton button1 = new JButton("1");










20. c.setLayout(border2);

18. JPanel pane1 = new JPanel();

19. FlowLayout flow = new FlowLayout();

20. pane1.setLayout(flow);

21. pane1.add(button1);





26. c.add(pane1, border2.NORTH);


28. BorderLayout border = new BorderLayout();

29. pane2.setLayout(border);

30. pane2.add(button6, BorderLayout.NORTH);

31. pane2.add(button7, border.WEST);

32. pane2.add(button8, BorderLayout.EAST);

33. pane2.add(button9, BorderLayout.SOUTH);

34. pane2.add(button10, BorderLayout.CENTER);

35. c.add(pane2, border2.SOUTH);

36. }

37. Main(){ }請自行處理38. }

Y

>_<IY

一 ,一

I

• GridLayout格子式版面配置是使用相等尺寸的長方形，以表格方式分為幾列和幾欄來編排 Swing元件，如下圖所示：

GridLayout版面配置 -說明

Y

>_<IY

一 ,一

I

GridLayout版面配置 -建構子

• GridLayout類別的建構子，如下表所示：

建構子說明GridLayout(int, int)

GridLayout(int, int, int, int)建立 GridLayout物件，前 2個 int參數為列數和欄數，不能為 0，後 2個 int參數是水

平和垂直間隙

Y

>_<IY

一 ,一

I

GridLayout版面配置 -相關方法

• GridLayout類別的相關方法，如下表所示：

方法說明int getColumns() 取得欄數

int getRows() 取得列數int getHgap() 取得水平間隙int getVgap() 取得垂直間隙

Y

>_<IY

一 ,一

I

範例 2:使用 GridLayout1. import javax.swing.*;

2. import java.awt.*;

3. import java.awt.event.*;

4. public class Ch07_03 extends JFrame

5. { public Ch07_03()

6. { super("Ch07_03第一個視窗程式加上 Panel物件 ");

7. Container c = getContentPane();

8. c.setBackground(Color.blue);

9. GridLayout grid = new GridLayout(2,1);

10. c.setLayout(grid);











21. JButton button11 = new JButton("=");

22. JButton button12 = new JButton("+");

23. JTextField text1 = new JTextField(100);


2. pane1.add(text1);

3. c.add(pane1);


5. GridLayout grid2 = new GridLayout(4,3);

6. pane2.setLayout(grid2);













19. c.add(pane2);

20. }

21. Main(){}自行整理22. }

Y

>_<IY

一 ,一

I

• GridBagLayout格子袋式版面配置屬於比較複雜的版面配置，類似 GridLayout可以將元件分為欄和列排列，不過列和欄並不需等高或等寬，而且可以使用GridBagConstraints類別設定成員變數來指定元件的顯示位置。

GridBagLayout版面配置 -說明

Y

>_<IY

一 ,一

I

GridBagLayout版面配置 -建構子與方法

• GridBagLayout和 GridBagConatraints類別的建構子，如下表所示：

• GridBagLayout類別的相關方法，如下表所示：

建構子說明GridBagLayout() 建立 GridBagLayout物件

GridBagConstraints() 建立 GridBagConstraints物件

方法說明void setConstraints(Component,

GridBagConstraints)設定參數 Component元件使用的 GridBagConstraints物

件

Y

>_<IY

一 ,一

I

GridBagLayout版面配置 -成員變數1成員變數說明

girdxgridy

指定元件放置的位置是在哪一欄和哪一列，左上角的欄 gridx 為 0，列 gridy為 0

gridwidthgridheight

指定元件放置的位置佔用幾欄和幾列，預設值為 1，相關常數的說明，如下所示：

GridBagConstraints.REMS I NDER ：欄或列的最後 1

個。

GridBagConstraints.RELATI VE：欄或列中下一個到最後。

fill 調整元件在顯示區域的尺寸，相關常數的說明，如下所示：

GridBagConstraints.NONE：不需要，預設值。

GridBagConstraints.HORI ZONTAL：調整寬度填滿顯示區域，但不更改高度。

GridBagConstraints.VERTI CAL：調整高度填滿顯示區域，但不更改寬度。

GridBagConstraints.BOTH：調整元件填滿顯示區域。

Y

>_<IY

一 ,一

I

GridBagLayout版面配置 -成員變數2

ipadxipady

指定內部填充的距離，預設值為 0，填充是套用在元件的 2邊

insets 指定元件的外部填充，預設沒有，這是元件和顯示區域邊界的距離

anchor 元件如果小於顯示區域，可以指定元件位置，相關常數的說明，如下所示：

GridBagConstraints.CENTER：置中，預設值。

GridBagConstraints.NORTH：北。

GridBagConstraints.NORTHEAST：東北。

GridBagConstraints.EAST：東。

GridBagConstraints.SOUTHEAST：東南。

GridBagConstraints.SOUTH：南。

GridBagConstraints.SOUTHWEST：西南。

GridBagConstraints.WEST：西。

GridBagConstraints.NORTHWEST：西北。

weightxweighty

設定欄和列中元件分配空間的權值，其範圍是 0.0~1.0，值愈大表示元件在欄和列中可以取得更多空間

Y

>_<IY

一 ,一

I

範例 3:使用 GridBagLayout(1/3)1. import javax.swing.*;2. import java.awt.*;3. import java.awt.event.*;

4. public class Ch07_04 extends JFrame 5. {6. public Ch07_04()7. {8. super("Ch07_04:使用 GridBagLayout");9. Container c = getContentPane();10. c.setBackground(Color.blue);11. GridBagLayout gridbag = new GridBagLayout();12. GridBagConstraints gbc = new GridBagConstraints(); 13. c.setLayout(gridbag);

//設定按鈕元件14. JButton button1 = new JButton("1");15. JButton button2 = new JButton("2");16. JButton button3 = new JButton("3");17. JButton button4 = new JButton("4");18. JButton button5 = new JButton("5");19. JButton button6 = new JButton("6");20. JButton button7 = new JButton("7");21. JButton button8 = new JButton("8");22. JButton button9 = new JButton("9");23. JButton button10 = new JButton("0");24. JButton button11 = new JButton("=");25. JButton button12 = new JButton("+");26. JButton button13 = new JButton("-");27. JButton button14 = new JButton("x");28. JButton button15 = new JButton("/");29. JTextField text1 = new JTextField(30);

Y

>_<IY

一 ,一

I

範例 3:使用 GridBagLayout(2/3)//將按鈕填在視窗上30. gbc.fill = GridBagConstraints.BOTH;31. gbc.ipady = 30;32. gbc.weighty = 0;33. gbc.gridwidth = 4;34. gbc.gridx = 0;35. gbc.gridy = 0;36. gridbag.setConstraints(text1, gbc);37. c.add(text1);

38. gbc.weighty = 1;39. gbc.gridwidth = 1;40. gbc.gridx = 0;41. gbc.gridy = 1;42. gridbag.setConstraints(button1, gbc);43. c.add(button1);

44. gbc.gridx = 1;45. gridbag.setConstraints(button2, gbc);46. c.add(button2);

47. gbc.gridx = 2;48. gridbag.setConstraints(button3, gbc);49. c.add(button3);50. 51. gbc.gridx = 3;52. gridbag.setConstraints(button12, gbc);53. c.add(button12);

• gbc.gridx = 0;54. gbc.gridy = 2;55. gridbag.setConstraints(button4, gbc);56. c.add(button4);


60. gbc.gridx = 2;61. gridbag.setConstraints(button6, gbc);62. c.add(button6);63. 64. gbc.gridx = 3;65. gridbag.setConstraints(button13, gbc);66. c.add(button13);

67. gbc.gridx = 0;68. gbc.gridy = 3;69. gridbag.setConstraints(button7, gbc);70. c.add(button7);


Y

>_<IY

一 ,一

I

範例 3:使用 GridBagLayout(3/3)74. gbc.gridx = 2;75. gridbag.setConstraints(button9, gbc);76. c.add(button9);77. 78. gbc.gridx = 3;79. gridbag.setConstraints(button14, gbc);80. c.add(button14);

81. gbc.gridx = 0;82. gbc.gridy = 4;83. gridbag.setConstraints(button10, gbc);84. c.add(button10);

85. gbc.gridwidth = 2;86. gbc.gridx = 1;87. gbc.gridy = 4;88. gridbag.setConstraints(button11, gbc);89. c.add(button11);

90. gbc.gridwidth = 1;91. gbc.gridx = 3;92. gbc.gridy = 4;93. gridbag.setConstraints(button15, gbc);94. c.add(button15);95. }

96. public static void main(String [] args)97. {98. Ch07_04 app = new Ch07_04();99. app.addWindowListener(new WindowAdapter()100. {101. public void windowClosing(WindowEvent evt)102. {103. System.exit(0);104. }105. } ) ;106. app.setSize(100, 150);107. app.setVisible(true);108. }109. }

Y

>_<IY

一 ,一

I

CardLayout版面配置 -說明• CardLayout卡片式版面配置如同一張一張名片，它可以將 Swing元件分配到一張張的不同卡片，每次只顯示一張卡片中的Swing元件。

Y

>_<IY

一 ,一

I

CardLayout版面配置 -建構子• CardLayout不同於其它版面配置，每次只能在 JFrame視窗顯示部分元件。 CardLayout類別的建構子，如下表所示：建構子說明

CardLayout()CardLayout(int, int)

建立 CardLayout物件，2個 int參數分別為水平和垂直間隙

Y

>_<IY

一 ,一

I

CardLayout版面配置 -相關方法• CardLayout類別的相關方法主要是瀏覽卡片的方法，如下表所示：

方法說明void first(Container) 第 1張卡片void next(Container) 下一張卡片void previous(Container) 前一張卡片void last(Container) 最後 1張卡片void show(Container, String) 顯示指定參數 String名稱的卡片

Y

>_<IY

一 ,一

I

範例 4:使用 CardLayout(1/2)1. import javax.swing.*;2. import java.awt.*;3. import java.awt.event.*;

4. public class Ch07_05 extends JFrame 5. {6. JPanel cards;7. public Ch07_05()8. {9. super("Ch07_05:CardLayout版面配置 ");10. Container c = getContentPane();11. c.setLayout(new BorderLayout(2, 2));12. 13. JPanel up_jp = new JPanel();14. JButton button1 = new JButton("第一頁 ");15. button1.addActionListener(new ActionListener()16. {17. public void actionPerformed(ActionEvent evt)18. {19. CardLayout c1 = (CardLayout)(cards.getLayout());20. c1.first(cards);21. }22. } ) ;23. up_jp.add(button1);

24. JButton button2 = new JButton("下一頁 ");25. button2.addActionListener(new ActionListener()26. {27. public void actionPerformed(ActionEvent evt)28. {29. CardLayout c1 = (CardLayout)(cards.getLayout());30. c1.next(cards);31. }32. } ) ;33. up_jp.add(button2);

34. JButton button3 = new JButton("上一頁 ");35. button3.addActionListener(new ActionListener()36. {37. public void actionPerformed(ActionEvent evt)38. {39. CardLayout c1 = (CardLayout)(cards.getLayout());40. c1.previous(cards);41. }42. } ) ;43. up_jp.add(button3);

44. JButton button4 = new JButton("最後一頁 ");45. button4.addActionListener(new ActionListener()46. {47. public void actionPerformed(ActionEvent evt)48. {49. CardLayout c1 = (CardLayout)(cards.getLayout());50. c1.last(cards);51. }52. } ) ;53. up_jp.add(button4);

54. c.add(up_jp, BorderLayout.NORTH);

Y

>_<IY

一 ,一

I

範例 4:使用 CardLayout(2/2)55. //建立卡片組56. cards = new JPanel();57. cards.setLayout(new CardLayout());

58. //第一組卡片59. JPanel jp1 = new JPanel();60. jp1.add(new JLabel("第一張卡 "));

61. //第二組卡片62. JPanel jp2 = new JPanel();63. jp2.add(new JLabel("第二張卡 "));

64. //第三組卡片65. JPanel jp3 = new JPanel();66. jp3.add(new JLabel("第三張卡 "));

67. //第四組卡片68. JPanel jp4 = new JPanel();69. jp4.add(new JLabel("第四張卡 "));

70. //第五組卡片71. JPanel jp5 = new JPanel();72. jp5.add(new JLabel("第五張卡 "));

73. cards.add(jp1, "1");74. cards.add(jp2, "2");75. cards.add(jp3, "3");76. cards.add(jp4, "4");77. cards.add(jp5, "5");78. c.add(cards, BorderLayout.SOUTH); 79. }

80. public static void main(String [] args)81. {82. Ch07_05 app = new Ch07_05();83. app.addWindowListener(new WindowAdapter()84. {85. public void windowClosing(WindowEvent evt)86. { System.exit(0); }87. } );88. app.setSize(300, 150);89. app.setVisible(true);90. }91. }

Y

>_<IY

一 ,一

I

BoxLayout版面配置 -說明• BoxLayout盒式版面配置是 Swing套件的一般用途版面配置，可以使用水平或垂直方式，如同堆積木般的編排元件，它可以說是一種完整功能的FlowLayout。

Y

>_<IY

一 ,一

I

BoxLayout版面配置 -建構子• BoxLayout類別的建構子，如下表所示：

建構子說明BoxLayout(Container, int) 建立 BoxLayout物件，Container參數是使

用的容器物件，int參數指定排列方式是水平或垂直，相關常數的說明，如下所示：

BoxLayout.X_ AXI S：由左到右。

BoxLayout.Y_ AXI S：由上到下。

Box(int) 建立 Box物件，可以使用在 BoxLayout的容器物件，參數 int是上述排列方式的常數

Y

>_<IY

一 ,一

I

BoxLayout版面配置 -類別方法• Box類別常用的類別方法，如下表所示：

方法說明static Box createHorizontalBox() 建立由左到右的 Box物件

static Box createVerticalBox() 建立由上到下的 Box物件

static ComponentcreateRigidArea(Dimension)

建立固定尺寸的 Component物件，尺寸是參數的 Dimension物件

static ComponentcreateHorizontalGlue()

建立水平膠水的 Component物件

static ComponentcreateVerticalGlue()

建立垂直膠水的 Component物件

Y

>_<IY

一 ,一

I

Swing元件的框線 -說明• Swing容器類別或元件都是繼承自 JComponent，所以都有一或多個圍繞在邊界的框線，這些框線並非單純圍繞在元件外的線條，它可以加上標題文字或增加元件周圍的空間，以便變化出更多樣化的元件編排。

Y

>_<IY

一 ,一

I

Swing元件的框線 -相關方法• JComponent類別的 setBorder()方法可以替元件新增框線，相關方法如下表所示：

方法說明void setBorder(Border) 設定元件使用的框線，參數是 Border物件

Border getBorder() 取得元件使用框線的 Border物件

Y

>_<IY

一 ,一

I

Swing元件的框線 -建立物件方法說明

Border createLineBorder(Color)Border createLineBorder(Color, int)

建立線條的框線，參數 Color是色彩，參數 int是框線寬度

Border createEtchedBorder()Border createEtchedBorder(Color, Color)

建立立體效果的框線，2個 Color

參數分別為亮面和暗面的框線色彩

Border createEmptyBorder()Border createEmptyBorder(int, int, int, int)

建立隱藏的框線，4個 int參數為上、下、左、右方空間的尺寸，如

果沒有參數表示尺寸為 0

TitledBorder createTitledBorder(String)TitledBorder createTitledBorder(Border)TitledBorder createTitledBorder(Border,

String)TitledBorder createTitledBorder(Border,

String, int, int)TitledBorder createTitledBorder(Border,

String, int, int, Font)TitledBorder createTitledBorder(Border,

String, int, int, Font, Color)

建立擁有標題文字的框線，參數String是標題文字，Border是使用的框線物件，最後的 Font和 Color

參數是標題文字的字型與色彩，中間 2個 int參數為對齊方式和位置

CompoundBordercreateCompoundBorder(Border, Border)

將 2種 Border物件組合成混合框線，參數是 2個 Border物件

Y

>_<IY

一 ,一

I

Swing元件的框線 -建立物件範例• 建立各種框線的 Border、 TitledBorder或

CompoundBorder物件，如下所示：bLine=BorderFactory.createLineBorder(Color.blue);etchedLine=BorderFactory.createEtchedBorder();TitledBorder titledLine;titledLine=BorderFactory.createTitledBorder(bLine, "標題 ");

emptyLine=BorderFactory.createEmptyBorder();………Border compoundLine =

BorderFactory.createCompoundBorder(etchedLine, redLine);

Documents

Ch03 Swing 套件的版面配置