GUI程式設計

fightownself發表於2024-07-25
GUI程式設計

GUI程式設計

1.簡介

GUI的核心技術：Swing AWT

1，因為介面不美觀

2.需要jre環境

為什麼要學習

1，可以寫出自己的一些小工具

2.工作的時候，可能需要維護到swing介面

3.瞭解MVC架構，瞭解監聽

2.AWT

抽象的視窗工具

1.包含很多的類和介面

2.元素：視窗，文字框，按鈕

3.java.awt

image-20240716105516616

1.第一個Frame視窗介面

package lession;
​
import java.awt.*;
​
//GUI的第一個介面
public class TestFrame {
    public static void main(String[] args) {
        Frame frame=new Frame("我的第一個java影像介面視窗");
        //需要設定可見性
        frame.setVisible(true);
        //需要設定視窗大小
        frame.setSize(400, 400);
        //設定背景顏色
        frame.setBackground(Color.red);
        //彈出的初始位置
        frame.setLocation(200, 200);
        //設定大小固定
        frame.setResizable(false);
    }
}

問題：發現視窗關閉不掉，停止java程式

回顧封裝

package lession;
​
import java.awt.*;
​
public class TestFrame2 {
    public static void main(String[] args) {
        //展示多個視窗
        MyFrame myFrame1 = new MyFrame(100, 100, 200, 200, Color.blue);
        MyFrame myFrame2 = new MyFrame(300, 100, 200, 200, Color.yellow);
        MyFrame myFrame3 = new MyFrame(100, 300, 200, 200, Color.black);
        MyFrame myFrame4 = new MyFrame(300, 300, 200, 200, Color.red);
    }
}
​
class MyFrame extends Frame{
    static int id =0;//可能存在多個視窗，需要一個計數器
    public MyFrame(int x,int y,int w,int h,Color color){
        super("Myframe+"+(++id));
        setBackground(color);
        setBounds(x,y,w,h);
        setVisible(true);
​
    }
​
}

2.皮膚Panel

解決了視窗關閉事件

package lession;
​
import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
​
//Panel 可以看成是一個空間，但是不能單獨使用
public class TestPanel {
    public static void main(String[] args) {
        Frame frame = new Frame();
        Panel panel = new Panel();
        //佈局
        frame.setLayout(null);
        //座標
        frame.setBounds(200,200,300,300);
        frame.setBackground(new Color(62, 215, 215));
​
        //Panel設定座標
        panel.setBounds(100,100,150,150);
        panel.setBackground(new Color(217, 41, 41));
​
        //frame.add()
        frame.add(panel);
​
        frame.setVisible(true);
        //監聽事件，監聽視窗關閉事件
        frame.addWindowListener(new WindowAdapter() {
            //視窗關閉需要做的事情
            @Override
            public void windowClosing(WindowEvent e) {
                //結束程式
                System.exit(0);
            }
        });
    }
​
}

3.佈局管理器

1.流式佈局 

package lession;
​
import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
​
public class TestFlowLayout {
    public static void main(String[] args) {
        Frame frame = new Frame();
        //元件-按鈕
        Button button01 = new Button("button01");
        Button button02 = new Button("button02");
        Button button03 = new Button("button03");
​
        //設定為流式佈局
        frame.setLayout(new FlowLayout(FlowLayout.LEFT));
        frame.setSize(200,200);
​
        //把按鈕新增上去
        frame.add(button01);
        frame.add(button02);
        frame.add(button03);
        frame.setVisible(true);
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

2.東南西北中

package lession;
​
import java.awt.*;
​
public class TestBorderLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("TestBorderLayout");
        Button east = new Button("East");
        Button west = new Button("West");
        Button south = new Button("South");
        Button north = new Button("North");
        Button center = new Button("Center");
​
        frame.add(east,BorderLayout.EAST);
        frame.add(west,BorderLayout.WEST);
        frame.add(south,BorderLayout.SOUTH);
        frame.add(north,BorderLayout.NORTH);
        frame.add(center,BorderLayout.CENTER);
​
        frame.setSize(300,300);
        frame.setVisible(true);
    }
}

3.表格佈局

package lession;
​
import java.awt.*;
​
public class TestGridLayout {
    public static void main(String[] args) {
        Frame frame = new Frame("TestGridLayout");
        Button btn1 = new Button("btn1");
        Button btn2 = new Button("btn2");
        Button btn3 = new Button("btn3");
        Button btn4 = new Button("btn4");
        Button btn5 = new Button("btn5");
        Button btn6 = new Button("btn6");
​
        frame.setLayout(new GridLayout(3,2));
​
        frame.add(btn1);
        frame.add(btn2);
        frame.add(btn3);
        frame.add(btn4);
        frame.add(btn5);
        frame.add(btn6);
​
        frame.pack();//java函式 自動佈局
        frame.setVisible(true);
    }
}

練習

image-20240717113542431

package lession;
​
import java.awt.*;
​
public class EXdemo {
    public static void main(String[] args) {
        Frame frame = new Frame();
        frame.setLayout(new GridLayout(2,1));
        frame.setSize(400,300);
        frame.setLocation(300,400);
        frame.setVisible(true);
        frame.setBackground(Color.red);
        //4個皮膚
        Panel panel1 = new Panel(new BorderLayout());
        Panel panel2 = new Panel(new GridLayout(2,1));
        Panel panel3 = new Panel(new BorderLayout());
        Panel panel4 = new Panel(new GridLayout(2,1));
​
        //新增按鈕
        panel1.add(new Button("East-1"),BorderLayout.EAST);
        panel1.add(new Button("West-1"),BorderLayout.WEST);
        panel2.add(new Button("btn-1"));
        panel2.add(new Button("btn-2"));
        panel1.add(panel2,BorderLayout.CENTER);
​
        panel3.add(new Button("East-2"),BorderLayout.EAST);
        panel3.add(new Button("West-2"),BorderLayout.WEST);
​
        for (int i = 0; i < 4; i++) {
            panel4.add(new Button("for-"+i));
        }
        panel3.add(panel4,BorderLayout.CENTER);
​
        frame.add(panel1);
        frame.add(panel3);
    }
}

4.事件監聽

package lession02;
​
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
​
public class TestActionEvent {
    //按下按鈕，觸發事件
    public static void main(String[] args) {
        Frame frame = new Frame();
        Button button = new Button();
        //因為addActionListener()需要一個ActionListener，所以需要構造一個ActionListener
        MyActionListener myActionListener = new MyActionListener();
        button.addActionListener(myActionListener);
        frame.add(button,BorderLayout.CENTER);
        frame.pack();
        windowClose(frame);//關閉視窗
        frame.setVisible(true);
    }
    private static void windowClose(Frame frame){
        frame.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}
​
//事件監聽
class MyActionListener implements ActionListener{
    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("aaa");
    }
}

多個按鈕，共享一個監聽事件

package lession02;

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

public class TestActionEvent2 {
    public static void main(String[] args) {
        //兩個按鈕，實現一個監聽
        //開始 停止
        Frame frame = new Frame("開始-停止");
        Button button1 = new Button("start");
        Button button2 = new Button("stop");


        //可以顯示的定義觸發會返回的命令，如果不顯示定義，則會走預設的值
        //可以多個按鈕只寫一個監聽類
        button2.setActionCommand("button-stop");
        MyMonitor myMonitor = new MyMonitor();
        button1.addActionListener(myMonitor);
        button2.addActionListener(myMonitor);

        frame.add(button1,BorderLayout.NORTH);
        frame.add(button2,BorderLayout.SOUTH);
        frame.pack();
        frame.setVisible(true);
    }
}

class MyMonitor implements ActionListener{

    @Override
    public void actionPerformed(ActionEvent e) {
        //e.getActionCommand()獲得按鈕的資訊
        System.out.println("按鈕點選：msg"+e.getActionCommand());
    }
}

5輸入框 TextField監聽

package lession02;

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

public class TestText01 {
    public static void main(String[] args) {
        //啟動
        new MyFrame();
    }
}

class MyFrame extends Frame{
    public MyFrame(){
        TextField textField = new TextField();
        add(textField);
        //監聽文字框輸入的文字
        MyActionListener01 myActionListener01 = new MyActionListener01();
        //按下enter就會觸發這個輸入框的事件
        textField.addActionListener(myActionListener01);
        //設定替換編碼
        textField.setEchoChar('a');
        setVisible(true);
        pack();
    }
}

class MyActionListener01 implements ActionListener{

    @Override
    public void actionPerformed(ActionEvent e) {
        TextField field= (TextField) e.getSource();//獲得一些資源
        System.out.println(field.getText());//獲得輸入框的文字
        field.setText("");
    }
}

6.簡易計算器，組合+內部類

簡易計算器

初級程式碼

package lession02;

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

public class TestCalc {
    public static void main(String[] args) {
        new Calculator();
    }
}
//計算器類
class Calculator extends Frame {
    public Calculator(){
        //3個文字框
        TextField num1 = new TextField(10);
        TextField num2 = new TextField(10);
        TextField num3 = new TextField(20);
        //1個按鈕
        Button button = new Button("=");
        button.addActionListener(new MyCalculatorListener(num1,num2,num3));
        //1個標籤
        Label label = new Label("+");
        //佈局
        setLayout(new FlowLayout());
        add(num1);
        add(label);
        add(num2);
        add(button);
        add(num3);
        pack();
        setVisible(true);
    }
}

//監聽器類
class MyCalculatorListener implements ActionListener{

    //獲取三個變數
    private TextField num1,num2,num3;
    public MyCalculatorListener(TextField num1,TextField num2,TextField num3) {
        this.num1=num1;
        this.num2=num2;
        this.num3=num3;
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        //1.獲得加數和被加數
        int n1 = Integer.parseInt(num1.getText());//將string轉換為int型別，得到這個數
        int n2 = Integer.parseInt(num2.getText());//將string轉換為int型別，得到這個數

        //2.將這個值加法運算後，放到第三個框
        num3.setText(""+(n1+n2));
        //3.清除前兩個框
        num1.setText("");
        num2.setText("");
    }
}

完全改造為物件導向

package lession02;

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

public class TestCalc {
    public static void main(String[] args) {
        new Calculator().loadFrame();
    }
}
//計算器類
class Calculator extends Frame {

    //屬性
    TextField num1,num2,num3;
    //方法
    public void loadFrame(){
            //3個文字框
            num1 = new TextField(10);
            num2 = new TextField(10);
            num3 = new TextField(20);
            //1個按鈕
            Button button = new Button("=");//1個標籤
            Label label = new Label("+");
            //監聽
            button.addActionListener(new MyCalculatorListener(this));
            //佈局
            setLayout(new FlowLayout());
            add(num1);
            add(label);
            add(num2);
            add(button);
            add(num3);
            pack();
            setVisible(true);
    }

}

//監聽器類
class MyCalculatorListener implements ActionListener{

    //獲取計算器物件，在一個類中組合另外一個類
    Calculator calculator =null;
    public MyCalculatorListener(Calculator calculator) {
        this.calculator =calculator;
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        //1.獲得加數和被加數
        int n1 = Integer.parseInt(calculator.num1.getText());
        int n2 = Integer.parseInt(calculator.num2.getText());
        //2.將這個值加法運算後，放到第三個框
        calculator.num3.setText(""+(n1+n2));
        //3.清除前兩個框
        calculator.num1.setText("");
        calculator.num2.setText("");
    }
}

內部類

更好的封裝

package lession02;

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

public class TestCalc {
    public static void main(String[] args) {
        new Calculator().loadFrame();
    }
}
//計算器類
class Calculator extends Frame {

    //屬性
    TextField num1,num2,num3;
    //方法
    public void loadFrame(){
            //3個文字框
            num1 = new TextField(10);
            num2 = new TextField(10);
            num3 = new TextField(20);
            //1個按鈕
            Button button = new Button("=");//1個標籤
            Label label = new Label("+");
            //監聽
            button.addActionListener(new MyCalculatorListener());
            //佈局
            setLayout(new FlowLayout());
            add(num1);
            add(label);
            add(num2);
            add(button);
            add(num3);
            pack();
            setVisible(true);
    }
    //內部類最大的好處就是可以無障礙的訪問外部類的屬性和方法
    private class MyCalculatorListener implements ActionListener{
        @Override
        public void actionPerformed(ActionEvent e) {
            //1.獲得加數和被加數
            int n1 = Integer.parseInt(num1.getText());
            int n2 = Integer.parseInt(num2.getText());
            //2.將這個值加法運算後，放到第三個框
            num3.setText(""+(n1+n2));
            //3.清除前兩個框
            num1.setText("");
            num2.setText("");
        }
    }
}

7 視窗監聽

package lesson03;

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

public class TestWindow {
    public static void main(String[] args) {
        new WindowFrame();
    }
}

class WindowFrame extends Frame{
    public  WindowFrame(){
        setBackground(Color.red);
        setBounds(100,100,200,300);
        setVisible(true);
        addWindowListener(new MyWindowListener());
    }
    class MyWindowListener extends WindowAdapter{
        @Override
        public void windowClosing(WindowEvent e) {
            setVisible(false);//透過按鈕隱藏視窗
            System.exit(0);
        }
    }
}

8.鍵盤事件

package lesson03;

import java.awt.*;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;

public class TestKeyListener {
    public static void main(String[] args) {
        new KeyFrame();
    }
}
 class KeyFrame extends Frame{
     public KeyFrame(){
         setBounds(1,2,300,400);
         setVisible(true);
         this.addKeyListener(new KeyAdapter() {
             //鍵盤按下
             @Override
             public void keyPressed(KeyEvent e) {
                 //獲得鍵盤下的鍵是哪一個
                 int keyCode = e.getKeyCode();
                 System.out.println(keyCode);
                 if(keyCode == KeyEvent.VK_UP){
                     System.out.println("你按下了上鍵");
                 }
             }
         });
     }
 }

3.Swing

3.1視窗，皮膚

package lesson03;


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

public class JFrameDemo {
    //初始化init
    public  void init(){
        JFrame frame = new JFrame("這是一個JFrame視窗");
        frame.setVisible(true);
        frame.setBounds(100,100,200,200);
        JLabel label = new JLabel("歡迎");
        frame.add(label);
        frame.getContentPane().setBackground(Color.yellow);
        //文字居中
        label.setHorizontalAlignment(SwingConstants.CENTER);
        //關閉事件
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }
    public static void main(String[] args) {
        new JFrameDemo().init();
    }
}

3.2 JDialog彈窗

package lesson03;


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

//主視窗
public class DialogDemo extends JFrame {
    public DialogDemo(){
        this.setVisible(true);
        this.setSize(700,500);
        //this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        //JFrame 放東西，容器
        Container container = this.getContentPane();
        //絕對佈局
        container.setLayout(null);
        //按鈕
        JButton button = new JButton("點選");
        button.setBounds(30,50,200,50);
        //點選按鈕的時候，彈出一個彈窗
        button.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                //彈窗
                new MyDigLog01();
            }
        });
        container.add(button);
    }

    public static void main(String[] args) {
        new DialogDemo();
    }
}


//彈窗
class MyDigLog01 extends JDialog{
    public MyDigLog01() {
        this.setVisible(true);
        this.setBounds(100,200,500,500);
        //this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        Container container = this.getContentPane();
        container.setLayout(null);
        container.add(new Label("你好"));
    }
}

3.3標籤

label

package lesson03;

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

//圖示，需要實現類
public class IconDemo extends JFrame implements Icon {
    private int width;
    private int height;
    public IconDemo(){}//無參構造

    public IconDemo(int width,int height){
        this.width = width;
        this.height= height;
    }
    public void init(){
        IconDemo iconDemo = new IconDemo(15, 15);
        //圖示放在標籤上，也可以放在按鈕上
        JLabel label = new JLabel("iconTest", iconDemo, SwingConstants.CENTER);
        Container container = getContentPane();
        container.add(label);
        this.setVisible(true);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

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

    @Override
    public void paintIcon(Component c, Graphics g, int x, int y) {
        g.fillOval(x,y,width,height);
    }

    @Override
    public int getIconWidth() {
        return this.width;
    }

    @Override
    public int getIconHeight() {
        return this.height;
    }
}

圖片

package lesson03;

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

public class ImageIconDemo extends JFrame {

    public ImageIconDemo(){
        //獲取圖片的地址
        JLabel label = new JLabel("ImageIcon");
        URL url = ImageIconDemo.class.getResource("01.png");
        ImageIcon imageIcon = new ImageIcon(url);
        label.setIcon(imageIcon);
        label.setHorizontalAlignment(SwingConstants.CENTER);
        Container container = getContentPane();
        container.add(label);
        setVisible(true);
        setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new ImageIconDemo();
    }
}

3.4 皮膚

JPanel

package lesson03;

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

public class JpanelDemo extends JFrame {
    public JpanelDemo(){
        Container container = getContentPane();
        container.setLayout(new GridLayout(2,1,10,10));//後面兩個參數列示兩個間距
        JPanel panel1 = new JPanel(new GridLayout(1, 3));

        panel1.add(new JButton("1"));
        panel1.add(new JButton("1"));
        panel1.add(new JButton("1"));
        container.add(panel1);
        this.setVisible(true);
        this.setSize(500,500);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new JpanelDemo();
    }
}

3.5按鈕

單選框

package lesson03;

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

public class JButtonDemo02 extends JFrame {
    public JButtonDemo02(){
        Container container =this.getContentPane();
        //將圖片變為圖示
        URL resource = JButtonDemo02.class.getResource("01.png");
        Icon icon = new ImageIcon(resource);

        //單選框
        JRadioButton radioButton1 = new JRadioButton("radioButton1");
        JRadioButton radioButton2 = new JRadioButton("radioButton2");
        JRadioButton radioButton3 = new JRadioButton("radioButton3");

        //由於單選框只能選一個，分組
        ButtonGroup group = new ButtonGroup();
        group.add(radioButton1);
        group.add(radioButton2);
        group.add(radioButton3);

        container.add(radioButton1,BorderLayout.CENTER);
        container.add(radioButton2,BorderLayout.NORTH);
        container.add(radioButton3,BorderLayout.SOUTH);
        this.setVisible(true);
        this.setSize(300,400);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new JButtonDemo02();
    }
}

核取方塊

package lesson03;

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

public class JButtonDemo03 extends JFrame {
    public JButtonDemo03(){
        Container container =this.getContentPane();
        //將圖片變為圖示
        URL resource = JButtonDemo02.class.getResource("01.png");
        Icon icon = new ImageIcon(resource);

        //多選框
        JCheckBox checkBox1 = new JCheckBox("checkBox1");
        JCheckBox checkBox2 = new JCheckBox("checkBox2");

        container.add(checkBox1,BorderLayout.NORTH);
        container.add(checkBox2,BorderLayout.SOUTH);


        this.setVisible(true);
        this.setSize(300,400);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new JButtonDemo03();
    }
}

3.6列表

下拉框

package lesson03;

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

public class TestComboxDemo01 extends JFrame {

    public TestComboxDemo01(){
        Container container =this.getContentPane();
        JComboBox comboBox = new JComboBox();

        comboBox.addItem("正在上演");
        comboBox.addItem("已下架");
        comboBox.addItem("即將上映");
        comboBox.addItem(null);

        container.add(comboBox);


        this.setVisible(true);
        this.setSize(300,400);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new TestComboxDemo01();
    }
}

3.7 文字框

文字框

package lesson03;

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

public class TestDemo01 extends JFrame {
    public TestDemo01()  {

        Container container =this.getContentPane();

        JTextField textField = new JTextField("hello");
        JTextField textField1 = new JTextField("world",20);

        container.add(textField,BorderLayout.NORTH);
        container.add(textField1,BorderLayout.SOUTH);


        this.setVisible(true);
        this.setSize(300,400);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
       new TestDemo01();
    }
}

密碼框

package lesson03;

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

public class TestDemo02 extends JFrame {
    public TestDemo02()  {

        Container container =this.getContentPane();

        JPasswordField passwordField = new JPasswordField();
        passwordField.setEchoChar('*');

        container.add(passwordField);

        this.setVisible(true);
        this.setSize(300,400);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public static void main(String[] args) {
        new TestDemo02();
    }
}

文字域

package lesson03;

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

public class JScrollDemo extends JFrame {
    public JScrollDemo(){
        Container container = getContentPane();
        //  文字域
        JTextArea textArea = new JTextArea(20, 50);
        textArea.setText("歡迎學習");
        //Scroll
        JScrollPane ScrollPane = new JScrollPane(textArea);
        this.setVisible(true);
        this.setBounds(100,100,300,350);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        container.add(ScrollPane);

    }

    public static void main(String[] args) {
        new JScrollDemo();
    }
}

相關文章