第13章圖形界面設(shè)計(第5版)

1、LOGOLOGO第第 13 章章 圖圖形界面形界面設(shè)計設(shè)計本章主要內(nèi)容本章主要內(nèi)容圖形用戶界面工具包圖形用戶界面工具包SwingSwing組件分類組件分類Swing容器的內(nèi)部結(jié)構(gòu)容器的內(nèi)部結(jié)構(gòu)創(chuàng)建組件創(chuàng)建組件窗口的布局管理設(shè)計窗口的布局管理設(shè)計Company Logo1313.1.1圖圖形用形用戶戶界面界面概概述述n圖形用戶界面圖形用戶界面(Graphics User Interface，GUI） 用圖形的方式，借助菜單。按鈕等標(biāo)準(zhǔn)界面元素用圖形的方式，借助菜單。按鈕等標(biāo)準(zhǔn)界面元素和鼠標(biāo)操作，幫助用戶方便地向計算機(jī)系統(tǒng)發(fā)出和鼠標(biāo)操作，幫助用戶方便地向計算機(jī)系統(tǒng)發(fā)出指令、啟動操作，并將系統(tǒng)運(yùn)行的

2、結(jié)果同樣以圖指令、啟動操作，并將系統(tǒng)運(yùn)行的結(jié)果同樣以圖形方式顯示給用戶的技術(shù)。形方式顯示給用戶的技術(shù)。nJava的的GUI程序設(shè)計是程序設(shè)計是Java程序設(shè)計的基礎(chǔ)。程序設(shè)計的基礎(chǔ)。nJava提供的兩個處理圖形用戶界面的類庫提供的兩個處理圖形用戶界面的類庫 Java. awt包包 和和 javax. swing包包 抽象窗口抽象窗口工具集工具集awt的擴(kuò)展，根據(jù)的擴(kuò)展，根據(jù)給定環(huán)境調(diào)整外觀給定環(huán)境調(diào)整外觀和感覺。和感覺。Company Logo1313.2.2圖圖形用形用戶戶界面工具包界面工具包SwingSwingnJavaJava圖形用戶界面的基本元素包括：用戶界面組圖形用戶界面的基本元素包

3、括：用戶界面組件（組件類）、事件處理模塊（事件類）、圖形件（組件類）、事件處理模塊（事件類）、圖形和圖像工具（圖形類、圖像類）、布局管理器（和圖像工具（圖形類、圖像類）、布局管理器（布局類）等。布局類）等。njavajava組件類的繼承關(guān)系見教材圖組件類的繼承關(guān)系見教材圖Company Logo1313.2.1 .2.1 Swing組件分類組件分類n組件：構(gòu)成圖形用戶界面的各種元素。組件：構(gòu)成圖形用戶界面的各種元素。n構(gòu)建圖形用戶界面的類可以分成三組：容器類構(gòu)建圖形用戶界面的類可以分成三組：容器類(container class)(container class)、輔助類、輔助類(helper

4、 class)(helper class)和組和組件類件類(component class)(component class)。SwingSwing輕型組件的分類輕型組件的分類見教材表見教材表13.113.1n容器類容器類 容器又分為兩種：頂層容器和非頂層容器。頂容器又分為兩種：頂層容器和非頂層容器。頂層容器是可以獨(dú)立的窗口，層容器是可以獨(dú)立的窗口，SwingSwing的頂層容器有的頂層容器有JFrameJFrame、JAppletJApplet和和JDialogJDialog等；非頂層容器，等；非頂層容器，不是獨(dú)立的窗口，它們必須位于窗口之內(nèi)，非不是獨(dú)立的窗口，它們必須位于窗口之內(nèi)，非頂層容

5、器包括頂層容器包括JPanelJPanel及及JScrollPanelJScrollPanel等。等。Company Logo1313.2.1 .2.1 Swing組件分類組件分類n輔助類輔助類輔助類是用來描述組件屬性的，輔助類通常包含輔助類是用來描述組件屬性的，輔助類通常包含在在java.awtjava.awt包中包中。n組件類組件類所有所有Swing GUISwing GUI組件類（除組件類（除JFrameJFrame、JAppletJApplet和和JDialogJDialog）都是）都是JComponentJComponent類的子類，例如，類的子類，例如，JButtonJButton

6、、JTextFieldJTextField、JTextAreaJTextArea、JComboBoxJComboBox、JListJList、JRadioButtonJRadioButton和和JMenuJMenu等。等。Company Logo1313.2.1 .2.1 Swing組件分類組件分類nSwingSwing容器的層次關(guān)系容器的層次關(guān)系一般的一般的SwingSwing窗口，實(shí)際上包含幾個窗口，實(shí)際上包含幾個“層次層次”，各，各個層的關(guān)系如圖個層的關(guān)系如圖13.213.2所示。所示。n框架類框架類JFrameJFrame它是它是JavaJava應(yīng)用程序的頂層容器。應(yīng)用程序的頂層容器。

7、n面板類面板類JpanelJpanel面板是一種沒有標(biāo)題欄、沒有邊框的中間層容器，面板是一種沒有標(biāo)題欄、沒有邊框的中間層容器，面板不是頂層容器，必須放到其他容器內(nèi)，也可面板不是頂層容器，必須放到其他容器內(nèi)，也可以放入另一個面板內(nèi)。以放入另一個面板內(nèi)。7見教材例見教材例13.1見教材例見教材例Company Logo1313.2.1 .2.1 Swing組件分類組件分類n非容器類非容器類 又稱控制組件（控件），它里面不能包含其他又稱控制組件（控件），它里面不能包含其他組件。組件。 作用：完成與用戶的交互，包括接收用戶的命作用：完成與用戶的交互，包括接收用戶的命令、接收用戶輸入的文本或用戶的選擇、

8、向用令、接收用戶輸入的文本或用戶的選擇、向用戶顯示文本或圖形。戶顯示文本或圖形。 常用控件：命令類、選擇類、常用控件：命令類、選擇類、文字處理類文字處理類等式等式Company Logo1313.2.1 .2.1 Swing組件分類組件分類n圖形界面設(shè)計的步驟圖形界面設(shè)計的步驟 創(chuàng)建組件創(chuàng)建組件(Component)(Component)：創(chuàng)建組成界面的各種元：創(chuàng)建組成界面的各種元素，如按鈕、文本框等。素，如按鈕、文本框等。 指定布局指定布局(Layout)(Layout)：根據(jù)具體需要排列界面上：根據(jù)具體需要排列界面上各元素的位置關(guān)系。各元素的位置關(guān)系。 響應(yīng)事件響應(yīng)事件(Event)(Ev

9、ent)：定義圖形用戶界面的事件和：定義圖形用戶界面的事件和各界面元素對不同事件的響應(yīng)，從而實(shí)現(xiàn)圖形各界面元素對不同事件的響應(yīng)，從而實(shí)現(xiàn)圖形用戶界面與用戶的交互功能。用戶界面與用戶的交互功能。Company Logo1313.2.2 .2.2 顏顏色色類類、字體、字體類與圖標(biāo)類類與圖標(biāo)類n顏色類顏色類ColorColor 屬于屬于java.awtjava.awt 每種顏色均看作是由紅每種顏色均看作是由紅(R)(R)、綠、綠(G)(G)、藍(lán)、藍(lán)(B)(B)三色組成。三色組成。 構(gòu)造方法：構(gòu)造方法： Color (int r, int g, int b)Color (int r, int g, i

10、nt b) 顏色變量見教材表顏色變量見教材表13.1013.10n字體類字體類FontFont 用來規(guī)范組件所用的字體樣式、大小與字形等。用來規(guī)范組件所用的字體樣式、大小與字形等。 構(gòu)造方法：構(gòu)造方法： Font (String font_name, int style, int size) Font (String font_name, int style, int size)字體名稱字體名稱字形樣式：字形樣式：PLAIN、BOLD、ITALIC字號大小字號大小10Company LCompany Logo1313.2.2 .2.2 顏顏色色類類、字體、字體類與圖標(biāo)類類與圖標(biāo)類n圖像圖標(biāo)類圖

11、像圖標(biāo)類ImageIconImageIconJavaJava語言使用語言使用javax.swing.ImageIconjavax.swing.ImageIcon類表示圖類表示圖標(biāo)。表標(biāo)。表12.1212.12給出了給出了ImageIconImageIcon類的常用構(gòu)造方法，類的常用構(gòu)造方法，表表12.1312.13給出了給出了ImageIconImageIcon類的常用方法。類的常用方法。11Company LCompany Logo1313.3 .3 創(chuàng)創(chuàng)建建組組件件n1 13.3.1 3.3.1 創(chuàng)建標(biāo)簽創(chuàng)建標(biāo)簽n1 13.3.2 3.3.2 創(chuàng)建命令按鈕創(chuàng)建命令按鈕n1 13.3.3 3

12、.3.3 創(chuàng)建文本編輯組件創(chuàng)建文本編輯組件n1 13.3.4 3.3.4 創(chuàng)建復(fù)選框組件創(chuàng)建復(fù)選框組件12Company LCompany Logo1313.3.1 .3.1 標(biāo)簽標(biāo)簽JLabelJLabelnJLabel JLabel （javax.swingjavax.swing） 標(biāo)簽用來在窗口中顯示文字的控件標(biāo)簽用來在窗口中顯示文字的控件 構(gòu)造方法及常用方法見教材表構(gòu)造方法及常用方法見教材表13.1413.14、13.1513.15 見教材例見教材例13.313.3、13Company LCompany LogonJButton JButton （ javax.swing javax.

13、swing ） 用戶用鼠標(biāo)單擊它來控制程序運(yùn)行的流程。用戶用鼠標(biāo)單擊它來控制程序運(yùn)行的流程。 JButtonJButton創(chuàng)建后通過容器的創(chuàng)建后通過容器的add()add()將其放入容器將其放入容器。 構(gòu)造方法及常用方法見教材表構(gòu)造方法及常用方法見教材表13.1613.16、13.1713.17 見教材例見教材例13.513.5、14Company Logo1313.3.2.3.2命令按命令按鈕鈕、復(fù)選復(fù)選框和框和單選單選按按鈕鈕Company LogonJCheckBoxJCheckBox和和JRadioButton JRadioButton （ javax.swing javax.swin

14、g ） JCheckBoxJCheckBox可以單獨(dú)使用，而單選按鈕必須配合可以單獨(dú)使用，而單選按鈕必須配合javax.swingjavax.swing包中的包中的ButtonGroupButtonGroup類將其組成單類將其組成單選按鈕組來使用選按鈕組來使用 構(gòu)造方法及常用方法見教材表構(gòu)造方法及常用方法見教材表13.1813.18 見教材例見教材例15Company Logo1313.3.2.3.2命令按命令按鈕鈕、復(fù)選復(fù)選框和框和單選單選按按鈕鈕Company Logo1313.3.3 .3.3 文本文本編輯組編輯組件件與滾動與滾動窗格窗格n文本文本行行組件組件JTextFieldJTex

15、tField主要用于主要用于接收用戶鍵盤輸接收用戶鍵盤輸入的文本入的文本n密碼文本行組件密碼文本行組件JPasswordFieldJPasswordField主要用于輸入密主要用于輸入密碼碼n文本區(qū)組件文本區(qū)組件JTextArea JTextArea 通常與通常與滾動窗格滾動窗格組件組件JScrollPaneJScrollPane一起使用一起使用 這幾種組件類的構(gòu)造方法及常用方法見教材中這幾種組件類的構(gòu)造方法及常用方法見教材中表表13.2013.2413.2013.24 應(yīng)用見教材例應(yīng)用見教材例16Company LCompany Logo1313.3.4 .3.4 選項選項窗格窗格組組件件n

16、選項窗格選項窗格JTabbedPaneJTabbedPanenJTabbedPaneJTabbedPane組件中允許包含多個選項卡。組件中允許包含多個選項卡。n用戶選取項目的一種組件，用戶利用該組件來表用戶選取項目的一種組件，用戶利用該組件來表JTabbedPaneJTabbedPane類的構(gòu)造方法及常用方法見教材中表類的構(gòu)造方法及常用方法見教材中表13.2513.25、13.2613.26 應(yīng)用見教材例應(yīng)用見教材例17Company LCompany Logo1313.4 .4 布局管理器布局管理器n布局管理即頁面管理。頁面管理（布局管理即頁面管理。頁面管理（layoutlayout）：）：

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

18、式布局管理器FlowLayoutFlowLayout、邊界式布局管理器、邊界式布局管理器BorderLayoutBorderLayout、卡片、卡片式布局管理器式布局管理器CardLayoutCardLayout、網(wǎng)格式布局管理器、網(wǎng)格式布局管理器GridLayoutGridLayout和網(wǎng)袋布局管理器和網(wǎng)袋布局管理器GridBagLayoutGridBagLayout。18Company LCompany Logo1313.4.1 .4.1 流式布局管理器流式布局管理器FlowLayoutFlowLayoutn布局策略布局策略 組件按照加入容器的先后順序從左向右排列；組件按照加入容器的先后順

19、序從左向右排列； 一行排滿后就自動地轉(zhuǎn)到下一行繼續(xù)從左向右排列；一行排滿后就自動地轉(zhuǎn)到下一行繼續(xù)從左向右排列； 每一行中的組件都居中排列。每一行中的組件都居中排列。nFlowLayoutFlowLayout布局管理器是布局管理器是PanelPanel、AppletApplet和和JPanelJPanel默認(rèn)的布局管理方式。默認(rèn)的布局管理方式。n布局管理器的容器中的組件大小不隨容器大小的布局管理器的容器中的組件大小不隨容器大小的變化而改變變化而改變. .n構(gòu)造方法及常用方法見教材表構(gòu)造方法及常用方法見教材表13.2713.2713.2913.29n見教材例見教材例19Company LCompa

20、ny Logo1313.4.2 .4.2 邊邊界式布局管理器界式布局管理器BorderLayoutBorderLayoutn將顯示區(qū)域按地理方位分為東將顯示區(qū)域按地理方位分為東(East)(East)、西、西(West)(West)、 南南(South)(South)、北、北(North)(North)、中、中(Center)(Center)五個區(qū)域五個區(qū)域。n將組件加入容器中，若沒有指定區(qū)域，則默認(rèn)為將組件加入容器中，若沒有指定區(qū)域，則默認(rèn)為 中間；若將組件加入到已被占用的位置，將會取中間；若將組件加入到已被占用的位置，將會取 代原先的組件。代原先的組件。n利用利用add()add()添加組

21、件時必須指出組件的擺放位置。添加組件時必須指出組件的擺放位置。n構(gòu)造方法及常用方法見教材表構(gòu)造方法及常用方法見教材表13.3013.3013.3213.32n見教材例見教材例20Company LCompany Logo1313.4.3 .4.3 網(wǎng)網(wǎng)格式布局管理器格式布局管理器GridLayoutGridLayoutn提供的頁面布局規(guī)則是將容器的空間劃分成若干行與列提供的頁面布局規(guī)則是將容器的空間劃分成若干行與列的網(wǎng)格形式，在容器上添加組件時，它們會按從左到右的網(wǎng)格形式，在容器上添加組件時，它們會按從左到右、從上到下的順序在網(wǎng)格中、從上到下的順序在網(wǎng)格中均勻均勻排列。排列。n網(wǎng)格的行數(shù)和列數(shù)

22、可以在創(chuàng)建網(wǎng)格的行數(shù)和列數(shù)可以在創(chuàng)建GridLayoutGridLayout對象的構(gòu)造方對象的構(gòu)造方法里指定。若控件數(shù)正好是行法里指定。若控件數(shù)正好是行列，則按行、列數(shù)放置列，則按行、列數(shù)放置；若控件數(shù)超過了行；若控件數(shù)超過了行列，則先滿足行。列，則先滿足行。n利用利用GridLayoutGridLayout布局策略時，容器中各組件的寬度相同布局策略時，容器中各組件的寬度相同，所有組件的高度也相同，當(dāng)容器尺寸發(fā)生變化時，各，所有組件的高度也相同，當(dāng)容器尺寸發(fā)生變化時，各組件的相對位置不變。組件的相對位置不變。n構(gòu)造方法及常用方法見教材表構(gòu)造方法及常用方法見教材表13.3313.33、13.34

23、13.34n見教材例見教材例21Company Logo通過行列、間距來通過行列、間距來用網(wǎng)格分割，把組用網(wǎng)格分割，把組件放入網(wǎng)格中，先件放入網(wǎng)格中，先行后列擺放組件行后列擺放組件Company Logo1313.4.4 .4.4 卡片式布局管理器卡片式布局管理器CardLayoutCardLayoutn頁面布局方式是把頁面布局方式是把“窗口容器窗口容器”中的所有組件如中的所有組件如同堆疊起來的一付同堆疊起來的一付“撲克牌撲克牌”，每次只能顯示最，每次只能顯示最上面的一張一樣，這個被顯示的組件將占據(jù)所有上面的一張一樣，這個被顯示的組件將占據(jù)所有的容器空間。的容器空間。n使用使用add()add()往窗口容器中加入組件時應(yīng)為每個組往窗口容器中加入組件時應(yīng)為每個組件賦予一個名字。依據(jù)這個名字利用件賦予一個名字。依據(jù)這個名字利用CardLayoutCardLayout類所提供的方法來控制其他組件是否顯示。類所提供的方法來控制其他組件是否顯示。n該布局方式每次僅有一個組件是可見的。該布局方式每次僅有一個組件是可見的。n構(gòu)造方法及常用方法見教材表構(gòu)造方法及常用方法見教材表13.3513.35、13.3613.36n見教材例見教材