Java 入門指南 - 排版管理員

GUI 程式有數個部份需要顧及,分別是視窗用的小工具 (widget) 、排版 (layout) 與事件 (event)




小工具就是我們前面介紹的各種視窗元件,這些都是物件 (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 則留言:

Unknown 提到...

版主 您好:我想請問一個問題是有關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();
}
}

詳細的資料如以下網址:

連結

Kaiching Chang 提到...

請到 G+ 社群或 FB 社團提出吧!