Java 圖形化介面設計（GUI）實戰練習（程式碼）

關於Java圖形化介面設計，基礎知識網上可搜，下面簡單介紹一下重點概念，然後就由淺入深程式碼例項。

程式是為了方便使用者使用的，Java引入圖形化介面程式設計。

1.JFrame 是容器類

2.AWT 是抽象視窗元件工具包，是 Java 最早的用於編寫圖形節目應用程式的開發包。

3.Swing 是為了解決 AWT 存在的問題而新開發的包，它以 AWT 為基礎的。

程式碼例項1：

package com.zhouzhou;
//練習網格佈局
import java.awt.*;
import javax.swing.*;

public class Demo9 extends JFrame {
    // 定義元件
    int size = 9;
    JButton jbs[] = new JButton[size];

    public static void main(String[] args) {
        // 建立例項
        Demo9 de = new Demo9();
    }

    // 建構函式
    public Demo9() {

        // 建立元件
        for (int i = 0; i < size; i++) {
            jbs[i] = new JButton(String.valueOf(i));
        }
        // 設定網格佈局,這裡只有前兩個引數（行/列）3和3 的話，網格沒有空隙
        this.setLayout(new GridLayout(3, 3, 10, 10));

        // 新增元件
        for (int i = 0; i < size; i++) {
            this.add(jbs[i]);
        }
        // 設定窗體屬性
        this.setTitle("網格佈局案例");
        this.setSize(300, 400);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setLocation(200, 200);

        // 顯示
        this.setVisible(true);
    }
}

程式碼例項2：

package com.zhouzhou;

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

public class Demo10 extends JFrame {
    // 定義元件
    JPanel jp1, jp2;
    JButton jb1, jb2, jb3, jb4, jb5, jb6;

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Demo10 de = new Demo10();
    }

    // 建構函式
    public Demo10() {
        // 建立元件

        jp1 = new JPanel();
        jp2 = new JPanel();

        jb1 = new JButton("西瓜");
        jb2 = new JButton("蘋果");
        jb3 = new JButton("荔枝");
        jb4 = new JButton("葡萄");
        jb5 = new JButton("桔子");
        jb6 = new JButton("香蕉");

        // 設定佈局管理器，
        //JPanel佈局預設是BorderLoyout// 新增JPanel
        //JPanel屬於容器類元件，可以加入別的元件
        jp1.add(jb1);
        jp1.add(jb2);
        
        jp2.add(jb3);
        jp2.add(jb4);
        jp2.add(jb5);

        // 把jpanel 加入JFrame
        this.add(jp1, BorderLayout.NORTH);
        this.add(jb6, BorderLayout.CENTER);
        this.add(jp2, BorderLayout.SOUTH);

        this.setSize(300, 400);
        this.setLocation(200, 200);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);
    }
}

程式碼例項3：

package com.zhouzhou;

import java.awt.*;

import javax.swing.*;

public class Demo11 extends JFrame {

    // 定義元件
    JPanel jp1, jp2, jp3;
    JLabel jlb1, jlb2;
    JButton jb1, jb2;
    JTextField jtf1;
    JPasswordField jpf1;

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Demo11 d1 = new Demo11();

    }

    // 建構函式
    public Demo11() {

        jp1 = new JPanel();
        jp2 = new JPanel();
        jp3 = new JPanel();

        jlb1 = new JLabel("使用者名稱");
        jlb2 = new JLabel("密    碼");

        jb1 = new JButton("登入");
        jb2 = new JButton("取消");

        jtf1 = new JTextField(10);

        jpf1 = new JPasswordField(10);// 設定佈局管理(上面忘記：extends JFrame，這裡出錯了)
        this.setLayout(new GridLayout(3, 1));

        // 加入各個元件
        jp1.add(jlb1);
        jp1.add(jtf1);

        jp2.add(jlb2);
        jp2.add(jpf1);

        jp3.add(jb1);
        jp3.add(jb2);

        // 加入到JFrame
        this.add(jp1);
        this.add(jp2);
        this.add(jp3);

        this.setSize(250, 150);
        this.setTitle("登入");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);
    }
}

程式碼例項4：

package com.zhouzhou;

import java.awt.*;

import javax.swing.*;

public class Demo12 extends JFrame {

    // 定義元件
    JPanel jp1, jp2, jp3;
    JLabel jlb1, jlb2;
    JCheckBox jcb1, jcb2, jcb3;
    JRadioButton jrb1, jrb2;
    JButton jb1, jb2;
    // 單選設定
    ButtonGroup bg, bg2;

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Demo12 d2 = new Demo12();

    }

    // 建構函式
    public Demo12() {
        jp1 = new JPanel();
        jp2 = new JPanel();
        jp3 = new JPanel();

        jlb1 = new JLabel("你喜歡的運動");
        jlb2 = new JLabel("你的性別");

        jcb1 = new JCheckBox("足球");
        jcb2 = new JCheckBox("籃球");
        jcb3 = new JCheckBox("網球");
        // 下面可以設定單選
        // ButtonGroup bg2=new ButtonGroup();
        // bg2.add(jcb1);
        // bg2.add(jcb2);
        // bg2.add(jcb2);

        jrb1 = new JRadioButton("男");
        jrb2 = new JRadioButton("女");
        // 一定要把jrb1，jrb2放入到一個ButtonGroup裡面
        ButtonGroup bg = new ButtonGroup();
        bg.add(jrb1);
        bg.add(jrb2);

        jb1 = new JButton("註冊使用者");
        jb2 = new JButton("取消使用者");

        this.setLayout(new GridLayout(3, 1));

        jp1.add(jlb1);
        jp1.add(jcb1);
        jp1.add(jcb2);
        jp1.add(jcb3);

        jp2.add(jlb2);
        jp2.add(jrb1);
        jp2.add(jrb2);

        jp3.add(jb1);
        jp3.add(jb2);

        // 加入到JFrame
        this.add(jp1);
        this.add(jp2);
        this.add(jp3);

        this.setSize(300, 200);
        this.setTitle("使用者註冊介面");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);

    }
}

程式碼例項5：

package com.zhouzhou;

import java.awt.*;

import javax.swing.*;

public class Demo13 extends JFrame {
    // 定義元件
    JPanel jp1, jp2;
    JLabel jlb1, jlb2;
    JComboBox jcb1;
    JList jl1;
    JScrollPane jsp;

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Demo13 d3 = new Demo13();
    }

    public Demo13() {

        jp1 = new JPanel();
        jp2 = new JPanel();

        jlb1 = new JLabel("您的籍貫是");
        jlb2 = new JLabel("您喜歡旅遊的地區");

        String[] jg = { "北京", "上海", "天津", "重慶", "江蘇" };
        jcb1 = new JComboBox(jg);

        String[] jg2 = { "故宮", "長城", "九寨溝", "天安門", "火星" };
        jl1 = new JList(jg2);
        // 設定你希望顯示多少個選項
        jl1.setVisibleRowCount(1);
        jsp = new JScrollPane(jl1);

        // 佈局管理
        this.setLayout(new GridLayout(3, 1));

        // 新增元件
        jp1.add(jlb1);
        jp1.add(jcb1);

        jp2.add(jlb2);
        jp2.add(jsp);

        this.add(jp1);
        this.add(jp2);

        this.setSize(300, 400);
        this.setTitle("下拉框練習");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);

    }

}

程式碼例項6：

package com.zhouzhou;

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

public class Demo14 extends JFrame {

    // 定義元件
    JSplitPane jsp;
    JList jList;
    JLabel jl1;

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Demo14 d4 = new Demo14();

    }

    public Demo14() {

        // 建立元件
        String[] words = { "boy", "gril", "bird", "box" };
        jList = new JList(words);

        // JLabel可以放置圖片
        jl1 = new JLabel(new ImageIcon("images/1.jpeg"));

        // 拆分窗格
        jsp = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, jList, jl1);
        // 可以手動伸縮變化
        jsp.setOneTouchExpandable(true);

        // 設定佈局管理器，它本身就是borderLayout佈局，就不用再設定了

        // 新增元件
        this.add(jsp);

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

    }
}

程式碼例項7：

package com.zhouzhou;

import java.awt.*;

import javax.swing.*;

public class Demo15 extends JFrame {

    // 定義元件
    JTextArea jta = null;// 多行文字框
    JScrollPane jsp = null;
    JPanel jp1 = null;// 面板
    JComboBox jcb = null;// 下拉框元件
    JTextField jtf = null;// 文字框
    JButton jb = null;

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Demo15 d5 = new Demo15();

    }

    // 建構函式
    public Demo15() {
        // 多行文字框會根據情況自己調節大小
        jta = new JTextArea();
        jsp = new JScrollPane(jta);
        jp1 = new JPanel();
        String j2[] = { "北京", "商行", "農行", "師大", "附中", "哈爾濱" };
        jcb = new JComboBox(j2);
        // 文字框最好設定初值
        jtf = new JTextField(10);
        jb = new JButton("傳送");
        // 佈局管理
        // this.setLayout(new GridLayout(1, 1));
        // 新增
        jp1.add(jcb);
        jp1.add(jtf);
        jp1.add(jb);
        // 多行文字框是放在這裡(JFrame)的!!!
        // 因為上面又新增可以滾動的功能,這裡傳入jsp，而不是jta
        this.add(jsp);
        // 下面這裡就需要定位處理
        this.add(jp1, BorderLayout.SOUTH);

        // 設定窗體屬性,z這裡很厲害!!
        this.setIconImage((new ImageIcon("images\\3.jpg")).getImage());

        this.setSize(300, 200);
        this.setTitle("QQ登入");
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);

    }
}

程式碼例項8：

package com.zhouzhou;

//QQ登入介面製作
import java.awt.*;
import javax.swing.*;

public class Demo16 extends JFrame {

    // 北部區域
    JLabel jl1;

    // 南部區域
    JButton jb1, jb2, jb3;
    JPanel jp1;

    // 中部區域
    JTabbedPane jtp;// 選項卡窗格
    JPanel jp2, jp3, jp4;

    JLabel jl2, jl3, jl4, jl5;
    // 號碼輸入文字框
    JTextField jtf;
    // 密碼
    JPasswordField jpf;
    // 清除號碼
    JButton jb4;
    // 隱身登入、記住密碼
    JCheckBox jcb1, jcb2;

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        new Demo16();

    }

    public Demo16() {

        // 建立元件
        jl2 = new JLabel("QQ號碼", JLabel.CENTER);
        jl3 = new JLabel("QQ密碼", JLabel.CENTER);
        jl4 = new JLabel("忘記密碼", JLabel.CENTER);
        jl4.setFont(new Font("宋體", Font.PLAIN, 16));// 設定字型樣式
        jl4.setForeground(Color.BLUE);// 設定字型顏色
        jl5 = new JLabel("<html><a href='www.qq.com'>申請密碼保護</a></html>");
        // 滑鼠觸發變化
        jl5.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));

        jtf = new JTextField();
        jpf = new JPasswordField();
        jb4 = new JButton(new ImageIcon("images\\login.png"));

        jcb1 = new JCheckBox("隱身登入");
        jcb2 = new JCheckBox("記住密碼");

        // 北部區域
        jl1 = new JLabel(new ImageIcon("images\\headpicture.jpg"));

        // 南部區域
        jp1 = new JPanel();
        jb1 = new JButton(new ImageIcon("images\\login.png"));
        jb2 = new JButton(new ImageIcon("images\\delete.png"));
        jb3 = new JButton(new ImageIcon("images\\register.png"));

        // 中部區域
        jtp = new JTabbedPane();
        jp2 = new JPanel();
        jp3 = new JPanel();
        jp3.setBackground(Color.RED);// 給面板設定背景
        jp4 = new JPanel();
        jp4.setBackground(new Color(0, 0, 255));

        // 將面板新增到選項卡窗格上
        jtp.add("QQ號碼", jp2);// 引數：選項卡名稱，面板
        jtp.add("手機號碼", jp3);
        jtp.add("電子郵箱", jp4);

        // 設定佈局
        jp2.setLayout(new GridLayout(3, 3));

        // 新增元件
        jp1.add(jb1);
        jp1.add(jb2);
        jp1.add(jb3);

        jp2.add(jl2);
        jp2.add(jtf);
        jp2.add(jb4);
        jp2.add(jl3);
        jp2.add(jpf);
        jp2.add(jl4);
        jp2.add(jcb1);
        jp2.add(jcb2);
        jp2.add(jl5);

        this.add(jp1, BorderLayout.SOUTH);
        this.add(jl1, BorderLayout.NORTH);
        this.add(jtp, BorderLayout.CENTER);

        // 展示元件
        ImageIcon icon = new ImageIcon("images\\qq.png");
        this.setIconImage(icon.getImage());// 給窗體設定圖示方法
        this.setSize(400, 380);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);

    }
}

程式碼例項9：

按 Ctrl+C 複製程式碼

Java 圖形化介面設計（GUI）實戰練習（程式碼）

Java 圖形化介面設計（GUI）實戰練習（程式碼）

Java圖形化介面設計——佈局管理器之null佈局（空佈局）

Java圖形化介面設計——佈局管理器之CardLayout（卡片佈局）

Java圖形化介面設計——佈局管理器

Java圖形化介面設計——容器（JFrame）

二十九、Java圖形化介面設計——佈局管理器之FlowLayout（流式佈局）

Java圖形化介面設計——佈局管理器之GridLayout（網格佈局）之計算器

【Java系列】（一）Java圖形化介面設計——中間容器（Jpanel）

Java實現圖形化介面的計算器加法小程式

跟我學JAVA（5）圖形化介面設計——佈局管理器之FlowLayout（流式佈局）

Java 圖形化介面設計（GUI）實戰練習（程式碼）

相關推薦