技術文章 » Java圖形化介面程式設計

Java圖形化介面程式設計

2022-01-01 11:00:02

Java圖形化介面程式設計(使用AWT)

文章目錄

 內容概述
 容器Container
  Window
  Panel
  ScrollPane
  Box
 佈局管理器
  FlowLayout
  BorderLayout
  GridLayout
  Cardlayout
 AWT基本元件
  Button
  TextField
  TextArea
  Choice
  Checkbox
  CheckboxGroup
  List
 事件處理
  常見事件監聽器
 開發一個簡單計算器

內容概述

 先談談個人對圖形化介面程式設計的認識，圖形化介面程式設計可以直接的看到每一步操作帶來的效果，相對於傳統程式設計盯著黑框框學起來是非常非常有意思的。
 再談談最後的效果，介面是由視窗和元件構成的。而元件在視窗內的排列並不是沒有章法可言，依賴於佈局管理器使元件以合適的位置以及合理的排布呈現。排佈於視窗內的元件又可以通過事件監聽器與使用者進行互動…

容器Container
 什麼是容器？容器是特殊的元件。容器是用來裝東西的，不僅可以存放元件，也可以用來存放容器，而存放的容器又可以存放容器或元件。聽起來有點反覆套娃，但學起來還是很容易的！

 Window
 Window是可以獨立存在的頂級視窗，其預設使用BorderLayout佈局管理器。
 frame.setLocation(500,300)方法用來設定視窗的位置，通常計算機的遠點座標在左上角。
 frame.setSize(500,300)方法用來設定視窗的尺寸。
 frame.setVisible(true)設定視窗是否可見。
執行效果（使用Frame來建立一個視窗）：
在這裡插入圖片描述
 注意此時的視窗不能通過單擊右上角的’X’關閉視窗，只能手動結束程式，因為還沒有加入事件監聽機制。
程式碼：

import java.awt.*;

public class WindowDemo {
    public static void main(String[] args) {

        //建立一個視窗物件
        Frame frame = new Frame("測試Window視窗");
        //指定視窗的位置和大小
        frame.setLocation(500,300);
        frame.setSize(500,300);
        //設定視窗可見
        frame.setVisible(true);
    }
}

 Panel
 Panel是內嵌式容器，必須內嵌於其它容器中使用，不能獨立存在。其預設使用FlowLayout佈局管理器。
執行效果：
在這裡插入圖片描述
 例如：將panel加入Frame中，FlowLayout排列的性質使Panel使用便於被使用。
 通過Panel的add方法（p.add(new TextField("測試文字"));）向Panel中加入了一個TextField元件和一個Button元件。最後將Panel加入Frame中。
 setBounds(100,100,500,300)方法可以一次性設定視窗的座標以及尺寸。
程式碼：

import java.awt.*;

public class PanelDemo {

    public static void main(String[] args) {

        //1.建立一個Window物件，因為panel以及其它容器不能獨立存在必須依附於Window
        Frame frame = new Frame("這裡演示panel");

        //2.建立一個panel物件
        Panel p = new Panel();
        //3.建立一個文字方塊和按鈕，並把它們放到Panel中
        p.add(new TextField("測試文字"));
        p.add(new Button("測試按鈕"));
        //4.把panel放入到Window中
        frame.add(p);
        //5.設定Window得位置及大小
        frame.setBounds(100,100,500,300);

        //6.設定Window可見
        frame.setVisible(true);
    }
}

 ScrollPane
 Scrollpane是帶卷軸的容器，不能獨立存在，預設使用布BorderLayout局管理器。程式碼第7行ScrollPane構造方法中的引數ScrollPane.SCROLLBARS_ALWAYS可以使ScrollPane預設顯示卷軸，因為當內容不多時，ScrollPane不會預設顯示卷軸。
執行效果：
在這裡插入圖片描述
程式碼：

import java.awt.*;

public class ScrollPaneDemo {
    public static void main(String[] args) {
        Frame frame = new Frame("這是測試ScrollPane");
        //建立一個ScrollPane
        ScrollPane sp = new ScrollPane(ScrollPane.SCROLLBARS_ALWAYS);
        //往ScrollPane中新增內容
        sp.add(new TextField("測試文字"));
        //將ScrollPane加入Frame
        frame.add(sp);
        frame.setBounds(100,100,500,300);
        frame.setVisible(true);
    }
}

 Box
 Box容器，可以將容納的元件或容器水平或垂直排列非常有利於模組化構建視窗框架。
 frame.pack()pack()方法可根據視窗內元件的數量以及尺寸自動設定視窗的最佳大小。
 使用Box.createHorizontalBox()方法建立一個水平Box容器，其存放內容只能水平排列。
 使用Box.createVerticalBox()方法建立一個垂直Box容器，其存放內容只能垂直排列。
 存放內容的間隔使用Box.createHorizontalGlue()或Box.createVerticalGlue()方法，注意此類間隔的大小會隨著視窗拖動而改變。使用Box.createHorizontalStrut(width)（Box.createVerticalStrut(height)）可以建立在水平（垂直）方向上尺寸不變的間隔。
執行效果：
在這裡插入圖片描述
程式碼：

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

public class BoxDemo {
    public static void main(String[] args) {
        Frame frame = new Frame();
        //建立一個水平Box
        Box hbox = Box.createHorizontalBox();
        hbox.add(new Button("水平按鈕1"));
        hbox.add(Box.createHorizontalGlue());//尺寸不固定間隔
        hbox.add(new Button("水平按鈕2"));
        hbox.add(Box.createHorizontalStrut(30));;//水平方向尺寸不變間隔
        hbox.add(new Button("水平按鈕3"));

        //建立一個垂直Box
        Box vbox = Box.createVerticalBox();
        vbox.add(new Button("垂直按鈕1"));
        vbox.add(Box.createVerticalGlue());//尺寸不固定間隔
        vbox.add(new Button("垂直按鈕2"));
        vbox.add(Box.createVerticalStrut(30));//垂直方向尺寸不變間隔
        vbox.add(new Button("垂直按鈕3"));
        frame.add(hbox,BorderLayout.NORTH);
        frame.add(vbox);
        frame.pack();
        frame.setVisible(true);
    }
}

佈局管理器

 FlowLayout
 FlowLayout流式佈局管理器，按從左往右從上往下的順序新增內容。可以自定義間距以及排列方式。
 setLayout();方法可以為指定容器設定佈局管理器。
如：frame.setLayout(new FlowLayout(FlowLayout.CENTER,40,20));就是將frame的佈局管理器（frame預設為BorderLayout）更改為FlowLayout。
 構造方法中FlowLayout(FlowLayout.CENTER,40,20)第一個引數為指定排列方式，後兩個引數為行間距以及列間距。FlowLayout.CENTER表示居中對齊；FlowLayout.LEFT表示左對齊；FlowLayout.RIGHT表示右對齊。
執行效果（使用流式佈局管理器加入9個按鈕）：
在這裡插入圖片描述
程式碼：

import java.awt.*;

public class FlowLayoutDemo {
    public static void main(String[] args) {
        Frame frame = new Frame();
        //1.通過setLayout
        frame.setLayout(new FlowLayout(FlowLayout.CENTER,40,20));
        for(int i=1;i<=9;i++){
            frame.add(new Button(""+i));
        }
        frame.pack();
        frame.setVisible(true);
    }
}

 BorderLayout
 邊界佈局管理器，Frame和ScrollPane預設使用BorderLayout佈局管理器。BorderLayout將區域劃分為中部（CENTER）、北部（NORTH）、南部（SOUTH）、西部（WEST）和東部（EAST）。注意每個區域只能容納一個元件或容器，在同一區域多次放入元件會造成覆蓋。但可以向區域中加入容器，比如向中部加入Panel，再向Panel中加入很多按鈕或文字是可以的。
執行效果（區域分佈）：
在這裡插入圖片描述
 當某一區域不存在時，會由中部區域填充。
程式碼：

import java.awt.*;

public class BorderLayoutDemo {
    public static void main(String[] args) {
        Frame frame = new Frame("測試BorderLayout");
        //1.通過setLayout
        frame.setLayout(new BorderLayout(30,10));

        frame.add(new Button("北部"),BorderLayout.NORTH);
        frame.add(new Button("南部"),BorderLayout.SOUTH);
        frame.add(new Button("東部"),BorderLayout.EAST);
        frame.add(new Button("西部"),BorderLayout.WEST);
        frame.add(new Button("中部"));//不新增區域指定，預設中部

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

 嘗試向中部區域加入裝有9個按鈕的Panel。
執行效果：
在這裡插入圖片描述
程式碼：

package Awt;

import java.awt.*;

public class BorderLayoutDemo {
    public static void main(String[] args) {
        Frame frame = new Frame("測試BorderLayout");
        //1.通過setLayout
        frame.setLayout(new BorderLayout(30,10));

        frame.add(new Button("北部"),BorderLayout.NORTH);
        frame.add(new Button("南部"),BorderLayout.SOUTH);
        frame.add(new Button("東部"),BorderLayout.EAST);
        frame.add(new Button("西部"),BorderLayout.WEST);

        Panel panel = new Panel();
        for(int i=0;i<9;i++){
            panel.add(new Button(i+""));
        }
        frame.add(panel);

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

 GridLayout
 GridLayout網式佈局管理器，可以將區域劃分為r*c個小區域，GridLayout構造方法GridLayout(rows,cols,hgap,vgap)四個引數分別指定了要劃分的行、列、水平間距和垂直間距。
 在Frame的北部區域放置一個文字方塊，中部區域存放一個指定佈局管理器為網式佈局管理器的Panel，並加入按鈕元件，會發生什麼？
執行效果：
在這裡插入圖片描述
注意：此時的視窗還未加入事件監聽，計算器還不能使用。但也快了。
程式碼：

import java.awt.*;

public class GridLayOutDemo {
    public static void main(String[] args) {
        Frame frame = new Frame("計算器");

        frame.add(new TextField(30),BorderLayout.NORTH);

        Panel p = new Panel();
        p.setLayout(new GridLayout(3,5,4,4));
        for (int i = 0; i < 10; i++) {
            p.add(new Button(i+""));
        }
        String s = "+-*/.";
        for(int i=0;i<5;i++){
            p.add(new Button(s.charAt(i)+""));
        }
        frame.add(p);

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

 Cardlayout
 CardLayout卡片式佈局管理器，相當於一疊撲克牌，疊放式分佈。
 初識事件監聽機制，對按鈕註冊監聽，可以達到點選按鈕有對應響應的效果。簡單瞭解事件監聽後續有詳細講解，其中程式碼27行e.getActionCommand()得到的資訊就是按鈕上的字元。
執行效果：
在這裡插入圖片描述
程式碼：

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class CardLayoutDemo {
    public static void main(String[] args) {
        Frame frame = new Frame();

        Panel p = new Panel();
        CardLayout cardLayout = new CardLayout();
        p.setLayout(cardLayout);
        String[] names = {"第一張","第二張","第三張","第四張","第五張"};
        for(int i=0;i<5;i++){
            p.add(names[i],new Button(names[i]));
        }
        frame.add(p);
        String[] operat = {"上一張","下一張","第一張","最後一張","第三張"};
        Panel p2 = new Panel();
        Button b1 = new Button(operat[0]);
        Button b2 = new Button(operat[1]);
        Button b3 = new Button(operat[2]);
        Button b4 = new Button(operat[3]);
        Button b5 = new Button(operat[4]);
        ActionListener listener = new ActionListener(){
            @Override
            public void actionPerformed(ActionEvent e){
                String actionCommand = e.getActionCommand();
                switch(actionCommand){
                    case "上一張":
                        cardLayout.previous(p);
                        break;
                    case "下一張":
                        cardLayout.next(p);
                        break;
                    case "第一張":
                        cardLayout.first(p);
                        break;
                    case "最後一張":
                        cardLayout.last(p);
                        break;
                    case "第三張":
                        cardLayout.show(p,"第三張");
                        break;
                }
            }
        };

        b1.addActionListener(listener);
        b2.addActionListener(listener);
        b3.addActionListener(listener);
        b4.addActionListener(listener);
        b5.addActionListener(listener);
        p2.add(b1);
        p2.add(b2);
        p2.add(b3);
        p2.add(b4);
        p2.add(b5);
        frame.add(p2,BorderLayout.SOUTH);
        frame.pack();
        frame.setVisible(true);
    }
}

AWT基本元件

 Button
  Button:按鈕元件，可以單擊並作出響應。

 TextField
  TextField:單行文字方塊。可以用set()和get()方法設定和獲取文字內容。

 TextArea
  TextArea:多行文字域。

 Choice
  Choice:下拉選擇框。

 Checkbox
  核取方塊元件，也可以單獨使用作為單選框元件。

 CheckboxGroup
  CheckboxGroup:將多個Checkbox組裝為一組，每組中只有一個選項可以被選中。

 List
  List:列表框元件可以新增多項條目。

執行效果：
在這裡插入圖片描述
程式碼：

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

public class BasicComponentDemo {

    Frame frame = new Frame();
    //文字方塊
    TextArea ta = new TextArea(5,20);
    //下拉選擇框
    Choice colorChooser = new Choice();
    //核取方塊
    CheckboxGroup cbg = new CheckboxGroup();
    Checkbox male = new Checkbox("男",cbg,true);
    Checkbox famale = new Checkbox("女",cbg,false);

    Checkbox isMarred = new Checkbox("是否已婚？");
    //單行文字方塊
    TextField tf = new TextField(20);
    //按鈕
    Button ok = new Button("確認");
    //列表框
    List colorList = new List(6,true);

    public void init(){
        Box bBox = Box.createHorizontalBox();
        //底部
        bBox.add(tf);
        bBox.add(ok);
        frame.add(bBox,BorderLayout.SOUTH);

        //topLeft
        colorChooser.add("紅色");
        colorChooser.add("藍色");
        colorChooser.add("黃色");
        Box cBox = Box.createHorizontalBox();
        cBox.add(colorChooser);
        cBox.add(male);
        cBox.add(famale);
        cBox.add(isMarred);
        Box topLeft = Box.createVerticalBox();
        topLeft.add(ta);
        topLeft.add(cBox);
        Box top = Box.createHorizontalBox();
        top.add(topLeft);
        //topRight
        colorList.add("紅色");
        colorList.add("黃色");
        colorList.add("藍色");
        top.add(colorList);
        //組裝
        frame.add(top);

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

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

事件處理
 當元件上發生某些操作時會自動觸發一段程式碼的執行。
 一個事件的發生是由事件源產生事件，事件監聽器捕獲事件最後做出相應的響應（自動執行一段程式碼）。將事件監聽器加入到事件源上的過程稱為註冊監聽。
例如：當按鈕為事件源，新增myListener監聽器註冊監聽，事件發生時會自動向單行文字方塊中新增「Hello world!」。
執行效果：
在這裡插入圖片描述
程式碼：

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class Hello {

    Frame frame = new Frame("測試監聽事件");
    //事件源
    Button b = new Button("確定");
    TextField tf = new TextField(30);

    public void init(){

        //監聽器
        MyListener myListener = new MyListener();
        //註冊監聽
        //匿名內部類 事件監聽器只與一個事件有關
        b.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                tf.setText("Hello world!");
            }
        });
        frame.add(tf,BorderLayout.NORTH);
        frame.add(b);
        frame.pack();
        frame.setVisible(true);
    }

    //內部類 共同一類事件使用
    private class MyListener implements ActionListener {
        @Override
        public void actionPerformed(ActionEvent e) {
            tf.setText("Hello world!");
        }
    }

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

 常見的事件監聽器
  ComponentEvent:元件事件，當元件尺寸、位置、顯示/隱藏狀態發生改變時觸發事件。

  ContainerEvent:容器事件，當容器裡新增刪除元件時觸發該事件。

  WindonEvent:視窗事件，當視窗狀態改變時觸發該事件。

  FoucusEvent:焦點事件，當元件得到焦點或失去焦點時觸發該事件。

  KeyEvent:鍵盤事件，當按、鬆開下鍵盤時觸發該事件。

  MouseEvent:滑鼠事件，當單擊、鬆開或移動滑鼠時觸發該事件。

利用視窗事件寫一個可以點選’X’關閉的視窗。
程式碼：

import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

public class WindowDemo {
    public static void main(String[] args) {

        //建立一個視窗物件
        Frame frame = new Frame("測試Window視窗");
        //指定視窗的位置和大小
        frame.setLocation(500,300);
        frame.setSize(500,300);
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
        //設定視窗可見
        frame.setVisible(true);
    }
}

常見監聽器測試：
在這裡插入圖片描述
程式碼：

import java.awt.*;
import java.awt.event.*;

public class ListenerDemo {
    public static void main(String[] args) {
        Frame frame = new Frame();
        Choice nameChooser = new Choice();
        nameChooser.add("Red");
        nameChooser.add("Yellow");
        nameChooser.add("Blue");
        //下拉選擇框新增ItemListener 監聽條目變化
        nameChooser.addItemListener(new ItemListener() {
            @Override
            public void itemStateChanged(ItemEvent e) {
                Object item = e.getItem();
                System.out.println("當前所選條目為："+item);
            }
        });

        TextField tf = new TextField(30);
        tf.addTextListener(new TextListener() {
            @Override
            public void textValueChanged(TextEvent e) {
                String s = tf.getText();
                System.out.println("文字方塊內容為："+s);
            }
        });

        frame.add(nameChooser,BorderLayout.WEST);
        frame.add(tf);

        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

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

開發一個簡單計算器
 FrameNORTH區域放置TextField元件，將指定為4行5列GridLayout佈局管理器的Panel放置於Frame中部區域，其中填充操作符和運算元按鈕。
 按鈕觸發事件源，對按鈕新增ActionListener註冊監聽。自定義NumListener（運算元監聽類）、OperatListener（操作符監聽類）、EqualListener（等於符監聽類）和匿名內部類（back監聽類）分情況對按鈕事件進行監聽並響應。
注意：整數、浮點、負數以及連續運算均可以。
在這裡插入圖片描述
程式碼：

import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

import static java.awt.Color.blue;

public class Calculation {
    //運算元
    double x,y;
    String op;
    boolean flag;
    Frame frame = new Frame("智子的計算器！");
    TextField tf = new TextField(30);
    Button[] b = new Button[20];

    public void init(){
        //北部區域放置文字方塊
        frame.add(tf,BorderLayout.NORTH);
        Panel panel = new Panel();
        panel.setLayout(new GridLayout(4,5,2,2));
        //設定按鈕
        String s = "+-*/%";
        for(int i=0;i<10;i++) {//運算數
            b[i] = new Button(i + "");
            b[i].setForeground(blue);
        }
        for(int i=0;i<5;i++) {//運運算元
            b[i+10]=new Button(s.charAt(i)+"");
            b[i+10].setForeground(blue);
        }
        String[] t = {"sqrt","^2","^3","=","."};
        for(int i=0;i<5;i++){
            b[i+15]=new Button(t[i]);
            b[i+15].setForeground(blue);
        }

        //按鈕註冊監聽
        for (int i = 0; i < 10; i++) {//運算元註冊監聽
            b[i].addActionListener(new NumListener());
        }

        for (int i = 10; i < 18; i++) {//操作符註冊監聽
            if(i==11) continue;
            b[i].addActionListener(new OperatListener());
        }
        b[11].addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                if(!flag){
                    tf.setText("-");
                    flag = true;
                } else {
                    x = Double.parseDouble(tf.getText());
                    op = e.getActionCommand();
                    flag = false;
                }
            }
        });
        //「=」註冊監聽
        b[18].addActionListener(new EqualListener());
        //「back」註冊監聽
        b[19].addActionListener(new NumListener());

        //將按鈕加入panel
        for (int i = 0; i < 20; i++) {
            panel.add(b[i]);
        }

        //設定中部按鈕
        frame.add(panel);

        //視窗監聽器 註冊監聽
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

        //設定視窗最優並可見
        frame.pack();
        frame.setVisible(true);
    }

    //數位按鈕監聽器類
    public class NumListener implements ActionListener{
        @Override
        public void actionPerformed(ActionEvent e) {
            String t = e.getActionCommand();
            String s = tf.getText();
            if(flag==false)
                tf.setText(t);
            else
                tf.setText(s+t);
            flag = true;
        }
    }

    //操作符按鈕監聽器類
    public class OperatListener implements ActionListener{
        @Override
        public void actionPerformed(ActionEvent e) {
            x = Double.parseDouble(tf.getText());
            op = e.getActionCommand();
            flag = false;
        }
    }

    //等號按鈕監聽器類
    public class EqualListener implements ActionListener{
        @Override
        public void actionPerformed(ActionEvent e) {
            y = Double.parseDouble(tf.getText());
            flag = true;
            switch(op){
                case "+":tf.setText(x+y+"");
                    break;
                case "-":tf.setText(x-y+"");
                    break;
                case "*":tf.setText(x*y+"");
                    break;
                case "/":
                    if(y!=0)
                        tf.setText(x/y+"");
                    else
                        tf.setText("inf");
                    break;
                case "%":tf.setText(x%y+"");
                    break;
                case "sqrt":tf.setText((int)Math.sqrt(x)+"");
                    break;
                case "^2":tf.setText(y*y+"");
                    break;
                case "^3":tf.setText(y*y*y+"");
                    break;
            }
        }
    }

    public static void main(String[] args) {

        new Calculation().init();
    }
}