誰(shuí)知道通天的巴比倫塔耗費了多少沙石?又有誰(shuí)知道羅馬的建成經(jīng)歷了多少個(gè)日夜?我們惟一知道的是,沒(méi)有一塊塊磚石的壘砌,就沒(méi)有蜿蜒萬(wàn)里的長(cháng)城;沒(méi)有巨石和黏土的堆集,就沒(méi)有亙古不變的金字塔。由此可見(jiàn),基礎知識的準備對于我們學(xué)習任何事物都至關(guān)重要,那么,就讓我們從認識Swing的一些基礎功能開(kāi)始,啟動(dòng)我們建造羅馬的偉大工程吧!
前言 Java咖啡館已經(jīng)開(kāi)張不少時(shí)日了,如果你已經(jīng)喜歡上了Java這杯咖啡的味道,那么記得常來(lái)哦。這一次,我們?yōu)榇蠹覝蕚淞艘淮蟊銤獾目Х取獙⒁蚤_(kāi)發(fā)一個(gè)“連連看”游戲為藍本,和大家共同學(xué)習Java中Swing的用法,當你細心品味這杯咖啡后,你會(huì )發(fā)現,不但Java這杯咖啡還別有一番風(fēng)味,而且還學(xué)會(huì )了專(zhuān)業(yè)游戲的開(kāi)發(fā)方法,真是兩全其美!
為了讓大家先睹為快,下圖便是游戲的截圖。大家可以
下載游戲試玩(
下載游戲程序;下載源文件),然后在命令行方式下使用java -jar kyodai.jar來(lái)運行。此外,還可以到我的主頁(yè)http://www.ismyway.com上下載這個(gè)游戲的單機版以及手機版進(jìn)行試玩(見(jiàn)圖1)。
Java咖啡館以前介紹過(guò)AWT的知識,那么Swing和AWT究竟有什么區別呢?學(xué)習Java的人都可能聽(tīng)到或看到過(guò)重量級控件和輕量級控件這個(gè)字眼,AWT就是我們通常所指的重量級控件,Swing則是輕量級控件。我們都知道Java的口號是“一次編寫(xiě),到處運行”,這也就要求在我們的程序中,盡量使用純Java的代碼。很不幸的是,AWT依賴(lài)與本地平臺的接口,因此,在不同的操作系統上,使用AWT制作的界面看起來(lái)可能會(huì )有些細微區別。Swing則完全不同了,Swing是用純Java編寫(xiě)的,因此,使用Swing編寫(xiě)的界面能保證在所有平臺上有著(zhù)同樣的外觀(guān)。這里還有一個(gè)竅門(mén):在JDK中,為便于區別,所有Swing控件都以大寫(xiě)字母J開(kāi)頭,比如說(shuō)JButton(AWT 中對應的是Button),這樣你就很容易區分Swing控件和AWT控件了。
Swing初體驗
對于想學(xué)習Swing編程的朋友,我們特地為大家準備了一些小竅門(mén)。首先,下載并閱讀代碼是極有必要的。由于這是一篇關(guān)于Swing的教程,所以,我們只是盡可能講解一些與Swing有關(guān)的內容,與Swing無(wú)關(guān)的內容一般不會(huì )涉及,例如算法部分。其次,受篇幅限制,也不可能在這里將每部分代碼都寫(xiě)得完完整整的,所以,大家也需要對照完整代碼來(lái)看。最后,為了使大家更容易把精力集中在Swing學(xué)習上,我們也將游戲開(kāi)發(fā)中所需資源放在下載文件中,大家下載后便能夠編譯運行,看到執行結果。(下載游戲源文件)
1.頂層容器
什么是頂層容器?當我們使用Java進(jìn)行圖形編程的時(shí)候,圖在哪里繪制呢?我們需要一個(gè)能夠提供圖形繪制的容器,這個(gè)容器就被稱(chēng)為頂層容器,你也可以把它想象成一個(gè)窗口。頂層容器是進(jìn)行圖形編程的基礎,一切圖形化的東西,都必然包括在頂層容器中。在Swing中,我們有三種可以使用的頂層容器,它們分別是:
·JFrame:用來(lái)設計類(lèi)似于Windows系統中的窗口形式的應用程序。
·JDialog:和JFrame類(lèi)似,只不過(guò)JDialog是用來(lái)設計對話(huà)框。
·JApplet:用來(lái)設計可以在嵌入在網(wǎng)頁(yè)中的Java小程序。
如果需要使用Swing制作一個(gè)窗口類(lèi)程序,我們的代碼看起來(lái)應該是這樣:
import javax.swing.*;
public class KyodaiUI extends JFrame { …… } |
2.控件
控件是構成應用
程序界面的基本元素,按鈕、文本框、進(jìn)度條等,這些都是控件??丶?這里我們只討論可視化控件)又可以分為容器控件和非容器控件。從字面意義上來(lái)理解,容器控件就是能包含其他控件的特殊控件,例如,Java中的JPanel控件就屬于容器型控件,我們可以在JPanel中放置按鈕、文本框等非容器控件,你甚至可以在JPanel中再放置若干個(gè)JPanel控件(值得注意的是,頂層容器也是容器型控件,每一個(gè)窗口應用
程序中有且只能有一個(gè)頂層容器控件,換句話(huà)說(shuō),頂層容器不能包括在其他的控件中)。
Java中的容器控件有很多,除剛才提到的JPanel外,還有JTabbedPane、JScrollPane等,非容器控件有JButton、JLabel、JTextField等。如果你需要向某個(gè)容器型的控件中添加控件,你可以使用 add(Component comp) 方法來(lái)實(shí)現,如:
JPanel panel = new JPanel(); JButton button = new JButton(); panel.add(button); |
3.布局
什么是布局?布局是Java中用來(lái)控制控件排列位置的一種界面
管理系統。使用過(guò)其他可視化編程開(kāi)發(fā)語(yǔ)言的人在初次接觸Java界面設計時(shí),總會(huì )感覺(jué)到Java界面設計很別扭:居然沒(méi)有提供所見(jiàn)即所得的設置控件坐標的方法!然而,事實(shí)證明,Java本身提供的布局管理系統也一樣能夠出色地完成我們的需要,而且在跨平臺時(shí)表現得更有優(yōu)勢。
常用的布局有:
·BorderLayout:將界面分割為上下左右以及中間一塊區域的管理系統,在BorderLayout布局中,最多你只能放5個(gè)控件,如果超過(guò)5個(gè)控件,建議還是選用其他的布局系統吧。
·GridLayout:GridLayout是將用戶(hù)界面切割為棋盤(pán)一樣的布局管理系統。如果我們要設計一個(gè)類(lèi)似于Windows中自帶的計算器軟件,GridLayout無(wú)疑是最佳選擇。
·FlowLayout:FlowLayout與上述兩類(lèi)布局管理系統不太一樣,在FlowLayout中,你不必指定每個(gè)控件放在哪,你只需要把控件加入到FlowLayout中,FlowLayout就會(huì )根據你添加控件的順序依次放置控件,如果空間不夠,會(huì )自動(dòng)換行。
在對這幾個(gè)布局管理系統有了基本認識后,我們就一起來(lái)進(jìn)入界面設計吧。在仔細觀(guān)察了
QQ游戲中“連連看”的設定后,我們可以發(fā)現,整個(gè)界面分為三個(gè)區,頂部是系統菜單區,占地面積最大的是用戶(hù)游戲區,另外還有一個(gè)用戶(hù)交互區,每個(gè)區域中都由若干控件組成。
這么多控件,我們從哪開(kāi)始入手呢?由于容器控件中可以放置其他控件,因此,我們只需要先確定放置的容器控件就可以了。 既然已經(jīng)知道需要使用容器控件的個(gè)數,接下來(lái)讓我們就進(jìn)入布局管理系統的選擇。用GridLayout?似乎有點(diǎn)勉強,用FlowLayout?還有更好的選擇嗎?對了,我想你一定想到了是BorderLayout吧,如下圖2所示。
動(dòng)手之前,大家一定要注意的是,界面的設計要先考慮好尺寸,不管是主
程序界面的大小還是每個(gè)區域的大小,如果沒(méi)有設計好合適的尺寸,將來(lái)改動(dòng)起來(lái)會(huì )十分痛苦。
下面便是相應的源
程序:
import java.awt.*; import javax.swing.*;
public class KyodaiUI extends JFrame { public KyodaiUI() { this.setSize(780, 500); //將窗體的大小設定為780*500 this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setResizable(false); //窗體不能改變大小 this.setTitle("連連看"); //設置標題
JPanel toolBar = new JPanel(); toolBar.setBackground(Color.white); toolBar.setPreferredSize(new Dimension(780, 48));
JPanel actionPanel = new JPanel(); //新建JPanel型的控件 actionPanel.setBackground(Color.yellow); //設置背景色 actionPanel.setPreferredSize(new Dimension(160, 380)); //設置大小
JPanel contentPanel = new JPanel(); contentPanel.setBackground(Color.blue); contentPanel.setPreferredSize(new Dimension(620, 380)); this.getContentPane().add(toolBar, BorderLayout.NORTH); this.getContentPane().add(actionPanel, BorderLayout.EAST); this.getContentPane().add(contentPanel, BorderLayout.CENTER); }
public static void main(String[] args) throws HeadlessException { KyodaiUI kyodaiUI = new KyodaiUI(); kyodaiUI.show(); } } |
讓我們來(lái)看看上面這段
程序是如何運行的。首先,extends JFrame表明了這是從JFrame中繼承過(guò)來(lái)的,JFrame是最基本的頂層容器控件。實(shí)際上,在JDK中,以字母J打頭的控件都是Swing控件。然后設置了容器的屬性,其中,setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)是用來(lái)告訴Java虛擬機,當用戶(hù)點(diǎn)擊窗體右上角的“關(guān)閉”按鈕時(shí),關(guān)閉該窗口進(jìn)程。如果不這么做的話(huà),你會(huì )發(fā)現雖然你可以點(diǎn)將窗口關(guān)閉,然而
程序卻沒(méi)有退出。在接下來(lái)的代碼中,我們?yōu)轫攲尤萜魈砑恿巳齻€(gè)Panel容器。要注意的是,在A(yíng)WT中,我們可以直接寫(xiě)為add(toolBar, BorderLayout.NORTH) ,而在 Swing 中卻一定要寫(xiě)成getContentPane(). add(toolBar, BorderLayout.NORTH) ,否則
程序就會(huì )出錯。
現在大家可以放在編譯運行看看,是不是和我的運行結果一樣(見(jiàn)圖3)?
4.邊框
雖然我們使用了不同前景色來(lái)區別不同的區域,然而卻沒(méi)有層次感,加上邊框一定會(huì )漂亮許多。
在Java中,所有以J打頭的Swing控件都可以使用setBorder方法來(lái)為自己設置邊框。邊框有很多種,線(xiàn)型、凸起、凹下、空的,你甚至可以自由組合形成個(gè)人風(fēng)格。所有的Border都必須使用javax.swing.BorderFactory中提供的靜態(tài)方法來(lái)創(chuàng )建,比如:
Border border = BorderFactory.createBevelBorder(BevelBorder.LOWERED, new Color(45, 92, 162), new Color(43, 66, 97), new Color(45, 92, 162), new Color(84, 123, 200)); |
現在,我們將toolBar.setBackground(Color.white)改為toolBar.setBorder(border),立體效果是不是已經(jīng)出現了?
實(shí)戰——寫(xiě)上自己的大名 現在我們已經(jīng)有了一個(gè)能夠運行的界面了,雖然它什么也做不了,但是請你別慌,羅馬不是一天建成的。
現在讓我們在菜單區提供一個(gè)“關(guān)于”菜單,用來(lái)顯示
程序的信息,難道你不想讓別人知道你的大名嗎?Swing本身就提供了現成的按鈕控件JButton,我們只需要創(chuàng )建一個(gè)新的按鈕:JButton about = new JButton("關(guān)于");這個(gè)按鈕該怎么放到菜單區而不是別的地方呢?我們可以加入下面的代碼:toolBar.add(about);咦,怎么點(diǎn)按鈕沒(méi)有反應?這是因為你還沒(méi)有告訴
程序點(diǎn)擊按鈕時(shí)要做什么事情呢。要為按鈕添加事件響應,首先需要使用about.addActionListener(this)來(lái)告訴
程序監聽(tīng)按鈕按下時(shí)的事件,由于A(yíng)ctionListener是一個(gè)
程序接口,因此,我們在類(lèi)的申明的地方也得做一點(diǎn)小小的修改:public class KyodaiUI extends JFrame implements ActionListener {...}實(shí)現ActionListener接口是為了告訴
程序我要進(jìn)行事件處理了。當然,最后我們得添加響應事件的代碼:
public void actionPerformed(ActionEvent e) { if (e.getSource() == about) { JOptionPane.showMessageDialog(this, "我的大名", "關(guān)于", JOptionPane.INFORMATION_MESSAGE); return ; } } |
其中,e.getSource() 表示當前觸發(fā)事件的控件,由于我們的
程序中往往會(huì )有多個(gè)以上的控件,這些控件都有可能產(chǎn)生事件,所以我們必須使用這個(gè)方法來(lái)找到產(chǎn)生事情的控件。
小結 讓我們一起來(lái)回顧一下今天所學(xué)的內容:首先我們了解了頂層容器,也知道了控件分為容器控件和非容器控件,同時(shí)還知道使用邊框,最后,我們還小小的處理了一下按鈕的事件。
學(xué)而時(shí)習之,不亦說(shuō)乎,就讓我留點(diǎn)小小的作業(yè),幫助大家鞏固一下今天所學(xué)的內容:上面我們添加的按鈕在菜單欄的中間,并不美觀(guān),請大家放到左邊或右邊試試。
最后向大家提供一些比較好的參考資料:
●Creating a GUI with JFC/Swing
http://java.sun.com/docs/books/tutorial/uiswing/index.html
●2D Graphics
http://java.sun.com/docs/books/tutorial/2d/index.html
●JDK API
http://java.sun.com/j2se/1.4.2/docs/api/index.html