GUI程式設計process4

37201發表於2024-08-12
GUI程式設計

1、GUI程式設計（AWT，Swing）

  • 圖形介面程式設計
  • 元素：視窗，彈窗，皮膚，文字框，列表框，按鈕，圖片，監聽時間，滑鼠，鍵盤事件，破解工具

2、簡介

Gui的核心技術：Wing 和 AWT ,因為介面不美觀，需要jre環境

AWT（Abstract Window Toolkit）是‌Java中最早的圖形使用者介面開發包，而Swing是在AWT的基礎上構建的。Swing元件大多數繼承自對應的AWT元件，並新增了更多功能和特性。因此，Swing與AWT具有一些共同的特點和方法。‌

  1. 可以實現自己心中的一些小工具
  2. 瞭解MVC架構，瞭解監聽！

3、AWT介紹

  • 包含了很多的類和介面 GUI！

  • 元素：視窗、按鈕、文字框

  • 組建和容器——用來存放

4、Frame視窗、panel皮膚、3種佈局管理器FlowLayout

  • 總結
    1. Frame是一個頂級視窗
    2. Panel無法單獨享受，必須新增在某個容器中
    3. 佈局管理器
      • 流式
      • 東西南北中
      • 表格

​ 4.大小，定位，背景顏色，可見性，監聽

4.1 Frame視窗

  1. Frame.JDK,看原始碼(Structure)

  2. 設定可見性

  3. 設定視窗大小

  4. 設定背景顏色

    frame.setBackground(new Color(165, 60, 60));//可以調色

  5. 彈出的初始位置

  6. 設定大小固定

    package gui;
public class testFrame

  7. 設定多個彈窗

    回顧繼承、有參構造器、super呼叫

    package gui;
public class testFrame2

問題：彈窗關閉不了，停止z程式執行才行

4.2 panel皮膚--可以看作是一個空間，但是不能單獨存在

  1. 存在佈局的概念setLayout();

  2. 設定佈局

  3. 座標、背景顏色

  4. panel設定座標，相對於Frame

    frame.add(panel);

    如果要多個皮膚，就 new panel重新設定引數

  5. 監聽事件，監聽視窗關閉事件，system.exit();

    需要重寫的程式碼太多了，選擇介面卡模式（又是一門課），new一個子類，選擇重寫其中一個模式

    //需要重寫的程式碼太多了，選擇介面卡模式，new一個子類，選擇重寫其中一個模式
frame.addWindowListener(new WindowAdapter() {
    //視窗點選關閉的時候需要做的事情
    @Override
    public void windowClosing(WindowEvent e) {
        //結束程式
        System.exit(0);//0正常退出，1異常退出
    }
}) ;

package gui;

public class testPanel

4.3 3種佈局管理器

  • 流式佈局（一排一排佈局）FlowLayout

  1. 元件-按鈕 Button();

  2. 設定為流失佈局（預設在上中）

    設定在左上--frame.setLayout(new FlowLayout(FlowLayout.LEFT));

  3. 把按鈕新增上去

package gui;
public class testFlowLayout
  • 東南西北中 BorderLayout
package gui;
public class testBorderLayout

  • 表格佈局 GridLayout

    frame.pack();//Java函式！自動佈局

package gui;
public class testGridLayout

4.4 練習題-10個Button

練習

package gui;
public class layoutPractice

5、監聽（不用懂，直接用）

5.1事件監聽

當某個事件發生的什麼，幹什麼？

  1. 按下按鈕，出發一些事件

  2. 因為addActionListener()需要一個ActionListener，所以需要構造一個ActionListener

  3. 關閉窗體事件——寫成方法呼叫

    private static void windowClose(Frame frame) {
    frame.addWindowListener(new WindowAdapter() {
        //視窗點選關閉的時候需要做的事情
        @Override
        public void windowClosing(WindowEvent e) {
            //結束程式
            System.exit(0);//0正常退出，1異常退出
        }
    });
}

package gui;
public class testListen

  1. 兩個按鈕，實現同一個監聽（開始，停止）

    可以顯示的定義觸發會返回的內容，可以多個按鈕寫一個監聽類

package gui;
public class testListen2

5.2輸入框TextFiled事件監聽

一般main方法裡只有執行程式，其他程式寫在其他類中

文字框輸入，程式碼實現

package gui;
public class testListen3

5.3做一個簡易的計算器，組合+內部類回顧複習

package gui;

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

//簡體計算器
public class testCalc {
    public static void main(String[] args) {
        new Calc();
    }
}
//計算器類
class Calc extends Frame {
    public Calc() {
        //3 個文字框
        TextField num1 = new TextField(10);//字元數
        TextField num2 = new TextField(10);//字元數
        TextField num3 = new TextField(20);//字元數

        //1 個按鈕
        Button button = new Button("=");
        button.addActionListener(new myCalc(num1,num2,num3));

        //1 個標籤
        Label label = new Label("+");

        //佈局
        setLayout(new FlowLayout());

        add(num1);
        add(label);
        add(num2);
        add(button);
        add(num3);

        pack();
        setVisible(true);
    }
}
//監聽器類-控制frame內容
class myCalc implements ActionListener{
    //獲取三個變數
    //透過指定引數,不需要設定set,get更快捷
    private TextField num1,num2,num3;
    public myCalc(TextField num1,TextField num2,TextField num3){
        this.num1=num1;
        this.num2=num2;
        this.num3=num3;
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        //1.獲得加數和被加數--將String型別轉換為int型別(透過包機制)
        int n1=Integer.parseInt(num1.getText());
        int n2=Integer.parseInt(num2.getText());

        //2.將這個值+法運算後,放在第三個框
        num3.setText(""+(n1+n2));

        //3.清除前兩個框
        num1.setText("");
        num2.setText("");
    }
}

oop原則：組合大於繼承！——優先使用組合

採用組合來寫

package gui;

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

//簡體計算器
public class testCalc {
    public static void main(String[] args) {
        new Calc().loadFrame();
    }
}
//計算器類
class Calc 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("=");
            button.addActionListener(new myCalc(this));

            //1 個標籤
            Label label = new Label("+");

            //佈局
            setLayout(new FlowLayout());

            add(num1);
            add(label);
            add(num2);
            add(button);
            add(num3);

            pack();
            setVisible(true);
        }

}
//監聽器類-控制frame內容
class myCalc implements ActionListener{
    //獲取計算器這個物件,在一個類中組合另外一個類
    Calc calc = null;
    public myCalc(Calc calc){
        this.calc = calc;
    }

    @Override
    public void actionPerformed(ActionEvent e) {
        //1.獲得加數和被加數--將String型別轉換為int型別(透過包機制)
        //2.將這個值+法運算後,放在第三個框
        //3.清除前兩個框
        int n1 = Integer.parseInt(calc.num1.getText());
        int n2 = Integer.parseInt(calc.num2.getText());
        calc.num3.setText(""+(n1+n2));
        calc.num1.setText("");
        calc.num2.setText("");
    }
}

繼續採用內部類來寫（內部類最大的好處——暢通無阻的訪問外部類的方法）

  • 更好的包裝

    package gui;

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

//簡體計算器
public class testCalc {
    public static void main(String[] args) {
        new Calc().loadFrame();
    }
}
//計算器類
class Calc 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("=");
            button.addActionListener(new myCalc());

            //1 個標籤
            Label label = new Label("+");

            //佈局
            setLayout(new FlowLayout());

            add(num1);
            add(label);
            add(num2);
            add(button);
            add(num3);

            pack();
            setVisible(true);
        }
    //監聽器類-控制frame內容
    private class myCalc implements ActionListener{
        @Override
        public void actionPerformed(ActionEvent e) {
            //1.獲得加數和被加數--將String型別轉換為int型別(透過包機制)
            //2.將這個值+法運算後,放在第三個框
            //3.清除前兩個框
            int n1 = Integer.parseInt(num1.getText());
            int n2 = Integer.parseInt(num2.getText());
            num3.setText(""+(n1+n2));
            num1.setText("");
            num2.setText("");
        }
    }

}

6、畫筆paint

package gui;
public class testPaint

7、(滑鼠、視窗、鍵盤)監聽事件--模擬畫圖工具

  1. 滑鼠監聽

    目的：想要實現滑鼠畫畫

    package gui;
public class testMouseListener

  2. 視窗監聽

    package gui;

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

public class testWindow {
    public static void main(String[] args) {
        new windowFrame();
    }
}
class windowFrame extends Frame {
    public windowFrame(){
        setBackground(new Color(133, 133, 164));
        setBounds(300,300,500,500);
        setVisible(true);
        addWindowListener(new myWindow());
    }
    class myWindow extends WindowAdapter{
        @Override
        public void windowClosing(WindowEvent e) {
         //   setVisible(false);//隱藏視窗
            System.exit(0);//正常退出
        }
    }
}

    匿名內部內來寫

    package gui;

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

public class testWindow {
    public static void main(String[] args) {
        new windowFrame();
    }
}
class windowFrame extends Frame {
    public windowFrame() {
        setBackground(new Color(133, 133, 164));
        setBounds(300, 300, 500, 500);
        setVisible(true);
        //匿名內部類來寫
        this.addWindowListener(
                new WindowAdapter(){
                    @Override
                    public void windowClosing(WindowEvent e) {
                        System.out.println("視窗已關閉");
                        System.exit(0);
                    }

                    //沒什麼意義
                    @Override
                    public void windowOpened(WindowEvent e) {
                        windowFrame source =(windowFrame) e.getSource();
                        source.setTitle("被啟用了");
                        System.out.println("視窗被啟用");
                    }
                });
    }
}

  3. 鍵盤監聽

    package gui;

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

//鍵盤監聽
public class testKey {
    public static void main(String[] args) {
        new myKey();
    }
}
class myKey extends Frame {
    public myKey(){
        setBounds(1,2,300,500);
        setVisible(true);
        this.addKeyListener(new KeyAdapter() {
            //鍵盤按下的事件
            @Override
            public void keyPressed(KeyEvent e) {
                //鍵盤按下的鍵是那個--不需要記錄數值,直接使用靜態屬性 比如VK_UP
                int keyCode = e.getKeyCode();
                System.out.println(keyCode);
                if(keyCode == KeyEvent.VK_UP){//鍵盤按下
                    System.out.println("按下了上鍵");
                }
                //根據按下的不同按鍵,產生不同的操作
            }
        });
    }
}

8、Swing之JFrame窗體(優先)

package gui2;

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,300,300);
        //frame.setBackground(new Color(100, 100, 231));

        //設定文字JLable
        JLabel lable = new JLabel("小胖世界第一");
        frame.add(lable);

        //設定背景顏色不成功，需要容器例項化
        Container container = frame.getContentPane();
        container.setBackground(new Color(100, 100, 231));

        //設定文字居中
        lable.setHorizontalAlignment(SwingConstants.CENTER);

        //關閉事件
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }
    public static void main(String[] args) {
        //建立一個視窗
        new jFrameDemo().init();
    }
}

9、JDialog彈窗

package gui2;

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

//主視窗
public class jDialog extends JFrame {
    public static void main(String[] args) {
        new jDialog();
    }
    public jDialog() {
        this.setSize(700,500);
        this.setVisible(true);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

        //JFrame 放東西，容器
        Container container = this.getContentPane();

        //絕對佈局——視窗不可調整
        container.setLayout(null);

        //按鈕
        JButton button = new JButton("點選彈出一個對話方塊");//建立
        button.setBounds(30,30,100,100);

        //點選這個按鈕後彈出一個彈窗
        button.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                //彈窗
                new myDialog();
            }
        });
        container.add(button);
    }
}
//彈窗的視窗
class myDialog extends JDialog{
    public myDialog() {
        this.setVisible(true);
        this.setBounds(100,100,300,300);
     //   this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);//彈窗預設可關閉

        Container container = this.getContentPane();
        container.setLayout(null);
        
    }
}

10、介面控制

10.1、標籤

  • Icon——圖示（label，Jlabel)

  • 文字標籤

    package gui3;

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

//icon(圖示）是一個介面，需要實現類，Frame繼承
public class iconDemo1 extends JFrame implements Icon {
    private int width;
    private int height;

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

    public void init(){
        iconDemo1 icon1 = new iconDemo1(15, 15);
        //圖示放在標籤上，也可以放在按鈕上
       JLabel jlabel =  new JLabel("icontest",icon1,SwingConstants.CENTER);

        Container container = getContentPane();
        container.add(jlabel);

        this.setVisible(true);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }

    public iconDemo1() {}//無參構造

    public iconDemo1(int width, int height) {}

    @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 gui3;

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

public class iconDemo2 extends JFrame {
    public static void main(String[] args) {
        new iconDemo2();
    }
    public iconDemo2(){
        //獲取圖片地址
        URL url = iconDemo2.class.getResource("包機制.jpg");
        JLabel lable = new JLabel("圖片標籤");

        ImageIcon imageIcon = new ImageIcon(url);
        lable.setIcon(imageIcon);
        lable.setHorizontalAlignment(SwingConstants.CENTER);

        Container container = getContentPane();
        container.add(lable);

        this.setVisible(true);
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }
}

10.2、皮膚

JPannel

package gui3;

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

public class jPanel extends JFrame {
    public static void main(String[] args) {
        new jPanel();
    }
    public jPanel(){
        Container container = getContentPane();
        container.setLayout(new GridLayout(2,1,10,10));//後面的引數是每個皮膚之間的間距

        JPanel jp = new JPanel(new GridLayout(1,3));

        jp.add(new JButton("1"));
        jp.add(new JButton("2"));
        jp.add(new JButton("3"));

        container.add(jp);
        this.setVisible(true);
        this.setSize(500,500);
        this.setDefaultCloseOperation(SwingConstants.CENTER);
    }
}

JScrollPanel-滾動皮膚

package gui3;

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

public class jScrollPanel extends JFrame {
    public static void main(String[] args) {
        new jScrollPanel();
    }
    public jScrollPanel(){
        Container container = getContentPane();

        //文字域
        JTextArea textArea = new JTextArea(20, 50);
        textArea.setText("小胖世界第一");

        //Scroll皮膚
        JScrollPane scrollPane = new JScrollPane(textArea);
        container.add(scrollPane);

        this.setVisible(true);
        this.setBounds(200,200,300,300);//小於邊框的尺寸，出現捲軸
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }
}

10.3、圖片按鈕，單選框，多選框

  • 圖片按鈕

    package gui3;

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

public class jButton extends JFrame {
    public static void main(String[] args) {
        new jButton();
    }
    public jButton(){
        Container container = getContentPane();
        //將一個圖片變成圖示
        URL ulr = jButton.class.getResource("包機制.jpg");
        ImageIcon icon = new ImageIcon(ulr);

        //把這個圖示放在按鈕上
        JButton button = new JButton();
        button.setIcon(icon);
        button.setToolTipText("圖片按鈕");

        //add
        container.add(button);

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

  • 單選框

    package gui3;


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

public class jButton2 extends JFrame {
    public static void main(String[] args) {
        new jButton2();
    }
    public jButton2(){
        Container container = getContentPane();
        //將一個圖片變成圖示
        URL ulr = jButton.class.getResource("包機制.jpg");
        ImageIcon icon = new ImageIcon(ulr);

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

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

        //add
        container.add(radioButton1,BorderLayout.WEST);
        container.add(radioButton2,BorderLayout.EAST);
        container.add(radioButton3,BorderLayout.CENTER);

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

  • 多選框

    package gui3;


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

public class jButton3 extends JFrame {
    public static void main(String[] args) {
        new jButton3();
    }
    public jButton3(){
        Container container = getContentPane();
        //將一個圖片變成圖示
        URL ulr = jButton.class.getResource("包機制.jpg");
        ImageIcon icon = new ImageIcon(ulr);

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

        container.add(checkBox1,BorderLayout.EAST);
        container.add(checkBox2,BorderLayout.WEST);

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

10.4、下拉框、列表框

  • 下拉框

    選擇地區或者一些單個選項選型

    package gui3;

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

public class testCombobox extends JFrame {
    public static void main(String[] args) {
        new testCombobox();
    }
    public testCombobox() {
        Container container = getContentPane();

        JComboBox comboBox = new JComboBox();
        comboBox.addItem("正在上映");
        comboBox.addItem("已下架");
        comboBox.addItem("即將上映");

        container.add(comboBox);

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

  • 列表框

    展示資訊，一般是動態擴容

    package gui3;

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

public class testCombobox2 extends JFrame{
    public static void main(String[] args) {
        new testCombobox2();
    }
    public testCombobox2() {
        Container container = getContentPane();
        //生成列表內容
        String[] contents = {"1","2","3"};
        //列表中需要放內容
        JList list = new JList(contents);

        container.add(list);

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

10.5、文字框、密碼框、文字域

  • 文字框

    package gui3;

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

public class testText extends JFrame{
    public static void main(String[] args) {
        new testText();
    }
    public testText() {
        Container container = getContentPane();

        JTextField text1 = new JTextField("Hello");
        JTextField text2 = new JTextField("World",20);

        container.add(text1,BorderLayout.WEST);
        container.add(text2,BorderLayout.EAST);

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

  • 密碼框

    package gui3;

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

public class testText2 extends JFrame{
    public static void main(String[] args) {
        new testText2();
    }
    public testText2() {
        Container container = getContentPane();

        //在皮膚中
        JPasswordField pass = new JPasswordField();//預設就是****
        pass.setEchoChar('*');

        container.add(pass);

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

  • 文字域

    package gui3;

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

public class jScrollPanel extends JFrame {
    public static void main(String[] args) {
        new jScrollPanel();
    }
    public jScrollPanel(){
        Container container = getContentPane();

        //文字域（配合皮膚使用）
        JTextArea textArea = new JTextArea(20, 50);
        textArea.setText("小胖世界第一");

        //Scroll皮膚
        JScrollPane scrollPane = new JScrollPane(textArea);
        container.add(scrollPane);

        this.setVisible(true);
        this.setBounds(200,200,300,300);//小於邊框的尺寸，出現捲軸
        this.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    }
}

相關文章