Java的UI設計——Swing組件

Swing組件設計UI

java中具有一套非常實用的組件——Swing，利用其中的少量組件就可以設計出基礎的UI。

• 基礎窗口的創建——窗體JFrame類
• 在窗口里傳達信息——標簽JLabel類
• 進行簡單的動作——按鈕JButton類
• 設計體面的布局——布局管理器

 

基礎窗口的創建——窗體JFrame類

要設計UI，開始當然應該是窗體。在Java中，創建窗體有兩種組件：JFrame與JDialog。JDialog類的本意是用於從一個窗口彈出另一個窗口（類似於彈出的信息窗），和JFrame的功能很相似，在一般的情況下使用JFrame類就可以了。

要創建JFrame類型的窗體，第一步就是構造一個繼承JFrame類的類：

 public class testJFrame extends Jframe{ 2 ... 3 } 

構造窗體的方法就要在這個類里實現。是的，構造窗體需要利用方法，而不是簡單地創建一個對象就可以的。要使得構造一個最基本的可視的窗體，方法應該至少具有如下內容：

public class testJFrame extends Jframe{
    public void createJFrameWindow(){
        JFrame jf = new JFrame();   //創建新JFrame對象
        jf.setVisible(true);        //使得該對象指向的窗體可見
    }
}

在主方法里調用該方法，就會在屏幕的最左上角獲得一個窗體：

 

 

 

JFrame類中自帶了很多自定義窗體的方法。在構造對象的時候就可以填入String參數來為你的窗體定義標題，你也可以用JFrame.setName(String s)方法來重新設定標題。

然后是為窗體設定尺寸。JFrame自帶的方法JFrame.setBound(int x,int y,int width,int height)來修改。x，y代表窗體生成時其最左上角（含標題欄在內）的坐標，width，height分別代表窗體的寬與高。

最后，在顯示窗體的同時，我們還得為窗口被關閉時執行的動作進行設定：使用JFrame.setDefaultCloseOperation(int operation)來進行設定。在這里，可以填寫4個常量：
DISPOSE_ON_CLOSE：在窗口被關閉時釋放其資源。
DO_NOTHING_ON_CLOSE：什么也不做。
HIDE_ON_CLOSE：僅隱藏窗口。
EXIT_ON_CLOSE：關閉窗口則結束程序。
如果不用這個方法進行設置，默認為HIDE_ON_CLOSE。

對於窗體自身來說，需要設定的最基礎的東西就這么多。其它的內容稍后再說。

現在來試試之前的代碼：

public class testJFrame extends JFrame{
    public void createJFrameWindow(){
        JFrame jf = new JFrame();           //創建新JFrame對象
        jf.setBounds(600, 300, 400, 300);   //設定窗口的尺寸
        jf.setVisible(true);                //使得該對象指向的窗體可見
        jf.setDefaultCloseOperation(DISPOSE_ON_CLOSE);//設定窗口被關閉時的默認動作
    }
    public static void main(String args[]){
        new testJFrame().createJFrameWindow();
    }
}

運行上述代碼的結果如圖：

 

 

 

在窗口里傳達信息——標簽JLabel類

JLabel類用於傳遞文字圖片等信息，是窗體內最常見的組件。最常用的JLabel構造為JLabel(String s)

字符串s即將在窗體中顯示的字符串。
JLabel類還可以用於顯示圖片，不過這點以后再說。
來把它加進我們的程序里

public class testJFrame extends JFrame{
    public void createJFrameWindow(){
        JFrame jf = new JFrame("樣例");       //創建新JFrame對象
        jf.setBounds(600, 300, 400, 300);   //設定窗口的尺寸
        jf.setVisible(true);                //使得該對象指向的窗體可見
        jf.setDefaultCloseOperation(DISPOSE_ON_CLOSE);//設定窗口被關閉時的默認動作
        JLabel jl = new JLabel("這是一個JLabel類對象");
    }
    public static void main(String args[]){
        new testJFrame().createJFrameWindow();
    }
}

進行簡單的動作——按鈕JButton類

一個窗口如果想要和用戶交互，那么JButton類必不可少。最基本的構造一個JButton類對象的方法是
JButton(String s)
字符串s就是即將顯示在按鈕上的字樣。

那么…既然准備了按鈕，那怎么着也應該讓按鈕有點做用吧？點上去好歹動一動，什么的。
為了達成這個目的，我們需要對按鈕添加事件監聽器。具體方法如下：

JButton.addActionListener(new ActionListener(){
    @Override
    public void actionPerformed(ActionEvent arg0) {
        你的方法
    }
});

這樣一來就可以在按鈕被點擊的時候執行你的方法了。
我們把它添加進我們的代碼里：

public class testJFrame extends JFrame{
    public void createJFrameWindow(){
        JFrame jf = new JFrame("樣例");       //創建新JFrame對象
        jf.setBounds(600, 300, 400, 300);   //設定窗口的尺寸
        jf.setVisible(true);                //使得該對象指向的窗體可見
        jf.setDefaultCloseOperation(DISPOSE_ON_CLOSE);//設定窗口被關閉時的默認動作
        JLabel jl = new JLabel("這是一個JLabel類對象");
        JButton jb = new JButton("確定");
        jb.addActionListener(new ActionListener(){
            @Override
            public void actionPerformed(ActionEvent arg0) {
                jf.dispose();               //關閉窗口並釋放資源
            }
        });
    }
    public static void main(String args[]){
        new testJFrame().createJFrameWindow();
    }
}

其中按鈕上添加的事件是關閉該窗口並釋放其資源。

離一個夠看的窗體越來越近了！接下來我們只要把剛剛弄好的對象添加到窗口里…

設計體面的布局——布局管理器

之前創建了一個JLabel標簽、一個JButton按鈕，但是實際上我們的窗體還是光禿禿的。要怎么把它們添加到窗體上呢？

是時候搬出我們的“容器”啦。

光是創建窗體還不夠，我們還要為窗體添加一個容器。

Container.c = JFramer.getContentPane();

通過這個方法，我們的容器c就成為了指定窗體專用的容器了。

在指定了容器之后，我們就可以往容器里添加部件。

c.add(Object o);

通過這樣的方式添加新部件，全部添加完成之后再調用setVisible(boolean b)方法，就可以看到一個有標簽有按鈕的窗體啦！

public class testJFrame extends JFrame{
    public void createJFrameWindow(){
        JFrame jf = new JFrame("樣例");       //創建新JFrame對象
        jf.setBounds(600, 300, 400, 300);   //設定窗口的尺寸
        JLabel jl = new JLabel("這是一個JLabel類對象");
        JButton jb = new JButton("確定");
        jb.addActionListener(new ActionListener(){
            @Override
            public void actionPerformed(ActionEvent arg0) {
                jf.dispose();               //關閉窗口並釋放資源
            }
        });
        Container c = jf.getContentPane();
        c.add(jl);
        c.add(jb);
        jf.setVisible(true);                //使得該對象指向的窗體可見
        jf.setDefaultCloseOperation(DISPOSE_ON_CLOSE);//設定窗口被關閉時的默認動作
    }
    public static void main(String args[]){
        new testJFrame().createJFrameWindow();
    }
}

 

 

怎么變成這樣了？

這是因為我們還沒有指定窗體的布局管理器，默認的布局管理器是邊界布局管理器。在這種默認布局（邊界-中心填充）下，組件會從中心鋪開，直到與其他組件的邊緣相接。

為了讓我們的窗體好看一點，我們最好是換一下布局管理器。通過setLayout(manager)方法，我們就可以設定我們的布局管理器。

最常用易懂的兩種是流式布局和絕對布局。

絕對布局很簡單，當你沒有manager的時候，你的布局就是絕對定型的。這個時候就需要手動設置每個組件的位置，利用每個組件自己的setBounds(int x, int y, int width, int height)方法來確定位置。注意，這里的x，y與窗體的不同，是相對於窗體的坐標。

public class testJFrame extends JFrame{
    public void createJFrameWindow(){
        JFrame jf = new JFrame("樣例");       //創建新JFrame對象
        jf.setBounds(600, 300, 400, 300);   //設定窗口的尺寸
        JLabel jl = new JLabel("這是一個JLabel類對象");
        JButton jb = new JButton("確定");
        jb.addActionListener(new ActionListener(){
            @Override
            public void actionPerformed(ActionEvent arg0) {
                jf.dispose();               //關閉窗口並釋放資源
            }
        });
        jf.setLayout(null);                 //設定布局管理器
        jl.setBounds(140, 100, 200, 50);    //設定絕對坐標
        jb.setBounds(100, 200, 200, 50);    //設定絕對坐標
        Container c = jf.getContentPane();  //獲取窗口的容器
        c.add(jl);                          //添加組件
        c.add(jb);                          //添加組件
        jf.setVisible(true);                //使得該對象指向的窗體可見
        jf.setDefaultCloseOperation(DISPOSE_ON_CLOSE);//設定窗口被關閉時的默認動作
    }
    public static void main(String args[]){
        new testJFrame().createJFrameWindow();
    }
}

執行這樣的代碼，就會獲得一個這樣的窗口：

 

 

只要修改setBounds的參數，就可以自由修改它們的位置。

那么流式布局呢？流式布局即，如流水一般地按次序擺放組件，從左到右，從上到下。設定它的方法如下：

JFrame.setLayout(new FlowLayout(constructor));

其中FlowLayout()具有三種不同的實現：

public FlowLayout();
public FlowLayout(int alignment);
public FlowLayout(int alignment, int horizGap, int vertGap);
alignment表示對齊方式：0表示左對齊，1表示居中對齊，2表示右對齊。
horizGap和vertGap分別表示不同組件之間的橫向間隔和縱向間隔。

如果我們把上述代碼的布局部分替換成：
 jf.setLayout(new FlowLayout(1,10,10));//設置布局管理器 

那么實際運行的效果就是：

 

 而且，不像死板的絕對布局，當窗口被拉伸時，它的布局也一樣會變化：

 

 這就是它相對於絕對布局方便的地方。

總結

JFrame、JLabel、JButton可以說是Swing中最最基本的組件，它們可以構成很多精彩的UI的基礎。Swing中還有其他的組件，例如：

JCheckBox 復選框組件
JTextField 文本框組件
JPasswordField 密碼框組件
JTextArea 文本區域組件
JPanel 面板組件
JScrollPanel 滾動條面板組件
JRadioButton 單選按鈕組件
JCheckBox 復選框組件
它們的使用方法（當然，最基礎三者的詳細方法也）都可以在API文檔里查找。雖然這篇博客的主要目的是給健忘的自己留個筆記，如果能幫到你的話也請隨意使用：）

 

附加兩個實例

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.KeyEvent;

public class Calculator extends JFrame {
    private JTextArea text;
    public Calculator(){
        super("文本編輯器");
        Dimension dim = getToolkit().getScreenSize();     //獲取尺寸
        this.setBounds(dim.width/4,dim.height/4,dim.width/2,dim.height/2);
        this.setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.text=new JTextArea("歡迎");
        this.add(new JScrollPane(text));    //自動加滾動條
        this.setJMenuBar(getMenuTest2());
        setVisible(true);
    }
    private JMenuBar getMenuTest2(){
        //主菜單
        JMenuBar menubar=new JMenuBar();
        JMenu file=new JMenu("file");
        JMenu edit=new JMenu("edit");
        JMenu help=new JMenu("help");
        menubar.add(file);
        menubar.add(edit);
        menubar.add(help);
        //file
        JMenuItem open=new JMenuItem("open");
        open.setAccelerator(KeyStroke.getKeyStroke(KeyEvent.VK_O, ActionEvent.CTRL_MASK));
        JMenuItem newfile=new JMenuItem("new");
        JMenuItem save=new JMenuItem("save");
        JMenuItem exit=new JMenuItem("exit");
        file.add(open);
        file.add(newfile);
        file.add(save);
        file.addSeparator();  //添加分割線
        file.add(exit);
        //edit
        edit.add(new JCheckBoxMenuItem("bold"));
        edit.add(new JCheckBoxMenuItem("italic"));
        JMenu menuColor= new JMenu("color");    //子菜單,管理顏色
        edit.add(menuColor);
        ButtonGroup buttongroup=new ButtonGroup();  //單選框組
        JRadioButtonMenuItem red=new JRadioButtonMenuItem("red");
        buttongroup.add(red);
        menuColor.add(red);
        JRadioButtonMenuItem green=new JRadioButtonMenuItem("green");
        buttongroup.add(green);
        menuColor.add(green);
        JRadioButtonMenuItem blue=new JRadioButtonMenuItem("blue");
        buttongroup.add(blue);
        menuColor.add(blue);
        //help
        JMenuItem about=new JMenuItem("about");
        JMenuItem ahelp=new JMenuItem("view the help");
        help.add(about);
        help.add(ahelp);
        return menubar;
    }
    public static void main(String[] args) {
        // TODO 自動生成的方法存根
        Calculator t=new Calculator();
    }
}

執行結果：

 

 

import javax.swing.*;

public class UI_helloWorld extends JFrame {
    private JLabel jLabel;
    private JTextField jTextField;
    private JButton jButton;

    public UI_helloWorld()
    {
        super();     //父類的構造方法
        this.setSize(300, 200);     //窗口大小
        this.getContentPane().setLayout(null);
        this.add(getJLabel(), null);
        this.add(getJTextField(), null);
        this.add(getJButton(), null);
        this.setTitle("UI_helloWorld");
    }

    private javax.swing.JLabel getJLabel() {
        if(jLabel == null) {
            jLabel = new javax.swing.JLabel();
            jLabel.setBounds(34, 49, 53, 18); //(x,y,width,height)
            jLabel.setText("Name:");
        }
        return jLabel;
    }

    private javax.swing.JTextField getJTextField() {
        if(jTextField == null) {
            jTextField = new javax.swing.JTextField();
            jTextField.setBounds(96, 49, 160, 20);
        }
        return jTextField;
    }

    private javax.swing.JButton getJButton() {
        if(jButton == null) {
            jButton = new javax.swing.JButton();
            jButton.setBounds(103, 110, 71, 27);
            jButton.setText("OK");
        }
        return jButton;
    }

    public static void main(String[] args)
    {
        UI_helloWorld w = new UI_helloWorld();
        w.setVisible(true);                         //設為可見
    }
}

執行結果：