Java-GUI程式設計之Swing元件

愚生淺末發表於2022-05-04

JavaGUI程式設計元件

為元件設定邊框

很多情況下，我們常常喜歡給不同的元件設定邊框，從而讓介面的層次感更明顯，swing中提供了Border物件來代表一個邊框，下圖是Border的繼承體系圖：

特殊的Border：

TitledBorder:它的作用並不是直接為其他元件新增邊框，而是為其他邊框設定標題，建立該類的物件時，需要傳入一個其他的Border物件；
ComoundBorder:用來組合其他兩個邊框，建立該類的物件時，需要傳入其他兩個Border物件，一個作為內邊框，一個座位外邊框

給元件設定邊框步驟：

使用BorderFactory或者XxxBorder建立Border的例項物件；
呼叫Swing元件的setBorder（Border b）方法為元件設定邊框；

案例：

請使用Border實現下圖效果：

演示程式碼：

import javax.swing.*;
import javax.swing.border.*;
import java.awt.*;

public class BorderTest {

    JFrame jf  = new JFrame("測試邊框");

    public void init(){
        //設定Jframe為網格佈局
        jf.setLayout(new GridLayout(2,4));

        //建立凸起的斜邊框，分別設定四條邊的顏色
        Border bb = BorderFactory.createBevelBorder(BevelBorder.RAISED,Color.RED,Color.GREEN,Color.BLUE,Color.GRAY);
        jf.add(getPanelWithBorder(bb,"BevelBorder"));


        //建立LineBorder
        Border lb = BorderFactory.createLineBorder(Color.ORANGE, 10);
        jf.add(getPanelWithBorder(lb,"LineBorder"));

        //建立EmptyBorder，會在元件的四周留白
        Border eb = BorderFactory.createEmptyBorder(20, 5, 10, 30);
        jf.add(getPanelWithBorder(eb,"EmptyBorder"));

        //建立EtchedBorder，
        Border etb = BorderFactory.createEtchedBorder(EtchedBorder.RAISED, Color.RED, Color.GREEN);
        jf.add(getPanelWithBorder(etb,"EtchedBorder"));

        //建立TitledBorder,為原有的Border新增標題
        TitledBorder tb = new TitledBorder(lb,"測試標題",TitledBorder.LEFT,TitledBorder.BOTTOM,new Font("StSong",Font.BOLD,18),Color.BLUE);
        jf.add(getPanelWithBorder(tb,"TitledBorder"));

        //直接建立MatteBorder，它是EmptyBorder的子類，EmptyBorder是留白，而MatteBorder可以給留空的區域填充顏色
        MatteBorder mb = new MatteBorder(20,5,10,30,Color.GREEN);
        jf.add(getPanelWithBorder(mb,"MatteBorder"));

        //直接創建立CompoundBorder，將兩個邊框組合成新邊框
        CompoundBorder cb = new CompoundBorder(new LineBorder(Color.RED,8),tb);
        jf.add(getPanelWithBorder(cb,"CompoundBorder"));

        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        jf.pack();
        jf.setVisible(true);

    }
    public JPanel getPanelWithBorder(Border border,String borderName){
        JPanel jPanel = new JPanel();

        jPanel.add(new JLabel(borderName));

        //為panel設定邊框
        jPanel.setBorder(border);

        return jPanel;
    }
    public static void main(String[] args) {
        new BorderTest().init();
    }
}

使用JToolBar建立工具條

Swing 提供了JToolBar類來建立工具條，並且可以往JToolBar中新增多個工具按鈕。

JToolBar API:

方法名稱	方法功能
JToolBar( String name , int orientation)	建立一個名字為name，方向為orientation的工具條物件，其orientation的是取值可以是SwingConstants.HORIZONTAL或SwingConstants.VERTICAL
JButton add(Action a)	通過Action物件為JToolBar工具條新增對應的工具按鈕
addSeparator( Dimension size )	向工具條中新增指定大小的分隔符
setFloatable( boolean b )	設定工具條是否可以被拖動
setMargin(Insets m)	設定工具條與工具按鈕的邊距
setOrientation( int o )	設定工具條的方向
setRollover(boolean rollover)	設定此工具條的rollover狀態

add(Action a)方法：

上述API中add(Action a)這個方法比較難理解，為什麼呢，之前說過，Action介面是ActionListener的一個子介面，那麼它就代表一個事件監聽器，而這裡add方法是在給工具條新增一個工具按鈕，為什麼傳遞的是一個事件監聽器呢？

首先要明確的是不管是選單條中的選單項還是工具條中的工具按鈕，最終肯定是需要點選來完成一些操作，所以JToolBar以及JMenu都提供了更加便捷的新增子元件的方法add(Action a),在這個方法的內部會做如下幾件事：

建立一個適用於該容器的元件(例如，在工具欄中建立一個工具按鈕)；
從 Action 物件中獲得對應的屬性來設定該元件(例如，通過 name 來設定文字，通過 lcon 來設定圖示) ；
把Action監聽器註冊到剛才建立的元件上；

案例：

使用JToolBar元件完成下圖效果：

演示程式碼：

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

public class JToolBarTest {

    JFrame jf = new JFrame("測試工具條");

    JTextArea jta = new JTextArea(6, 35);
    // 建立工具條
    JToolBar jtb = new JToolBar();

    // 建立"上一曲"Action,該Action用於建立工具按鈕
    Action pre = new AbstractAction("上一曲", new ImageIcon("D:\\files\\Java-GUI\\src\\layout\\pre.png")) {
        @Override
        public void actionPerformed(ActionEvent e) {
            jta.append("上一曲.\n");
        }
    };

    // 建立"暫停" Action
    Action pause = new AbstractAction("暫停", new ImageIcon("D:\\files\\Java-GUI\\src\\layout\\pause.png")) {
        @Override
        public void actionPerformed(ActionEvent e) {
            jta.append("暫停播放.\n");
        }
    };

    // 建立"下一曲" Action
    Action next = new AbstractAction("下一曲", new ImageIcon("D:\\files\\Java-GUI\\src\\layout\\next.png")) {
        @Override
        public void actionPerformed(ActionEvent e) {
            jta.append("下一曲.\n");
        }
    };

    public void init() {

        // 給JTextArea新增滾動條
        jf.add(new JScrollPane(jta));

        // 以Action的形式建立按鈕，並將按鈕新增到Panel中
        JButton preBtn = new JButton(pre);
        JButton pauseBtn = new JButton(pause);
        JButton nextBtn = new JButton(next);

        // 往工具條中新增Action物件，該物件會轉換成工具按鈕
        jtb.add(preBtn);
        jtb.addSeparator();
        jtb.add(pauseBtn);
        jtb.addSeparator();
        jtb.add(nextBtn);

        // 向視窗中新增工具條
        jf.add(jtb, BorderLayout.NORTH);

        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        jf.pack();
        jf.setVisible(true);
    }

    public static void main(String[] args) {
        new JToolBarTest().init();
    }
}

JColorChooser和JFileChooser

Swing提供了JColorChooser和JFileChooser這兩種對話方塊，可以很方便的完成顏色的選擇和本地檔案的選擇。

JColorChooser

JColorChooser 用於建立顏色選擇器對話方塊，該類的用法非常簡單，只需要呼叫它的靜態方法就可以快速生成一個顏色選擇對話方塊：

public static Color showDialog(Component component, String title,Color initialColor)
    
/*
	引數：
		componet:指定當前對話方塊的父元件
		title：當前對話方塊的名稱
		initialColor：指定預設選中的顏色
		
	返回值：
		返回使用者選中的顏色
*/

案例：

使用顏色選擇器，完成下圖功能：

點選按鈕，改變文字域的背景色

演示程式碼：

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

public class JColorChooserDemo {

    JFrame jFrame = new JFrame("測試顏色選擇器");

    JTextArea jta = new JTextArea("快關注我",6,30);

    JButton button = new JButton(new AbstractAction("改變文字框的本景色"){

        @Override
        public void actionPerformed(ActionEvent e) {

            //彈出顏色選擇器
            Color result = JColorChooser.showDialog(jFrame, "顏色選擇器", Color.WHITE);
            jta.setBackground(result);
        }
    });

    public void init(){
        jFrame.add(jta);

        jFrame.add(button,BorderLayout.SOUTH);

        jFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        jFrame.pack();
        jFrame.setVisible(true);
    }

    public static void main(String[] args) {
        new JColorChooserDemo().init();
    }

}

JFileChooser

JFileChooser 的功能與AWT中的 FileDialog 基本相似，也是用於生成"開啟檔案"、"儲存檔案 "對話方塊。與 FileDialog 不同的是， JFileChooser 無須依賴於本地平臺的 GUI ，它由 100%純 Java 實現，在所有平臺上具有完全相同的行為，並可以在所有平臺上具有相同的外觀風格。

JFileChooser使用步驟：

建立JFileChooser物件：

JFileChooser chooser = new JFileChooser("D:\\a");//指定預設開啟的本地磁碟路徑

呼叫JFileChooser的一系列可選方法，進行初始化

setSelectedFile(File file)/setSelectedFiles(File[] selectedFiles):設定預設選中的檔案
setMultiSelectionEnabled(boolean b)：設定是否允許多選，預設是單選
setFileSelectionMode(int mode)：設定可以選擇內容，例如檔案、資料夾等，預設只能選擇檔案

開啟檔案對話方塊

showOpenDialog(Component parent):開啟檔案載入對話方塊，並指定父元件
showSaveDialog(Component parent):開啟檔案儲存對話方塊，並指定父元件

獲取使用者選擇的結果

File getSelectedFile():獲取使用者選擇的一個檔案
File[] getSelectedFiles():獲取使用者選擇的多個檔案

案例：

使用JFileChooser完成下圖效果：

演示程式碼：

import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class JFileChooserDemo {

    //建立視窗物件
    JFrame jf = new JFrame("測試JFileChooser");

    //建立開啟檔案對話方塊
    JFileChooser chooser = new JFileChooser(".");

    //建立選單條
    JMenuBar jmb = new JMenuBar();
    //建立選單
    JMenu jMenu = new JMenu("檔案");
    //建立選單項
    JMenuItem open = new JMenuItem(new AbstractAction("開啟"){

        @Override
        public void actionPerformed(ActionEvent e) {
            chooser.showOpenDialog(jf);
            File imageFile = chooser.getSelectedFile();
            try {
                image = ImageIO.read(imageFile);
                drawArea.repaint();
            } catch (IOException e1) {
                e1.printStackTrace();
            }
        }
    });

    JMenuItem save = new JMenuItem(new AbstractAction("另存為"){

        @Override
        public void actionPerformed(ActionEvent e) {
            chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
            chooser.showSaveDialog(jf);
            File dir = chooser.getSelectedFile();
            try {
                ImageIO.write(image,"jpeg",new File(dir,"a.jpg"));
            } catch (Exception e1) {
                e1.printStackTrace();
            }
        }
    });

    //用來記錄使用者選擇的圖片
    BufferedImage image;

    //顯示圖片
    class MyCanvas extends JPanel{
        @Override
        public void paint(Graphics g) {
            if (image!=null){
                g.drawImage(image,0,0,null);
            }
        }
    }

    JPanel drawArea = new MyCanvas();

    public void init(){
        //設定圖片顯示區域大小
        drawArea.setPreferredSize(new Dimension(500,300));
        jf.add(drawArea);

        //組裝並設定選單條
        jMenu.add(open);
        jMenu.add(save);
        jmb.add(jMenu);
        jf.setJMenuBar(jmb);

        //顯示jf
        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        jf.pack();
        jf.setVisible(true);
    }

    public static void main(String[] args) {
        new JFileChooserDemo().init();
    }    
      
}

JOptionPane

基本概述

通過 JOptionPane 可以非常方便地建立一些簡單的對話方塊， Swing 已經為這些對話方塊新增了相應的元件，無須程式設計師手動新增元件。 JOptionPane 提供瞭如下 4 個方法來建立對話方塊。

方法名稱	方法功能
showMessageDialog/showInternalMessageDialog	訊息對話方塊，告知使用者某事己發生，使用者只能單擊"確定"按鈕，類似於 JavaScript 的 alert 函式。
showConfirmDialog/showInternalConfirmDialog	確認對話方塊，向使用者確認某個問題，使用者可以選擇 yes 、 no ~ cancel 等選項。類似於 JavaScript 的 comfirm 函式。該方法返回使用者單擊了哪個按鈕
showInputDialog/showInternalInputDialog	輸入對話方塊，提示要求輸入某些資訊，類似於 JavaScript的 prompt 函式。該方法返回使用者輸入的字串。
showOptionDialog/showInternalOptionDialog	自定義選項對話方塊，允許使用自定義選項，可以取代showConfirmDialog 所產生的對話方塊，只是用起來更復雜。

上述方法都有都有很多過載形式，選擇其中一種最全的形式，引數解釋如下：

showXxxDialog(Component parentComponent,
		Object message, 
		String title, 
		int optionType, 
		int messageType,
        	Icon icon,
		Object[] options, 
		Object initialValue)
--引數解釋：
parentComponent：當前對話方塊的父元件
message：對話方塊上顯示的資訊，資訊可以是字串、元件、圖片等
title：當前對話方塊的標題
optionType：當前對話方塊上顯示的按鈕型別：DEFAULT_OPTION、YES_NO_OPTION、YES_NO_CANCEL_OPTION、OK_CANCEL_OPTION
messageType:當前對話方塊的型別:ERROR_MESSAGE、INFORMATION_MESSAGE、WARNING_MESSAGE、QUESTION_MESSAGE、PLAIN_MESSAGE
icon:當前對話方塊左上角的圖示
options:自定義下拉選單的選項
initialValue:自定義選項中的預設選中項

當使用者與對話方塊互動結束後，不同型別對話方塊的返回值如下：

showMessageDialog: 無返回值。
showlnputDialog: 返回使用者輸入或選擇的字串。
showConfirmDialog: 返回一個整數代表使用者選擇的選項。
showOptionDialog : 返回一個整數代表使用者選擇的選項，如果使用者選擇第一項，則返回 0; 如果選擇第二項，則返回1……依此類推。

對 showConfirmDialog 所產生的對話方塊，有如下幾個返回值：

YES OPTION: 使用者單擊了 "是"按鈕後返回。
NO OPTION: 用戶單擊了"否"按鈕後返回。
CANCEL OPTION: 使用者單擊了"取消"按鈕後返回。
OK OPTION : 使用者單擊了"確定"按鈕後返回。
CLOSED OPTION: 使用者單擊了對話方塊右上角的 " x" 按鈕後返回。

四種對話方塊演示

訊息對話方塊：

import cn.itcast.swing.util.ImagePathUtil;

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

public class MessageDialogTest {

    JFrame jf = new JFrame("測試訊息對話方塊");

    JTextArea jta = new JTextArea(6, 30);

    JButton btn = new JButton(new AbstractAction("彈出訊息對話方塊") {

        @Override
        public void actionPerformed(ActionEvent e) {
            //JOptionPane.showMessageDialog(jf, jta.getText(), "訊息對話方塊", JOptionPane.ERROR_MESSAGE);
            //JOptionPane.showMessageDialog(jf, jta.getText(), "訊息對話方塊", JOptionPane.INFORMATION_MESSAGE);
            //JOptionPane.showMessageDialog(jf, jta.getText(), "訊息對話方塊", JOptionPane.WARNING_MESSAGE);
            //JOptionPane.showMessageDialog(jf, jta.getText(), "訊息對話方塊", JOptionPane.QUESTION_MESSAGE);
            //JOptionPane.showMessageDialog(jf, jta.getText(), "訊息對話方塊", JOptionPane.PLAIN_MESSAGE);
            JOptionPane.showMessageDialog(jf, jta.getText(), "訊息對話方塊", JOptionPane.WARNING_MESSAGE, new ImageIcon(ImagePathUtil.getRealPath("2\\female.png")));

        }
    });


    public void init(){
        jf.add(jta);
        jf.add(btn, BorderLayout.SOUTH);

        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        jf.pack();
        jf.setVisible(true);
    }

    public static void main(String[] args) {
        new MessageDialogTest().init();
    }

}

確認對話方塊：

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

public class ConfirmDialogTest {


    JFrame jf = new JFrame("測試確認對話方塊");

    JTextArea jta = new JTextArea(6, 30);

    JButton btn = new JButton(new AbstractAction("彈出確認對話方塊") {

        @Override
        public void actionPerformed(ActionEvent e) {

            int result = JOptionPane.showConfirmDialog(jf, jta.getText(), "確認對話方塊",JOptionPane.YES_NO_OPTION, JOptionPane.QUESTION_MESSAGE);
            if (result == JOptionPane.YES_OPTION){
                jta.append("\n使用者點選了確定按鈕");
            }

            if (result==JOptionPane.NO_OPTION){
                jta.append("\n使用者點選了取消按鈕");
            }

        }
    });


    public void init(){
        jf.add(jta);
        jf.add(btn, BorderLayout.SOUTH);

        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        jf.pack();
        jf.setVisible(true);
    }

    public static void main(String[] args) {
        new ConfirmDialogTest().init();
    }

}

輸入對話方塊：

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

public class InputDialogTest {

    JFrame jf = new JFrame("測試輸入對話方塊");

    JTextArea jta = new JTextArea(6, 30);

    JButton btn = new JButton(new AbstractAction("彈出輸入對話方塊") {

        @Override
        public void actionPerformed(ActionEvent e) {


           /* String result = JOptionPane.showInputDialog(jf, "請填寫您的銀行賬號：", "輸入對話方塊", JOptionPane.INFORMATION_MESSAGE);
            if(result!=null){
                jta.append(result.toString());
            }
            */

            Object result = JOptionPane.showInputDialog(jf, "", "輸入對話方塊", JOptionPane.DEFAULT_OPTION, null, new String[]{"柳巖", "舒淇", "龔玥菲"}, "舒淇");
            if (result!=null){
                jta.append(result.toString());
            }
        }
    });
    public void init(){
        jf.add(jta);
        jf.add(btn, BorderLayout.SOUTH);

        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        jf.pack();
        jf.setVisible(true);
    }

    public static void main(String[] args) {
        new InputDialogTest().init();
    }

}

選項對話方塊：

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

public class OptionDialogTest {

    JFrame jf = new JFrame("測試選項對話方塊");

    JTextArea jta = new JTextArea(6, 30);

    JButton btn = new JButton(new AbstractAction("彈出選項對話方塊") {

        @Override
        public void actionPerformed(ActionEvent e) {

            int result = JOptionPane.showOptionDialog(jf, "請選擇尿不溼號碼", "選項對話方塊",JOptionPane.DEFAULT_OPTION,JOptionPane.INFORMATION_MESSAGE,
                    null,new String[]{"大號","中號","小號"},"中號");

            switch (result){
                case 0:
                    jta.setText("使用者選擇了大號");
                    break;
                case 1:
                    jta.setText("使用者選擇了中號");
                    break;
                case 2:
                    jta.setText("使用者選擇了小號");
                    break;
            }
        }
    });


    public void init(){
        jf.add(jta);
        jf.add(btn, BorderLayout.SOUTH);

        jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        jf.pack();
        jf.setVisible(true);
    }

    public static void main(String[] args) {
        new OptionDialogTest().init();
    }

}

如圖片失效等影響瀏覽文章可參閱公眾號文章：

為元件設定邊框：https://mp.weixin.qq.com/s/En67fcV9-IiO9V-jXL39sQ
使用JToolBar建立工具條：https://mp.weixin.qq.com/s/IDnY_szKCG80mBR3zAzlmg
JColorChooser和JFileChooser：https://mp.weixin.qq.com/s/dvoUYVCh8GaIuXPwxZ5Cfg
JOptionPane：https://mp.weixin.qq.com/s/-XOLiMjRY0YgmkrSqHqDGA

Java-GUI 程式設計之 Swing
2022-05-01
JavaGUI程式設計
java-GUI程式設計之AWT元件
2022-04-05
JavaGUI程式設計元件
Java-GUI程式設計之選單元件
2022-04-07
JavaGUI程式設計元件
Java學習之Swing Gui程式設計
2020-11-25
JavaGUI程式設計
Java-GUI程式設計之處理點陣圖
2022-04-13
JavaGUI程式設計
Java-GUI程式設計之事件處理
2022-04-06
JavaGUI程式設計事件
java Swing程式設計入門
2018-03-22
Java程式設計
Java核心(Swing 程式設計4-列表元件、文字元件、常用時間監聽器）
2018-07-15
Java程式設計元件字元
利用awt與swing進行桌面程式設計（1）
2020-04-04
程式設計
打算學GUI程式設計，SWING，javaFx,SWT怎麼選？
2020-06-01
GUI程式設計Java
好程式設計師Java教程解讀什麼是swing
2019-07-24
程式設計師Java
【Java GUI 程式設計】Swing 使用者介面開發工具包
2020-10-20
JavaGUI程式設計
vue - Vue元件化程式設計
2022-05-05
Vue元件化程式設計
程式設計思想之冪等性 | 程式設計之道
2018-10-23
程式設計
Linux之shell程式設計
2018-09-22
Linux程式設計
Spring之切面程式設計
2020-10-29
Spring程式設計
python之超程式設計
2021-11-29
Python程式設計
PyQt5 GUI程式設計（元件使用）
2024-05-18
QTGUI程式設計元件
微信小程式元件設計規範
2021-05-24
微信小程式元件
微信小程式之倒數計時元件
2018-04-07
微信小程式元件
Fusion Next 之 Upload 上傳元件設計思路
2019-02-14
元件
【Swing】JTextField設定游標
2024-05-30
JavaScript設計模式之物件導向程式設計
2018-09-01
JavaScript設計模式物件程式設計
《Python程式設計練習與解答》之程式設計概論
2021-02-02
Python程式設計
Android之串列埠程式設計
2018-10-31
Android串列埠程式設計
網路程式設計之socket
2023-10-03
程式設計
併發程式設計之volatile
2020-07-11
程式設計
Linux程式設計之gdb(二)
2019-06-24
Linux程式設計
python之非同步程式設計
2021-12-17
Python非同步程式設計
併發程式設計之：Atomic
2021-09-01
程式設計
併發程式設計之：Lock
2021-09-02
程式設計
併發程式設計之：ForkJoin
2021-09-17
程式設計
併發程式設計之：ThreadLocal
2021-08-31
程式設計thread
併發程式設計之：CountDownLatch
2021-09-06
程式設計CountDownLatch
併發程式設計之：synchronized
2021-08-30
程式設計synchronized
併發程式設計之：JMM
2021-08-28
程式設計
Java程式設計之設計模式之工廠方法模式全解
2019-01-19
Java程式設計設計模式
React元件設計之邊界劃分原則
2019-04-16
React元件

Java-GUI程式設計之Swing元件

為元件設定邊框

使用JToolBar建立工具條

JColorChooser和JFileChooser

JColorChooser

JFileChooser

JOptionPane

基本概述

四種對話方塊演示

相關文章