Ch03 Swing 套件的版面配置

Ch03 Swing套件的版面配置 物件導向系統實務

大綱 • 中間層容器 • JPanel類別 • JScrollPane類別 • 版面配置管理員 • BorderLayout版面配置 • FlowLayout版面配置 • CardLayout版面配置 • GridLayout版面配置 • GridBagLayout版面配置 • BoxLayout版面配置

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

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

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

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

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

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

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

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

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

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

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

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

範例1:使用BorderLayout • import javax.swing.*; • import java.awt.*; • import java.awt.event.*; • public class Ch07_01 extends JFrame • {public Ch07_01() • {super("Ch07_01第一個視窗程式加上Panel物件"); • Container c = getContentPane(); • c.setBackground(Color.blue); • BorderLayout border2 = new BorderLayout(); • JButton button1 = new JButton("1"); • JButton button2 = new JButton("2"); • JButton button3 = new JButton("3"); • JButton button4 = new JButton("4"); • JButton button5 = new JButton("5"); • JButton button6 = new JButton("6"); • JButton button7 = new JButton("7"); • JButton button8 = new JButton("8"); • JButton button9 = new JButton("9"); • JButton button10 = new JButton("10"); • c.setLayout(border2); • JPanel pane1 = new JPanel(); • FlowLayout flow = new FlowLayout(); • pane1.setLayout(flow); • pane1.add(button1); • pane1.add(button2); • pane1.add(button3); • pane1.add(button4); • pane1.add(button5); • c.add(pane1, border2.NORTH); • JPanel pane2 = new JPanel(); • BorderLayout border = new BorderLayout(); • pane2.setLayout(border); • pane2.add(button6, BorderLayout.NORTH); • pane2.add(button7, border.WEST); • pane2.add(button8, BorderLayout.EAST); • pane2.add(button9, BorderLayout.SOUTH); • pane2.add(button10, BorderLayout.CENTER); • c.add(pane2, border2.SOUTH); • } • Main(){}請自行處理 • }

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

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

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

範例2:使用GridLayout • import javax.swing.*; • import java.awt.*; • import java.awt.event.*; • public class Ch07_03 extends JFrame • { public Ch07_03() • { super("Ch07_03第一個視窗程式加上Panel物件"); • Container c = getContentPane(); • c.setBackground(Color.blue); • GridLayout grid = new GridLayout(2,1); • c.setLayout(grid); • JButton button1 = new JButton("1"); • JButton button2 = new JButton("2"); • JButton button3 = new JButton("3"); • JButton button4 = new JButton("4"); • JButton button5 = new JButton("5"); • JButton button6 = new JButton("6"); • JButton button7 = new JButton("7"); • JButton button8 = new JButton("8"); • JButton button9 = new JButton("9"); • JButton button10 = new JButton("0"); • JButton button11 = new JButton("="); • JButton button12 = new JButton("+"); • JTextField text1 = new JTextField(100); • JPanel pane1 = new JPanel(); • pane1.add(text1); • c.add(pane1); • JPanel pane2 = new JPanel(); • GridLayout grid2 = new GridLayout(4,3); • pane2.setLayout(grid2); • pane2.add(button1); • pane2.add(button2); • pane2.add(button3); • pane2.add(button4); • pane2.add(button5); • pane2.add(button6); • pane2.add(button7); • pane2.add(button8); • pane2.add(button9); • pane2.add(button10); • pane2.add(button11); • pane2.add(button12); • c.add(pane2); • } • Main(){}自行整理 • }

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

GridBagLayout版面配置-建構子與方法 • GridBagLayout和GridBagConatraints類別的建構子，如下表所示： • GridBagLayout類別的相關方法，如下表所示：

GridBagLayout版面配置-成員變數1

GridBagLayout版面配置-成員變數2

import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Ch07_04 extends JFrame { public Ch07_04() { super("Ch07_04:使用GridBagLayout"); Container c = getContentPane(); c.setBackground(Color.blue); GridBagLayout gridbag = new GridBagLayout(); GridBagConstraints gbc = new GridBagConstraints(); c.setLayout(gridbag); //設定按鈕元件 JButton button1 = new JButton("1"); JButton button2 = new JButton("2"); JButton button3 = new JButton("3"); JButton button4 = new JButton("4"); JButton button5 = new JButton("5"); JButton button6 = new JButton("6"); JButton button7 = new JButton("7"); JButton button8 = new JButton("8"); JButton button9 = new JButton("9"); JButton button10 = new JButton("0"); JButton button11 = new JButton("="); JButton button12 = new JButton("+"); JButton button13 = new JButton("-"); JButton button14 = new JButton("x"); JButton button15 = new JButton("/"); JTextField text1 = new JTextField(30); 範例3:使用GridBagLayout(1/3)

//將按鈕填在視窗上 gbc.fill = GridBagConstraints.BOTH; gbc.ipady = 30; gbc.weighty = 0; gbc.gridwidth = 4; gbc.gridx = 0; gbc.gridy = 0; gridbag.setConstraints(text1, gbc); c.add(text1); gbc.weighty = 1; gbc.gridwidth = 1; gbc.gridx = 0; gbc.gridy = 1; gridbag.setConstraints(button1, gbc); c.add(button1); gbc.gridx = 1; gridbag.setConstraints(button2, gbc); c.add(button2); gbc.gridx = 2; gridbag.setConstraints(button3, gbc); c.add(button3); gbc.gridx = 3; gridbag.setConstraints(button12, gbc); c.add(button12); gbc.gridx = 0; gbc.gridy = 2; gridbag.setConstraints(button4, gbc); c.add(button4); gbc.gridx = 1; gridbag.setConstraints(button5, gbc); c.add(button5); gbc.gridx = 2; gridbag.setConstraints(button6, gbc); c.add(button6); gbc.gridx = 3; gridbag.setConstraints(button13, gbc); c.add(button13); gbc.gridx = 0; gbc.gridy = 3; gridbag.setConstraints(button7, gbc); c.add(button7); gbc.gridx = 1; gridbag.setConstraints(button8, gbc); c.add(button8); 範例3:使用GridBagLayout(2/3)

gbc.gridx = 2; gridbag.setConstraints(button9, gbc); c.add(button9); gbc.gridx = 3; gridbag.setConstraints(button14, gbc); c.add(button14); gbc.gridx = 0; gbc.gridy = 4; gridbag.setConstraints(button10, gbc); c.add(button10); gbc.gridwidth = 2; gbc.gridx = 1; gbc.gridy = 4; gridbag.setConstraints(button11, gbc); c.add(button11); gbc.gridwidth = 1; gbc.gridx = 3; gbc.gridy = 4; gridbag.setConstraints(button15, gbc); c.add(button15); } public static void main(String [] args) { Ch07_04 app = new Ch07_04(); app.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent evt) { System.exit(0); } } ) ; app.setSize(100, 150); app.setVisible(true); } } 範例3:使用GridBagLayout(3/3)

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

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

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

import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Ch07_05 extends JFrame { JPanel cards; public Ch07_05() { super("Ch07_05:CardLayout版面配置"); Container c = getContentPane(); c.setLayout(new BorderLayout(2, 2)); JPanel up_jp = new JPanel(); JButton button1 = new JButton("第一頁"); button1.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { CardLayout c1 = (CardLayout)(cards.getLayout()); c1.first(cards); } } ) ; up_jp.add(button1); JButton button2 = new JButton("下一頁"); button2.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { CardLayout c1 = (CardLayout)(cards.getLayout()); c1.next(cards); } } ) ; up_jp.add(button2); JButton button3 = new JButton("上一頁"); button3.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { CardLayout c1 = (CardLayout)(cards.getLayout()); c1.previous(cards); } } ) ; up_jp.add(button3); JButton button4 = new JButton("最後一頁"); button4.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt) { CardLayout c1 = (CardLayout)(cards.getLayout()); c1.last(cards); } } ) ; up_jp.add(button4); c.add(up_jp, BorderLayout.NORTH); 範例4:使用CardLayout(1/2)

//建立卡片組 cards = new JPanel(); cards.setLayout(new CardLayout()); //第一組卡片 JPanel jp1 = new JPanel(); jp1.add(new JLabel("第一張卡")); //第二組卡片 JPanel jp2 = new JPanel(); jp2.add(new JLabel("第二張卡")); //第三組卡片 JPanel jp3 = new JPanel(); jp3.add(new JLabel("第三張卡")); //第四組卡片 JPanel jp4 = new JPanel(); jp4.add(new JLabel("第四張卡")); //第五組卡片 JPanel jp5 = new JPanel(); jp5.add(new JLabel("第五張卡")); cards.add(jp1, "1"); cards.add(jp2, "2"); cards.add(jp3, "3"); cards.add(jp4, "4"); cards.add(jp5, "5"); c.add(cards, BorderLayout.SOUTH); } public static void main(String [] args) { Ch07_05 app = new Ch07_05(); app.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent evt) { System.exit(0); } } ); app.setSize(300, 150); app.setVisible(true); } } 範例4:使用CardLayout(2/2)

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

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

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

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

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

Swing元件的框線-建立物件

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);

Ch03 Swing 套件的版面配置