Java GUI入門手冊-AWT篇

xbhog發表於2021-05-12

Java GUI入門手冊:

AWT是基本的GUI設計工具,重點學習其中的佈局格式以及事件監聽事件。

首先建立一個視窗,我們先分析Frame類中的方法:

image-20210510233606337

通過上圖,可以看出frame是由構造方法的過載;可以選擇的設定視窗的標題;

為了讓一個基本的視窗顯示,我們需要設定視窗的可見性;必須

為了美觀,我們設定:

  1. 視窗大小
  2. 視窗顏色
  3. 生成視窗的初始位置在左上角,可以設定初始的彈出位置

建立視窗:

import java.awt.*;
public class TestFrame {
    public static void main(String[] args) {
        //視窗
        Frame frame = new Frame("我的第一個Java圖形化視窗");
        //設定可見性
        frame.setVisible(true);
        //設定視窗大小
        frame.setSize(400,300);
        //設定顏色
        //frame.setBackground(Color.BLACK);
        frame.setBackground(new Color(57, 198, 26));
        //彈出得初始化位置
        frame.setLocation(200,300);
        //設定大小固定
        frame.setResizable(false);
    }
}

image-20210510233346958

問題:當我們在完成上述操作後,會出現一個視窗,但是我們無法手動關閉視窗,即點選右邊的X是沒有用的;

當我們完成單個視窗的實現後,會想一些騷操作!

設定多個視窗:

import java.awt.*;
public class TestFrame2 {
    public static void main(String[] args) {
        MyFrame myFrame1 = new MyFrame(100, 100, 200, 300, Color.blue);
        MyFrame myFrame2 = new MyFrame(300, 100, 200, 300, Color.yellow);
        MyFrame myFrame3 = new MyFrame(100, 300, 200, 300, Color.red);
        MyFrame myFrame4 = new MyFrame(300, 300, 200, 300, Color.pink);
    }
}

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);

    }
}

image-20210418143139887


經過上面的學習,我們基本掌握了GUI中基礎的視窗設定;接下來解決視窗的關閉問題;

並且引入皮膚相關的概念。

皮膚操作:解決關閉問題:

一個介面只可以有一個Frame窗體元件,但是可以有多個Panel皮膚元件,而Panel上也可以使用FlowLayout,BorderLayout,GridLayout等各種佈局管理器(後面涉及),這樣可以組合使用,達到較為複雜的佈局效果。

image-20210511000502873

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

public class TestPanel {
    public static void main(String[] args) {
        Frame frame = new Frame();
        //佈局概念--初始化一個皮膚
        Panel panel = new Panel();
        //設定佈局
        frame.setLayout(null);

        //座標--設定彈出位置以及視窗大小
        frame.setBounds(300,300,500,500);
        frame.setBackground(new Color(32, 71, 187));
        //設定佈局座標,但是是相對於frame的佈局

        panel.setBounds(50,50,400,400);
        //設定背景顏色,需要宣告一個顏色例項化物件;
        //將例項化的物件傳入到皮膚方法中
        panel.setBackground(new Color(175, 29, 29));

        //將我們初始化的Panel皮膚放到frame上
        frame.add(panel);
        //設定可見性
        frame.setVisible(true);

        //監聽事件 退出:System.exit();
        //通過匿名內部類實現自己選擇的方法實現
        //為Frame視窗元件插個眼,但點選“X”後,會通過介面卡自動匹配,到我們重寫的方法中,來實現相應的功能
        frame.addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });

    }
}
/*WindowAdapter:
* 用於接收視窗事件的抽象介面卡類。 此類中的方法為空。 此類的存在是為了方便建立偵聽器物件。
擴充套件此類以建立WindowEvent偵聽器,並覆蓋感興趣事件的方法。 
(如果實現WindowListener介面,則必須定義其中的所有方法。此抽象類為所有介面都定義了空方法,因此只需要為你關心的事件定義方法。)
使用擴充套件類建立一個偵聽器物件,然後使用視窗的addWindowListener方法將其註冊到Window中。 當視窗的狀態由於開啟,關閉,啟用或停用,圖示化或去圖示化而改變時,將呼叫偵聽器物件中的相關方法,並將WindowEvent傳遞給它。
* */

image-20210418145724869

佈局管理器:

在使用 [Swing]向容器新增元件時,需要考慮元件的位置和大小。如果不使用佈局管理器,則需要先在紙上畫好各個元件的位置並計算元件間的距離,再向容器中新增。這樣雖然能夠靈活控制元件的位置,實現卻非常麻煩。

為了加快開發速度,[Java]提供了一些佈局管理器,它們可以將元件進行統一管理,這樣開發人員就不需要考慮元件是否會重疊等問題。

  1. 流式佈局(FlowLayout)
  2. 邊框佈局(BorderLayout) --東西南北中佈局
  3. 表格佈局(GridLayout)
構造一個具有指定對齊方式和預設5單位水平和垂直間隙的新FlowLayout 。 
對齊引數的值必須是FlowLayout.LEFT , FlowLayout.RIGHT , FlowLayout.CENTER ,FlowLayout.LEADING或FlowLayout.TRAILING 。
引數:
align –對齊值

流式佈局:

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 button1 = new Button("Button1");
        Button button2 = new Button("Button2");
        Button button3 = new Button("Button3");
        //設定為流式佈局
        //frame.setLayout(new FlowLayout());
        frame.setLayout(new FlowLayout(FlowLayout.RIGHT));

        frame.setSize(200,200);
        frame.setLocation(300,300);
        //把按鈕新增到佈局上
        frame.add(button1);
        frame.add(button2);
        frame.add(button3);
        //設定可見性
        frame.setVisible(true);

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

image-20210419144558797

東西南北中佈局:

import java.awt.*;
public class TestBorderLayout {
    public static void main(String[] args) {

        Frame frame = new Frame("東西南北中");

        Button lable1 = new Button("lable1");
        Button lable2 = new Button("lable2");
        Button lable3 = new Button("lable3");
        Button lable4 = new Button("lable4");
        Button lable5 = new Button("lable5");
		//第一個標籤在東邊,一次標籤時西、南、北、中
        frame.add(lable1,BorderLayout.EAST);
        frame.add(lable2,BorderLayout.WEST);
        frame.add(lable3,BorderLayout.SOUTH);
        frame.add(lable4,BorderLayout.NORTH);
        frame.add(lable5,BorderLayout.CENTER);

        frame.setSize(200,200);
        frame.setVisible(true);
    }
}

image-20210419145431975

表格佈局:

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");

        //設定佈局模式,設定表格三行兩列
        frame.setLayout(new GridLayout(3,2));

        frame.add(btn1);
        frame.add(btn2);
        frame.add(btn3);
        frame.add(btn4);
        frame.add(btn5);

        frame.pack();  //自動確定最佳位置,使用的是Java函式
        frame.setLocation(200,300);

        frame.setVisible(true);
    }
}

image-20210419150107102

練習:

image-20210420105753483

import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
public class homework {
    public static void main(String[] args) {
        Frame frame = new Frame("homework");
        //設定介面的大小
        frame.setSize(400,400);
        //啟動後彈出的位置
        frame.setLocation(300,400);

        frame.setBackground(Color.BLACK);
        frame.setVisible(true);

		// 1.第一個佈局
        //設定佈局frame為兩行一列(表格佈局)
        frame.setLayout(new GridLayout(2,1));

        //設定皮膚
        //設定第一行佈局
        Panel p1 = new Panel(new BorderLayout());
        Panel p2 = new Panel(new GridLayout(2,1));
        //設定第二行佈局
        Panel p3 = new Panel(new BorderLayout());
        Panel p4 = new Panel(new GridLayout(2,2));
        
        //設定兩邊的 按鈕
        p1.add(new Button("East-1"),BorderLayout.EAST);
        p1.add(new Button("West-1"),BorderLayout.WEST);

        //設定中間的按鈕
        p2.add(new Button("p2-btn-1"));
        p2.add(new Button("p2-btn-2"));

        //第二層
        p3.add(new Button("East-2"),BorderLayout.EAST);
        p3.add(new Button("West-2"),BorderLayout.WEST);

        //設定第二行中間按鈕
        for (int i = 0; i < 4; i++) {
            p4.add(new Button("p4-btn-"+i));
        }
        //將皮膚p2加入到皮膚p1中
        p1.add(p2,BorderLayout.CENTER);
        p3.add(p4,BorderLayout.CENTER);
        frame.add(p1);
        frame.add(p3);

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

事件監聽

AWT的事件處理機制是一種委派式事件處理方式:普通元件(事件源)將整個事件處理委託給特定的物件(事件監聽器);當該事件源發生指定的事件時,就通知所委託的事件監聽器,由事件監聽器來處理這個事件。 每個元件均可以針對特定的事件指定一個或多個事件監聽物件,每個事件監聽器也可以監聽一個或多個事件源.

簡單來說,當使用者觸發某個條件或者事件的時候,處理程式碼將被自動執行,類似鉤子一般。

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();
        //我們為什麼需要構建這個MyActionListener類,是因為按鈕監聽的時候需要傳入一個
        /*public synchronized void addActionListener(ActionListener l)*/

        MyActionListener myActionListener = new MyActionListener();
        button.addActionListener(myActionListener);
        //將按鈕新增到frame中,並且設定位置居中
        frame.add(button,BorderLayout.CENTER);
        frame.pack();  //自動匹配最佳位置

        frame.setVisible(true);
        //關閉視窗
        close(frame);
    }
    //設定監聽關閉功能
    public static void close(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("監聽成功");
    }
}

效果:

image-20210421131136068

設定兩個按鈕,來實現同一個監聽:

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 TestActionTwo {
    public static void main(String[] args) {
        //目標:設定兩個按鈕,來實現同一個監聽
        //開始  停止
        Frame frame = new Frame("開始-停止");
        Button start = new Button("start");
        Button end = new Button("end");

        //設定資訊
        start.setActionCommand("開始使用程式");
        end.setActionCommand("結束程式");
        Mymonitor mymonitor = new Mymonitor();
        //這隻監聽
        start.addActionListener(mymonitor);
        end.addActionListener(mymonitor);
		//設定東南西北中的佈局
        frame.add(start,BorderLayout.NORTH);
        frame.add(end,BorderLayout.SOUTH);

        frame.pack();
        frame.setVisible(true);
        CloseFrame(frame);
    }
    //設定監聽關閉功能
    public static void CloseFrame(Frame frame){
        frame.addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}
class Mymonitor implements ActionListener{
    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("按鈕被點選了:msg"+e.getActionCommand());
    }
}

image-20210421133022560

輸入框:

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 TestText01 {
    public static void main(String[] args) {
        //啟動
        new MyFrame();
    }
}
//這裡採用繼承的方式,來實現視窗。
class MyFrame extends Frame {
    public MyFrame(){
        //設定文字物件
        TextField textField = new TextField();
        add(textField);  //新增到frame中

        //監聽輸入的文字
        MyAcrionLister myAcrionLister = new MyAcrionLister();
        //觸發輸入框事件
        textField.addActionListener(myAcrionLister);

        //設定替換編碼--使得輸入的內容轉換為*
        textField.setEchoChar('*');
        setVisible(true); //設定視覺化
        pack();  //自適應
        //監聽關閉程式
        addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

class MyAcrionLister implements ActionListener {
    @Override
    public void actionPerformed(ActionEvent e) {
        //獲取資源,返回一個物件
        //e.getSource()獲得觸發的物件
        TextField filed = (TextField)e.getSource();
        System.out.println(filed.getText());
        //輸入完清空
        filed.setText("");
        
    }
}

註解:一般常見於Java 的awt, swing的事件處理裡面,e是指一個事件,如ActionEvent,MouseMoveEvent等,它有一個事件發起者,用e.getSource()可以獲得,但getSource()返回的是Object型別(保持方法的通用性),所以如果已經知道是按鈕產生的事件,可以用(JButton)e.getSourse()強制轉換成JButton物件,這樣就可以用JButton物件的方法了

image-20210423131746857

基本計算器實現:

基礎寫法:(程式導向的)

package com.xbhog.lession1;

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

public class TestCalc {
    public static void main(String[] args) {
        new MyCalculator();
    }
}

class MyCalculator extends Frame {
    public MyCalculator(){
        /*1、 三個文字框*/
        TextField num1 = new TextField(10);//設定該文字框所能容納的字元數
        TextField num2 = new TextField(10);//設定該文字框所能容納的字元數
        TextField num3 = new TextField(20);//設定該文字框所能容納的字元數
        /*2、 一個按鈕*/
        Button button = new Button("=");
        ButtonAu buttonAu = new ButtonAu(num1,num2,num3);
        //設定按鈕監聽器
        button.addActionListener(buttonAu);
        /*3、一個標籤*/
        Label label = new Label("+");

        //設定流式佈局
        setLayout(new FlowLayout());

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

        pack();
        setVisible(true);

        //設定監聽器,關閉程式
        addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

class ButtonAu implements ActionListener {
    private TextField num1,num2,num3;
    public  ButtonAu(TextField num1,TextField num2,TextField num3){
        this.num1 = num1;
        this.num2 = num2;
        this.num3 = num3;
    }
    @Override
    public void actionPerformed(ActionEvent e) {
        /*1、獲取num1與num2的值*/
        int n1 = Integer.parseInt(num1.getText());
        int n2 = Integer.parseInt(num2.getText());
        /*2、將兩個值相加傳給num3;*/
        num3.setText(""+(n1+n2)); //強轉

        /*3、設num2、num1的值為空*/
        num1.setText("");
        num2.setText("");
    }
}

實現效果:

image-20210424100328180

image-20210424100337002

升級版:(物件導向)+組合概念

package com.xbhog.lession1;

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

public class TestCalc {
    public static void main(String[] args) {
        new MyCalculator().loadFrame();
    }
}
//計算器類
class MyCalculator extends Frame {
    TextField num1;
    TextField num2;
    TextField num3;
    public void loadFrame(){
        /*1、 三個文字框*/
        num1 = new TextField(10);//設定該文字框所能容納的字元數
        num2 = new TextField(10);//設定該文字框所能容納的字元數
        num3 = new TextField(20);//設定該文字框所能容納的字元數
        /*2、 一個按鈕*/
        Button button = new Button("=");
        /*3、一個標籤*/
        Label label = new Label("+");

        ButtonAu buttonAu = new ButtonAu(this);  //this指代的當前計算器類
        //設定按鈕監聽器
        button.addActionListener(buttonAu);

        //設定流式佈局
        setLayout(new FlowLayout());
        add(num1);
        add(label);
        add(num2);
        add(button);
        add(num3);

        pack();
        setVisible(true);

        //設定監聽器,關閉程式
        addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
}

class ButtonAu implements ActionListener {
    private MyCalculator mycala = null;
    public  ButtonAu(MyCalculator mycala){
        this.mycala = mycala;
    }
    @Override
    public void actionPerformed(ActionEvent e) {
        /*1、獲取num1與num2的值*/
        int n1 = Integer.parseInt(mycala.num1.getText());
        int n2 = Integer.parseInt(mycala.num2.getText());
        /*2、將兩個值相加傳給num3;*/
        mycala.num3.setText(""+(n1+n2)); //強轉

        /*3、設num2、num1的值為空*/
        mycala.num1.setText("");
        mycala.num2.setText("");
    }
}

高階寫法:(內部類)

內部類最大的好處是:能夠暢通無阻的訪問外部類

package com.xbhog.lession1;

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

public class TestCalc {
    public static void main(String[] args) {
        new MyCalculator().loadFrame();
    }
}

class MyCalculator extends Frame {
    TextField num1;
    TextField num2;
    TextField num3;
    public void loadFrame(){
        /*1、 三個文字框*/
        num1 = new TextField(10);//設定該文字框所能容納的字元數
        num2 = new TextField(10);//設定該文字框所能容納的字元數
        num3 = new TextField(20);//設定該文字框所能容納的字元數
        /*2、 一個按鈕*/
        Button button = new Button("=");
        /*3、一個標籤*/
        Label label = new Label("+");

        //設定按鈕監聽器
        //傳入內部類
        button.addActionListener(new ButtonAu());

        //設定流式佈局
        setLayout(new FlowLayout());
        add(num1);
        add(label);
        add(num2);
        add(button);
        add(num3);

        pack();
        setVisible(true);

        //設定監聽器,關閉程式
        addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.exit(0);
            }
        });
    }
    class ButtonAu implements ActionListener {
        @Override
        public void actionPerformed(ActionEvent e) {
            /*1、獲取num1與num2的值*/
            int n1 = Integer.parseInt(num1.getText());
            int n2 = Integer.parseInt(num2.getText());
            /*2、將兩個值相加傳給num3;*/
            num3.setText(""+(n1+n2)); //強轉

            /*3、設num2、num1的值為空*/
            num1.setText("");
            num2.setText("");
        }
    }
}

畫筆:

import java.awt.*;

public class TestPaint {
    public static void main(String[] args) {
        //呼叫物件中的方法
        new Mypaint().LoadFrame();
    }
}

class Mypaint extends Frame {
    public void LoadFrame(){
        setBounds(100,100,600,500);  //設定畫布的長寬高
        setVisible(true);//設定可見性
    }

    @Override
    public void paint(Graphics g) {
        g.setColor(Color.CYAN); // 設定畫筆顏色

        g.fillOval(100,100,200,200);  //畫個實心圓;
        g.drawOval(200,300,100,100);

        g.draw3DRect(300,400,300,300,false);

        //養成習慣,畫筆用完,將他還原成最初的顏色
    }
}

設定了畫筆顏色:

image-20210425092714323

初始畫筆:

image-20210425092621192

滑鼠監聽事件:

目的:實現滑鼠畫畫--》最簡單的點選

image-20210428165653051

import java.awt.*;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.ArrayList;
import java.util.Iterator;

public class TestMouseLister {
    public static void main(String[] args) {
        new MyFrame("畫圖");
    }

}

class MyFrame extends Frame {
    //畫畫需要畫筆,需要監聽滑鼠當前的位置,需要集合來儲存這個點
    ArrayList points;

    public MyFrame(String title) {
        //設定標題
        super(title);
        setBounds(200,200,400,300);
        //儲存滑鼠點選的點
        points = new ArrayList<>();
        setVisible(true);
        //內部函式
        this.addMouseListener(new MouseAdapter(){
            @Override
            public void mousePressed(MouseEvent e) {
                MyFrame frame = (MyFrame) e.getSource();
                frame.addPoint(new Point(e.getX(),e.getY()));
                //每次點選滑鼠都需要重新畫一邊
                frame.repaint();
            }
        });
    }
/*    //介面卡模式
    private class MyMouseListener extends MouseAdapter {
        //滑鼠 按下,彈起,按住不放

        @Override
        public void mousePressed(MouseEvent e) {
            MyFrame frame = (MyFrame) e.getSource();
            frame.addPoint(new Point(e.getX(),e.getY()));

            //每次點選滑鼠都需要重新畫一邊
            frame.repaint();
        }
    }

  */
    @Override
    public void paint(Graphics g) {
        //畫畫,監聽滑鼠事件
        Iterator iterator = points.iterator();
        while(iterator.hasNext()){
            Point point = (Point) iterator.next();
            g.setColor(Color.BLUE);
            g.fillOval(point.x,point.y,10,10);
        }
    }
    //傳入點,新增到點的集合中
    public void addPoint(Point point){
        points.add(point);
    }
}

視窗監聽:

import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
public class TestWindowFrame {
    public static void main(String[] args) {
        new WindowsFrame();
    }
}

class WindowsFrame extends Frame {
    public WindowsFrame(){
        setBackground(Color.blue);
        setBounds(100,100,200,200);
        setVisible(true);
        //匿名函式
        this.addWindowListener(new WindowAdapter(){
            @Override
            public void windowClosing(WindowEvent e) {
                System.out.println("windowClosing");
                System.exit(0);
            }

            @Override
            public void windowClosed(WindowEvent e) {
                System.out.println("windowClosed");
            }

            @Override
            public void windowActivated(WindowEvent e) {
                WindowsFrame windowsFrame = (WindowsFrame) e.getSource();
                windowsFrame.setTitle("被啟用了");
                System.out.println("windowActivated");
            }
        });
    }
}

鍵盤監聽:

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(){
        setVisible(true);
        setBounds(100,200,300,400);

        //鍵盤監聽事件
        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("按倒了上鍵");
                }
            }
        });
    }
}

效果圖:

image-20210430095354318

相關文章