小工具就是我們前面介紹的各種視窗元件,這些都是物件 (object) 。實際上, Java 的 GUI 排版與事件也是由物件來處理,計有以下的排版管理員
BorderLayout | 區域式版面配置 |
FlowLayout | 流動式版面配置 |
CardLayout | 卡片式版面配置 |
GridLayout | 格子式版面配置 |
GridBagLayout | 帶狀式版面配置 |
BoxLayout | 盒子式版面配置 |
這裡我們先介紹排版管理的類別,稍後再介紹事件處理相關的類別。
BorderLayout 把視窗分成五個區域,東、西、南、北、中,如果放入一個小工具,那個小工具就會填滿整個區域。 BorderLayout 也是 JFrame 預設的版面配置,因此無須額外設定就可以使用 BorderLayout 。
FlowLayout 是採流動式的編排,視窗中逐列安排視窗元素,每一列排完小工具後,就會移到下一列繼續。例如以下程式
import java.awt.*; import javax.swing.*; public class GUIDemo2 { public static void main(String[] args) { JFrame demo = new JFrame(); demo.setSize(400, 300); demo.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); demo.getContentPane().setLayout(new FlowLayout()); for (int i = 0; i < 27; i++) { JButton b = new JButton("" + i); demo.add(b); } demo.setVisible(true); } } /* 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:GUIDemo2.java 功能:示範 Java 程式 作者:張凱慶 時間:西元 2011 年 4 月 */
編譯執行
結果如下
首先, demo 的 contentPane 物件需要呼叫 setLayout() 方法,設定所要採用的版面編排方式,如果沒有做這項設定, demo 就會採預設的 BorderLayout
demo.getContentPane().setLayout(new FlowLayout());
這裡,我們直接在 setLayout() 中新建 FlowLayout 物件作為參數 (parameter) 。
然後,總共在 demo 中放入 27 個按鈕 (button)
for (int i = 0; i < 27; i++) { JButton b = new JButton("" + i); demo.add(b); }
由於這個例子只是單純的示範 FlowLayout ,因此所有小工具(視窗元件)都是直接加到視窗中,沒有保留對小工具的參考變數 (reference variable) 。
前面 25 個按鈕依序填滿前五列,我們可以看到最後兩個按鈕是置中對齊的,這也是 FlowLayout 預設的對齊方式。 FlowLayout 總共有三種對齊方式,分別是
FlowLayout.CENTER | 置中對齊 |
FlowLayout.LEFT | 向左對齊 |
FlowLayout.RIGHT | 向右對齊 |
若要採向左或向右的對齊方式,在 FlowLayout 的建構子 (constructor) 中就得提供相對應的參數。
其他的 CardLayout 、 GridLayout 、 BoxLayout 的編排類別 (class) ,我們就不詳細介紹了。
至於我們 EncryptorGUI 會採用 GridBagLayout 排版,這是所有編排類別中最複雜的一種,同時也能夠進行最精巧的排版控制。
嗯,好的,接下來我們就來看看如使用 GridBagLayout 吧!
中英文術語對照 | |
---|---|
小工具 | widget |
排版 | layout |
事件 | event |
物件 | object |
參數 | parameter |
按鈕 | button |
參考變數 | reference variable |
建構子 | constructor |
類別 | class |
您可以繼續參考
GUI 篇
相關目錄
回 Java 入門指南
回 Java 教材目錄
回首頁
參考資料
The JavaTM Tutorials: Getting Started
The JavaTM Tutorials: Learning the Java Language
The JavaTM Tutorials: Essential Classes
The Java Language Specification, Third Edition
本文於 2013 年 1 月訂正
2 則留言:
版主 您好:我想請問一個問題是有關GUI介面設計(GroupLayout)
圖片
介面如上圖所示,請問各位高手:我知道他是用GroupLayout所設計的,但我還是做不出他要的效果
以下是我的CODE碼:
package p04;
import java.awt.BorderLayout;
import javax.swing.JTextField;
import javax.swing.JButton;
import javax.swing.JTextArea;
import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.GroupLayout;
public class Guess_Number extends JFrame{
private JTextField text;
private JButton guess;
private JButton answer;
private JButton restart;
private JTextArea textarea;
private JPanel panel1;
private JPanel panel2;
public Guess_Number(){
super("猜數字");
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setSize(500, 300);
this.setVisible(true);
text = new JTextField();
guess = new JButton("猜數字");
guess.setSize(200, 25);
answer = new JButton("答案");
answer.setSize(80, 25);
restart = new JButton("重新開始");
restart.setSize(100, 25);
textarea = new JTextArea("", 10, 15);
textarea.setVisible(true);
panel2 = new JPanel();
panel2.add(textarea);
panel1 = new JPanel();
GroupLayout layout = new GroupLayout(panel1);
panel1.setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(GroupLayout.Alignment.LEADING)
.addGroup(layout.createSequentialGroup())
.addGap(50, 50, 50)
.addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING))
.addComponent(text)
.addComponent(guess)
.addGroup(layout.createSequentialGroup())
.addComponent(answer)
.addGap(20, 20, 20)
.addComponent(restart)
.addGap(50, 50, 50));
layout.setVerticalGroup(
layout.createParallelGroup(GroupLayout.Alignment.LEADING)
.addGroup(layout.createSequentialGroup())
.addGap(50, 50, 50)
.addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING))
.addComponent(text)
.addComponent(guess)
.addGroup(layout.createParallelGroup(GroupLayout.Alignment.BASELINE))
.addComponent(answer)
.addComponent(restart)
.addGap(50, 50, 50));
this.getContentPane().add(BorderLayout.WEST, panel1);
this.getContentPane().add(BorderLayout.EAST, panel2);
pack();
}
public static void main(String[] args){
new Guess_Number();
}
}
詳細的資料如以下網址:
連結
請到 G+ 社群或 FB 社團提出吧!
張貼留言