Java介面程式設計實戰（一）——簡易QQ登入介面

Thinkd0or發表於2018-05-30
Java程式設計

目標圖：

介面分析：

從上部和下部可以看出框架應該是用邊界佈局。

邊界上部新增一個標籤附圖，下部新增一個JPanel皮膚構成流式佈局帶一個按鈕和一個標籤連結。

在中間部分中，新增一個皮膚，新增選項卡窗格、文字框、密碼框、多選框、標籤等元件。

程式碼實現：

import java.awt.*;
import javax.swing.*;
public class Swing_exercise3 extends JFrame{

	//定義元件
	//上部元件
	JLabel jl1;	
	//下部元件
	JPanel jp1;
	JButton jb1;
	JLabel jl2;
	//中部元件
	JPanel jp2,jp3,jp4;
	JTabbedPane jtbp;
	JTextField jtf1;
	JPasswordField jpf1;
	JCheckBox jcb1,jcb2;
	JLabel jl3,jl4,jl5;
	
	public static void main(String[] args) {
		Swing_exercise3 a=new Swing_exercise3();

	}
	public Swing_exercise3()
	{
		//建立元件
		//上部元件
		jl1=new JLabel(new ImageIcon("image/qq.png"));	//把圖片新增到標籤中，利用ImageIcon類
		//下部元件
		jp1=new JPanel();
		jb1=new JButton("安全登入");
		jl2=new JLabel("<html><a href='www.qq.com'>註冊賬號</a>");	//設定標籤帶有連結
		jl2.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));		//設定滑鼠放到標籤上會變成一隻手
		//中部元件
		jp2=new JPanel();
		jtbp=new JTabbedPane();
		jtf1=new JTextField(10);	
		jpf1=new JPasswordField(10);
		jcb1=new JCheckBox("自動登入");
		jcb2=new JCheckBox("記住密碼");
		jl3=new JLabel("<html><a href='www.qq.com'>找回密碼</a>");
		jl3.setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR));
		jl4=new JLabel(new ImageIcon("image/qq賬號.png"));	
		jl5=new JLabel(new ImageIcon("image/qq密碼.png"));
		jp3=new JPanel();
		jp4=new JPanel();
		jp5=new JPanel();
		//新增元件
		//下部元件
		jp1.add(jb1);
		jp1.add(jl2);
		//中部元件
		jp2.add(jl4);
		jp2.add(jtf1);
		jp2.add(jl5);
		jp2.add(jpf1);
		jp2.add(jcb1);
		jp2.add(jcb2);
		jp2.add(jl3);
		jtbp.add("QQ登入",jp2);		//把皮膚新增到選項卡中
		jtbp.add("手機號碼",jp3);
		jtbp.add("電子郵箱",jp4);
		
		this.add(jl1,BorderLayout.NORTH);
		this.add(jp1,BorderLayout.SOUTH);
		this.add(jtbp);		
		//設定佈局管理器
		
		//設定窗體實行
		this.setTitle("QQ");		//設定介面標題
		this.setIconImage(new ImageIcon("image/qq.gif").getImage());	//設定標題影像是qq企鵝
		this.setSize(350, 300);				//設定介面畫素
		this.setLocation(200, 200);			//設定介面初始位置
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);	//設定虛擬機器和介面一同關閉
		this.setVisible(true);				//設定介面視覺化
	}
}

如何在標籤新增圖片？

先把在你的工程裡建立一個folder資料夾，然後把圖片移到資料夾裡，利用ImageIcon類來取出圖片，可以模仿下述程式碼，我的資料夾叫image，圖片名叫qq賬號.png

new ImageIcon("image/qq賬號.png")    //新建一個ImageIcon物件，內容是qq賬號圖片

如何把滑鼠顯示成小手？

setCursor(Cursor.getPredefinedCursor(Cursor.HAND_CURSOR))    //滑鼠移動位置顯示小手

如何設定標題圖片？

我的資料夾叫image，圖片名叫qq.gif

setIconImage(new ImageIcon("image/qq.gif").getImage())


歡迎各位在評論區留言探討~~

相關文章