Ja1511第12章圖形界面設計

1、第 12 章 圖形界面設計1本章主要內容2圖形用戶界面工具包圖形用戶界面工具包SwingSwing組件分類組件分類Swing容器的內部結構容器的內部結構創(chuàng)建組件創(chuàng)建組件窗口的布局管理設計窗口的布局管理設計1212.1.1圖圖形用形用戶戶界面界面概概述述圖形用戶界面圖形用戶界面(Graphics User Interface，GUI） 用圖形的方式，借助菜單。按鈕等標準界面元用圖形的方式，借助菜單。按鈕等標準界面元素和鼠標操作，幫助用戶方便地向計算機系統(tǒng)素和鼠標操作，幫助用戶方便地向計算機系統(tǒng)發(fā)出指令、啟動操作，并將系統(tǒng)運行的結果同發(fā)出指令、啟動操作，并將系統(tǒng)運行的結果同樣以圖形方式顯示給用戶的

2、技術。樣以圖形方式顯示給用戶的技術。Java的的GUI程序設計是程序設計是Java程序設計的基礎。程序設計的基礎。34圖形界面編程的三個要素：圖形界面編程的三個要素：q 圖形界面對象及其框架（圖形界面對象之間的包含關系）q 圖形界面對象的布局（圖形界面對象之間的位置關系）q 圖形界面對象上的事件響應（圖形界面對象上的動作）5面向對象的圖形用戶界面面向對象的圖形用戶界面：基于“面向對象面向對象”的思想互相交換信息，即盡可能在屏幕上用形象的圖標和窗口等來代表有用的資源和可啟用的對象。圖形界面對象：圖形界面對象：代表特定的軟件、命令、過程、資源、提示信息等q 圖標（Icon）q 窗口（Window）

3、q 菜單（Menu）/菜單項（Menu Item）q 按鈕（Button）、文本框（Label）、列表框（List）q Java提供的兩個處理圖形用戶界面的類庫提供的兩個處理圖形用戶界面的類庫 java. awt包包 和和 javax. swing包包 5抽象窗口抽象窗口工具集工具集awt的擴展，根據(jù)的擴展，根據(jù)給定環(huán)境調整外觀給定環(huán)境調整外觀和感覺。和感覺。6Swing與AWT之間的關系Swing誕生之前，Java中用來進行圖形用戶界面開發(fā)的工具包為AWT。AWT是“Abstract Window Toolkit”的縮寫，又稱為“抽象窗體工具包”。AWT是隨早期Java一起發(fā)布的GUI工具包

4、，是所有Java版本中都包含的基本GUI工具包，其中不僅提供了基本的控件，并且還提供了豐富的事件處理接口。Swing是繼AWT之后Sun推出的又一款GUI工具包。Swing建立在AWT 1.1基礎上的，也就是說，AWT是Swing大廈的基石。7關于Swing與AWT控件的混用由于AWT中提供的控件，均依賴本地系統(tǒng)實現(xiàn)，而Swing控件屬于輕量級控件，是由純Java編寫的，使用基本圖形元素直接在屏幕上繪制，因此在搭建界面時，如果將二者同時使用，就有可能會出現(xiàn)遮擋的現(xiàn)象。8AWT(Abstract Window Toolkit)組件組件 java.awt及相關包中包含了一個完整的類集類集以支持GU

5、I程序的設計，其中的類及相互關系可以用下圖來描述（重量級構件）：事件類字體類GraphicsComponent顏色類布局管理類java.lang.ObjectCheckboxContainerButtonWindowPanelAppletDialogFrameList圖象類菜單類9 AWT使用Container類來定義最基本的組件容器，它有兩個常用的子類：Window類和Panel類。Window類還有兩個子類： 定義對話框，用Dialog子類。Java還提了一個Dialog的子類FileDialog，用它生成文件對話框。 定義一般意義的窗口，用Frame類。 Frame可以用其構造方法Fam

6、e(String)來生成，其標題由String參數(shù)指定。一個Frame剛被創(chuàng)建后，其初始大小為（0，0），而且是不可見的，所以為了使Frame顯示出來，必須在程序中顯式地設置一下它的大小。AWT組件組件10 Panel可以使程序員更方便地組織自己的組件，得到賞心悅目的布局。 Panel可以使用構造方法Panel()生成，當一個Panel對象被創(chuàng)建后，必須放在必須放在Window和和Frame中才能可見中才能可見。使用add()方法就可以將Panel添加到其他容器中。 Applet是Panel的子類，因此在小應用程序里可以直接加入構件，而一般的應用程序必須先定義構件容器。小應用程序在瀏覽器中所顯

7、示的區(qū)域就是Panel，所占的尺寸就是缺省的Panel尺寸（瀏覽器本身也可以看作是一個容器）。AWT組件組件11 圖形用戶界面程序的主體框架是Window類及其子類（Frame、Dialog、FileDialog），一個Window類及其子類的實例，是不能包含其他Window類及其子類的實例，但它可以彈出其他的Window類及其子類的實例（彈出新窗口）。 Panel是一個不可見的組件容器，它可以容納不同的組件，包括Panel本身（即可以嵌套包含）。但最頂層的Panel必須放在一個窗口容器中，包含在其中的所有可見組件才能顯示出來。Panel的主要作用就是為了更好地的主要作用就是為了更好地進行圖形

8、界面對象的布局進行圖形界面對象的布局。AWT組件組件12列表列表按鈕按鈕彈出菜單彈出菜單Container另一個另一個 PanelPanelContainerComponent窗口及其子類窗口及其子類按鈕按鈕菜單菜單Container彈出彈出13圖形界面設計的步驟圖形界面設計的步驟 創(chuàng)建組件創(chuàng)建組件(Component)(Component)：創(chuàng)建組成界面的各種元：創(chuàng)建組成界面的各種元素，如按鈕、文本框等。素，如按鈕、文本框等。 指定布局指定布局(Layout)(Layout)：根據(jù)具體需要排列界面上各：根據(jù)具體需要排列界面上各元素的位置關系。元素的位置關系。 響應事件響應事件(Event)(

9、Event)：定義圖形用戶界面的事件和：定義圖形用戶界面的事件和各界面元素對不同事件的響應，從而實現(xiàn)圖形用各界面元素對不同事件的響應，從而實現(xiàn)圖形用戶界面與用戶的交互功能。戶界面與用戶的交互功能。14import java.awt.*;import java.awt.event.*;public class MyFrame extends Frame public MyFrame(String str) super(str); addWindowListener( new WindowAdapter() public void windowClosing(WindowEvent e) Syst

10、em.exit(0); ); public void showDialog() FileDialog fd = new FileDialog(this, FileDialog); fd.setVisible(true); public static void main(String args) MyFrame fr = new MyFrame(Frame and FileDialog Test); fr.setSize(500,500); fr.setBackground(Color.blue); fr.setVisible(true); fr.showDialog(); MyFrame.ja

11、va彈出新窗口彈出新窗口15public class MyPanelInFrame extends Framepublic class MyPanelInFrame extends Frame public MyPanelInFrame(String str) public MyPanelInFrame(String str) super(str); super(str); addWindowListener( new WindowAdapter() addWindowListener( new WindowAdapter() public void windowClosing(WindowE

12、vent e) public void windowClosing(WindowEvent e) System.exit(0); System.exit(0); ); ); public static void main(String args) public static void main(String args) MyPanelInFrame fr = new MyPanelInFrame(Panel in Frame); MyPanelInFrame fr = new MyPanelInFrame(Panel in Frame); Panel pan = new Panel(); Pa

13、nel pan = new Panel(); fr.setSize(500,500); fr.setSize(500,500); fr.setBackground(Color.green); fr.setBackground(Color.green); fr.setLayout(null); fr.setLayout(null); pan.setSize(200,200); pan.setSize(200,200); pan.setBackground(Color.yellow); pan.setBackground(Color.yellow); pan.setLocation(100,100

14、); pan.setLocation(100,100); Button b1 = new Button(Help); Button b1 = new Button(Help); Button b2 = new Button(Test); Button b2 = new Button(Test); pan.add(b1); pan.add(b1); pan.add(b2); pan.add(b2); fr.add(pan); fr.setVisible(true); MyPanelInFrame.java窗口中包含窗口中包含Panel1212.2.2圖圖形用形用戶戶界面工具包界面工具包Swing

15、Swing16組件組件：構成圖形用戶界面的各種元素。：構成圖形用戶界面的各種元素。構建圖形用戶界面的類可以分成三組：容器類構建圖形用戶界面的類可以分成三組：容器類(container class)(container class)、輔助類、輔助類(helper class)(helper class)和組件和組件類類(component class)(component class)。容器類容器類 容器又分為兩種：頂層容器和非頂層容器。頂層容器又分為兩種：頂層容器和非頂層容器。頂層容器是可以獨立的窗口，容器是可以獨立的窗口，SwingSwing的頂層容器有的頂層容器有JFrameJFrame、

16、JAppletJApplet和和JDialogJDialog等；非頂層容器，不等；非頂層容器，不是獨立的窗口，它們必須位于窗口之內，非頂層是獨立的窗口，它們必須位于窗口之內，非頂層容器包括容器包括JPanelJPanel及及JScrollPanelJScrollPanel等。等。17輔助類輔助類輔助類是用來描述組件屬性的，輔助類通常包含在輔助類是用來描述組件屬性的，輔助類通常包含在java.awtjava.awt包中包中。組件類組件類所有所有Swing GUISwing GUI組件類（除組件類（除JFrameJFrame、JAppletJApplet和和JDialogJDialog）都是）都是

17、JComponentJComponent類的子類，例如，類的子類，例如，JButtonJButton、JTextFieldJTextField、JTextAreaJTextArea、JComboBoxJComboBox、JListJList、JRadioButtonJRadioButton和和JMenuJMenu等。等。18njavax.swing包中包含了存java的完整的類集以支持GUI程序的設計（輕量級構件）njava.lang.Objectnjava.awt.Componentnjava.awt.Containernjavax.swing.JComponentn.1212.2.1 .2

18、.1 SwingSwing組件組件nJLabel顯示一行文字，可帶圖標nJTextField 用戶讓用戶輸入一行文字的構件nJButton用于點擊執(zhí)行命令nJCheckBox標記狀態(tài)nJRadioButton 標記多狀態(tài)nJCombox下拉列表框供選取nJList一組列表項供選擇19 Java中所有的中所有的Swing控件都繼承自控件都繼承自javax.swing.Jcomponent 類，類，而而JComponent類則繼承自類則繼承自java.awt.Container類，因此所有的類，因此所有的Swing控件都具有控件都具有 AWTAWT容器容器 的功能。的功能。列表列表按鈕按鈕菜單菜單

19、JContainer另一個窗口另一個窗口窗口，對話框窗口，對話框JContainerJComponentSwingSwing容器的層次關系容器的層次關系一般的一般的SwingSwing窗口，實際上包含幾個窗口，實際上包含幾個“層次層次”?？蚣茴惪蚣茴怞FrameJFrame它是它是JavaJava應用程序的頂層容器。應用程序的頂層容器。面板類面板類JpanelJpanel面板是一種沒有標題欄、沒有邊框的中間層容器，面板是一種沒有標題欄、沒有邊框的中間層容器，面板不是頂層容器，必須放到其他容器內，也面板不是頂層容器，必須放到其他容器內，也可以放入另一個面板內?？梢苑湃肓硪粋€面板內。20例例12.

20、1例例12.2211212.2.2 .2.2 顏顏色色類類、字體、字體類與圖標類類與圖標類顏色類顏色類ColorColor 屬于屬于java.awtjava.awt 每種顏色均看作是由紅每種顏色均看作是由紅(R)(R)、綠、綠(G)(G)、藍、藍(B)(B)三色組成。三色組成。 構造方法：構造方法： Color (int r, int g, int b)Color (int r, int g, int b) 顏色變量顏色變量字體類字體類FontFont 用來規(guī)范組件所用的字體樣式、大小與字形等。用來規(guī)范組件所用的字體樣式、大小與字形等。 構造方法：構造方法： Font (String font

21、_name, int style, int size) Font (String font_name, int style, int size)字體名稱字體名稱字形樣式：字形樣式：PLAIN、BOLD、ITALIC字號大小字號大小22圖像圖標類圖像圖標類ImageIconImageIconJavaJava語言使用語言使用javax.swing.ImageIconjavax.swing.ImageIcon類表類表示圖標。示圖標。ImageIconImageIcon類的常用構造方法類的常用構造方法( (表表12.12)12.12)，ImageIconImageIcon類的常用方法類的常用方法( (

22、表表12.13) 12.13) 。231212.3 .3 創(chuàng)創(chuàng)建建組組件件1 12.3.1 2.3.1 創(chuàng)建標簽創(chuàng)建標簽1 12.3.2 2.3.2 創(chuàng)建命令按鈕創(chuàng)建命令按鈕1 12.3.3 2.3.3 創(chuàng)建文本編輯組件創(chuàng)建文本編輯組件1 12.3.4 2.3.4 創(chuàng)建復選框組件創(chuàng)建復選框組件241212.3.1 .3.1 標簽標簽JLabelJLabelJLabel JLabel （javax.swingjavax.swing） 標簽用來在窗口中顯示文字的控件標簽用來在窗口中顯示文字的控件 構造方法及常用方法構造方法及常用方法表表12.1412.14、12.1512.15 例例12.312.

23、3、12.412.425JButton JButton （ javax.swing javax.swing ） 用戶用鼠標單擊它來控制程序運行的流程。用戶用鼠標單擊它來控制程序運行的流程。 JButtonJButton創(chuàng)建后通過容器的創(chuàng)建后通過容器的add()add()將其放入容器。將其放入容器。 構造方法及常用方法構造方法及常用方法( (表表12.1612.16、12.17)12.17)1212.3.2 .3.2 命令按命令按鈕鈕、復選復選框和框和單選單選按按鈕鈕26import javax.swing.*; public class App12_5 extends JFrame publi

24、c static void main(String args) App12_5 jfrm=new App12_5(); jfrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ImageIcon ic=new ImageIcon(中國燈籠.jpg); JButton btn=new JButton(燈籠,ic); jfrm.setLayout(null); jfrm.setSize(200,180); jfrm.setTitle(按鈕類窗口); btn.setBounds(50,45,100,40); btn.setToolTipText(我是

25、按鈕); jfrm.add(btn); jfrm.setVisible(true); 例例12.512.527JCheckBoxJCheckBox和和JRadioButtonJRadioButton（ javax.swingjavax.swing ） JCheckBoxJCheckBox可以單獨使用，而單選按鈕必須可以單獨使用，而單選按鈕必須配合配合javax.swingjavax.swing包中的包中的ButtonGroupButtonGroup類將其類將其組成單選按鈕組來使用組成單選按鈕組來使用 構造方法及常用方法見構造方法及常用方法見( (表表12.18)12.18) 例例12.612.

26、6復選復選框和框和單選單選按按鈕鈕281212.3.3 .3.3 文本文本編輯組編輯組件件與滾動與滾動窗格窗格文本文本行行組件組件JTextFieldJTextField主要用于主要用于接收用戶鍵盤接收用戶鍵盤輸入的文本輸入的文本密碼文本行組件密碼文本行組件JPasswordFieldJPasswordField主要用于輸入主要用于輸入密碼密碼文本區(qū)組件文本區(qū)組件JTextArea JTextArea 通常與通常與滾動窗格滾動窗格組件組件JScrollPaneJScrollPane一起使用一起使用 組件類的構造方法及常用方法組件類的構造方法及常用方法( (表表12.2012.24)12.201

27、2.24) 例例12.712.729import javax.swing.*; public class App12_7 extends JFrame JTextField jtf=new JTextField(該文本框不可編輯,30); static JPasswordField jpf=new JPasswordField (太空人3號,30); public App12_7(String str) super(str); jtf.setBounds(20,40,140,20); jtf.setEditable(false); add(jtf); public static void ma

28、in(String args) 例例12.7 - 112.7 - 130 public static void main(String args) App12_7 frm=new App12_7(文本編輯功能窗口文本編輯功能窗口); JTextArea jta=new JTextArea (您好您好,10,30); JScrollPane jsp=new JScrollPane(jta); frm.setLocation(200,150); frm.setSize(240,220); frm.setLayout(null); jsp.setBounds(20,70,160,100); jpf.

29、setBounds(20,10,140,20); frm.add(jpf); frm.add(jsp); char password=jpf.getPassword(); String str=new String(password); System.out.println(今天口令是：今天口令是：+ password + 轉換成文本后是轉換成文本后是：+str); frm.setVisible(true); frm.setResizable(false); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 例例12.7-212.7-231

30、1212.3.4 .3.4 選項選項窗格窗格組組件件選項窗格選項窗格JTabbedPaneJTabbedPaneJTabbedPaneJTabbedPane組件中允許包含多個選組件中允許包含多個選項卡項卡, ,每個選項卡包含若干每個選項卡包含若干組件組件。JTabbedPaneJTabbedPane類的構造方法及常用方類的構造方法及常用方法法（表（表12.2512.25、12.2612.26） 例例12.812.8321212.4 .4 布局管理器布局管理器布局管理即頁面管理。頁面管理（布局管理即頁面管理。頁面管理（layoutlayout）：）：指窗指窗口上的組件遵循一定的規(guī)則來排列，并會隨

31、著窗口口上的組件遵循一定的規(guī)則來排列，并會隨著窗口大小的變化來改變組件大小與位置的一種布局方式。大小的變化來改變組件大小與位置的一種布局方式。自動布局：當為一個容器指定一個布局管理器后，自動布局：當為一個容器指定一個布局管理器后，將一個組件加入該容器中時，布局管理器就能自動將一個組件加入該容器中時，布局管理器就能自動設置該組件的大小和位置。設置該組件的大小和位置。java.awtjava.awt包中共定義了五種布局管理器，每個布局包中共定義了五種布局管理器，每個布局管理器對應一種布局策略，分別是：流式布局管理管理器對應一種布局策略，分別是：流式布局管理器器FlowLayoutFlowLayou

32、t、邊界式布局管理器、邊界式布局管理器BorderLayoutBorderLayout、卡片式布局管理器卡片式布局管理器CardLayoutCardLayout、網(wǎng)格式布局管理器、網(wǎng)格式布局管理器GridLayoutGridLayout和網(wǎng)袋布局管理器和網(wǎng)袋布局管理器GridBagLayoutGridBagLayout。331212.4.1 .4.1 流式布局管理器流式布局管理器FlowLayoutFlowLayout布局策略布局策略 組件按照加入容器的先后順序從左向右排列；組件按照加入容器的先后順序從左向右排列； 一行排滿后就自動地轉到下一行繼續(xù)從左向右一行排滿后就自動地轉到下一行繼續(xù)從左向

33、右排列；排列； 每一行中的組件都居中排列。每一行中的組件都居中排列。FlowLayoutFlowLayout布局管理器是布局管理器是PanelPanel、AppletApplet和和JPanelJPanel默認的布局管理方式。默認的布局管理方式。布局管理器的容器中的組件大小不隨容器大布局管理器的容器中的組件大小不隨容器大小的變化而改變小的變化而改變. .FlowLayoutFlowLayout構造方法及常用方法構造方法及常用方法表表12.2712.2712.2912.293434例例12.912.9import java.awt.*; import javax.swing.*;public c

34、lass App12_9 extends JFrame static JFrame frm=new JFrame(流式布局設置管理器FlowLayout); public static void main(String args) FlowLayout flow=new FlowLayout (FlowLayout.CENTER,5,10); JButton but=new JButton(按鈕); JLabel lab=new JLabel(我是一個標簽); frm.setLayout(flow); frm.setSize(260,150); frm.add(but); frm.add(la

35、b); frm.add(new JTextField(流式布局策略FlowLayout,18); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frm.setVisible(true); 351212.4.2 .4.2 邊邊界式布局管理器界式布局管理器BorderLayoutBorderLayout將顯示區(qū)域按地理方位分為東將顯示區(qū)域按地理方位分為東(East)(East)、西、西(West)(West)、 南南(South)(South)、北、北(North)(North)、中、中(Center)(Center)五個區(qū)域五個區(qū)域。將組

36、件加入容器中，若沒有指定區(qū)域，則默認為將組件加入容器中，若沒有指定區(qū)域，則默認為 中間；若將組件加入到已被占用的位置，將會中間；若將組件加入到已被占用的位置，將會取代原先的組件。取代原先的組件。利用利用add()add()添加組件時必須指出組件的擺放位置。添加組件時必須指出組件的擺放位置。構造方法及常用方法構造方法及常用方法表表12.3012.3012.3212.3236import java.awt.*; import javax.swing.*;public class App12_10 extends JFrame static JFrame frm=new JFrame(邊界式布局管理

37、器BorderLayout); public static void main(String args) BorderLayout border=new BorderLayout (5,10); frm.setLayout(border); frm.setSize(330,200); frm.add(new JButton(上北), BorderLayout.NORTH); frm.add(new JButton(下南), BorderLayout.SOUTH); frm.add(new JButton(左西), BorderLayout.WEST); frm.add(new JButton(

38、右東), BorderLayout.EAST); frm.add(new JButton(中央), BorderLayout.CENTER); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frm.setVisible(true); 例例12.1012.10371212.4.3 .4.3 網(wǎng)網(wǎng)格式布局管理器格式布局管理器GridLayoutGridLayout提供的頁面布局規(guī)則是將容器的空間劃分成若干行與列的網(wǎng)格提供的頁面布局規(guī)則是將容器的空間劃分成若干行與列的網(wǎng)格形式，在容器上添加組件時，它們會按從左到右、從上到下的形式，在容器上添加組件時，它們會按從左到右、從上到下的順序在網(wǎng)格中順序在網(wǎng)格中均勻均勻排列。排列。網(wǎng)格的行數(shù)和列數(shù)可以在創(chuàng)建網(wǎng)格的行數(shù)和列數(shù)可以在創(chuàng)建GridLayoutGridLayout對象的構造方法里指對象的構造方法里指定。若控件數(shù)正好是行定。若控件數(shù)正好是行列，則按行、列數(shù)放置；若控件數(shù)超列，則按行、列數(shù)放置；若控件數(shù)超過了行過了行列，則先滿足行。列，則先滿足行。利用利用GridLayoutGridLayout布局策略時，容器中各組件的寬度相同，所有布局策略時，容器中各組件的寬度相同，所有組件的高度也相同，當