Java介面程式設計實戰(一)——簡易QQ登入介面
阿新 • • 發佈:2019-01-30
目標圖:
介面分析:
從上部和下部可以看出框架應該是用邊界佈局。
邊界上部新增一個標籤附圖,下部新增一個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())
歡迎各位在評論區留言探討~~