swing實現QQ登錄界面1.0( 實現了同一張圖片只加載一次)、(以及實現簡單的布局面板添加背景圖片控件的標籤控件和添加一個關閉按鈕控件)

  • 2021 年 3 月 16 日
  • 筆記

swing實現QQ登錄界面1.0( 實現了同一張圖片只加載一次)、(以及實現簡單的布局面板添加背景圖片控件的標籤控件和添加一個關閉按鈕控件)

 

代碼思路分析:

1.(同一張圖片僅僅需要加載一次就夠了,下次給一個圖片路徑,如果加載過,就直接拿去用就可以了):我們選擇封裝在一個工具類里,如何實現同一種圖片只加載一次呢?

我們選擇了Map集合:

(Map集合的好處就是避免重複,同時Map還有鍵值對,鍵:放圖片路徑(具有唯一性),值:放圖片控件。可以通過圖片路徑獲得圖片控件)

我們定義了靜態的(工具類嘛)Map集合變量,還有靜態的獲取圖片控件的方法

 

2.實現簡單的布局面板添加背景圖片控件的標籤控件

思路:我們知道qq登錄界面底層布局就是一張背景圖片:

 

 

我們要做的事情是把背景圖片控件添加到標籤控件中,再添加到布局控件里。

(1)我們定義一個圖片控件變量,通過上面的工具類獲取到圖片控件。

(2)定義好一個標籤控件,創建的時候,把圖片控件當作參數傳入(設置它的大小是背景圖片的大小)

(3)把裝了圖片控件的標籤控件添加到布局控件中。

 

 

3.添加一個關閉按鈕控件

(1)定義一個按鈕關閉變量,創建的時候,把關閉的圖標作為參數傳入,(設置一下按鈕的邊框為null,設置一下按鈕的邊界,設置一下按鈕鼠標靠近時的切換圖片呀   等基本的設置)

(2)通過鼠標監聽事件來銷毀登錄界面的對象。

 

 

最後整個小項目的代碼分析:

qq登錄界面邏輯

1.qqDemo 的窗體,進行基本設置:內容面板、標題加載獲取背景圖片、窗體大小(與背景圖片一樣大)、位置居中、退出的模式、(加上去除窗體修飾),窗體可見性.

注意!!先設置完大小,再居中。(先加上去除窗體修飾),再窗體可見性

2.考慮到qq登錄界面的底層就是一種背景圖片:

(1)      添加一個圖片控件變量

(2)      獲取圖片,為了牛逼一點實現,我們選擇通過自定義一個圖片工具類ImageUtil,實現獲取的圖片(同一張圖片僅僅需要加載一次就夠了,下次給一個圖片路徑,如果加載過,就直接拿去用就可以了)

 

 

 

 

(2,1)到這裡就可以獲取背景圖片啦,並且可以設置窗體大小啦

(3)      構造方法的其他組件的初始化封裝成一個方法initComponents,避免了直接在構造方法的臃腫。

(4)      獲取完背景圖片,就要為窗體設置上背景圖片:先通過標籤控件裝上控件,再通過布局面板添加裝上了圖片控件的的標籤控件。

 

 

(5)      再做一個關閉的按鈕:是因為我們選擇了窗體無修飾,關閉有點麻煩。

現定義一個按鈕控件變量,然後添加圖標,設置邊界、去邊框+ 鼠標經過時的圖標變化。最後通過事件:實現點擊關閉按鈕來銷毀窗體–(選擇了Lamdba表達式(把匿名內部類當作參數))

 

 

全部代碼:

package QQLogin;

public class qqLoginTest {
    public static void main(String[] args) {
        new QQLoginDesign();
    }
}



package QQLogin;

import java.util.HashMap;
import java.util.Map;

import javax.swing.ImageIcon;

/**
 * 加載圖片工具類,實現加載過的圖片可以下次直接獲取
 * @author 
 *
 */
public class ImageUtil {
    //定義Map集合(鍵:圖片路徑, 值 圖片控件)
    public static Map<String, ImageIcon> mapImage = new HashMap<String, ImageIcon>();
    
    public static ImageIcon getImage(String path) {
        //判斷圖片是否加載過
        if(mapImage.containsKey(path)) {    //加載過的圖片,就直接返回圖片控件
            return mapImage.get(path);
        }
        //沒有加載過的圖片
        ImageIcon image = new ImageIcon(path);
        mapImage.put(path, image);
        return image;
    }
}



package QQLogin;

import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

/**
 * qq登錄界面類
 * @author 
 *
 */
public class QQLoginDesign extends JFrame{
    //背景圖片控件
    private ImageIcon background = null;
    //內容面板
    private JPanel contentPane = null;
    //取消按鈕
    JButton closeButton = null;
    //完成基本的設置工作
    public QQLoginDesign() {
        //設置窗體標題
        setTitle("qq登錄界面");
        //獲取背景圖片
        background = ImageUtil.getImage("D:\\EclispeProjects\\Demo15\\src\\QQLogin\\qqPhotos\\background.png");
        //設置窗體的大小,與背景圖片一樣大
        setSize(background.getIconWidth(), background.getIconHeight());
        //設置居中
        setLocationRelativeTo(null);
        //設置窗體的內容面板
        contentPane = (JPanel) getContentPane();
        //其餘部分的初始化工作,封裝成一個函數initComponents
        initComponents();
        //取消窗體修飾
        setUndecorated(true);
        //設置窗體的可見性
        setVisible(true);
        //設置窗體退出的模式
//        setDefaultCloseOperation(DO_NOTHING_ON_CLOSE);
        setDefaultCloseOperation(EXIT_ON_CLOSE);
    }
    /**
     * 完成窗體的其餘部分的初始化工作
     */
    private void initComponents() {
        // 將內容面板設置無布局
        contentPane.setLayout(null);
        //設置背景圖片
        setBackground("D:\\EclispeProjects\\Demo15\\src\\QQLogin\\qqPhotos\\background.png");
        //創建取消按鈕,並為取消按鈕添加圖片控件
        closeButton = new JButton(new ImageIcon("D:\\EclispeProjects\\Demo15\\src\\QQLogin\\qqPhotos\\close.png"));
        //設置取消按鈕的邊界
        closeButton.setBounds(506, 0, 30, 30);
        //取消邊框
        closeButton.setBorder(null);
        //添加取消按鈕事件
        closeJFrame();
        //內容面板添加取消按鈕
        contentPane.add(closeButton);
    }
    private void closeJFrame() {
        closeButton.addActionListener(e -> this.dispose());
    }
    /**
     * 設置自定義背景圖片
     */
    private void setBackground(String path) {
        //獲取背景圖片
        ImageIcon imageIcon =  ImageUtil.getImage(path);
        //通過標籤控件封裝圖片標籤後,添加到布局控件
        JLabel jLabelImage = new JLabel(imageIcon);
        //設置標籤邊界
        jLabelImage.setBounds(0, 0, imageIcon.getIconWidth(), imageIcon.getIconHeight());
        //添加至布局面板,z 軸 的距離new Integer(Integer.MIN_VALUE)
        getLayeredPane().add(jLabelImage, new Integer(Integer.MIN_VALUE));
        
        //設置內容面板不透明為假
        contentPane.setOpaque(false);
    }
}