Ch03 Swing 套件的版面配置
-
Upload
evangeline-sweeney -
Category
Documents
-
view
58 -
download
0
description
Transcript of 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");
11. JButton button2 = new JButton("2");
12. JButton button3 = new JButton("3");
13. JButton button4 = new JButton("4");
14. JButton button5 = new JButton("5");
15. JButton button6 = new JButton("6");
16. JButton button7 = new JButton("7");
17. JButton button8 = new JButton("8");
18. JButton button9 = new JButton("9");
19. JButton button10 = new JButton("10");
20. c.setLayout(border2);
18. JPanel pane1 = new JPanel();
19. FlowLayout flow = new FlowLayout();
20. pane1.setLayout(flow);
21. pane1.add(button1);
22. pane1.add(button2);
23. pane1.add(button3);
24. pane1.add(button4);
25. pane1.add(button5);
26. c.add(pane1, border2.NORTH);
27. JPanel pane2 = new JPanel();
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);
11. JButton button1 = new JButton("1");
12. JButton button2 = new JButton("2");
13. JButton button3 = new JButton("3");
14. JButton button4 = new JButton("4");
15. JButton button5 = new JButton("5");
16. JButton button6 = new JButton("6");
17. JButton button7 = new JButton("7");
18. JButton button8 = new JButton("8");
19. JButton button9 = new JButton("9");
20. JButton button10 = new JButton("0");
21. JButton button11 = new JButton("=");
22. JButton button12 = new JButton("+");
23. JTextField text1 = new JTextField(100);
1. JPanel pane1 = new JPanel();
2. pane1.add(text1);
3. c.add(pane1);
4. JPanel pane2 = new JPanel();
5. GridLayout grid2 = new GridLayout(4,3);
6. pane2.setLayout(grid2);
7. pane2.add(button1);
8. pane2.add(button2);
9. pane2.add(button3);
10. pane2.add(button4);
11. pane2.add(button5);
12. pane2.add(button6);
13. pane2.add(button7);
14. pane2.add(button8);
15. pane2.add(button9);
16. pane2.add(button10);
17. pane2.add(button11);
18. pane2.add(button12);
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);
57. gbc.gridx = 1;58. gridbag.setConstraints(button5, gbc);59. c.add(button5);
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);
71. gbc.gridx = 1;72. gridbag.setConstraints(button8, gbc);73. c.add(button8);
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);