視窗程式設計 6. 標籤、顏色、字型與圖示 Chih Hung Wang Reference: 1. Java 2 視窗程式設計，文魁出版社，位元文化編著 (2008) (教科書) 2. 深入研究Java Swing，上奇資訊股份有限公司，黃嘉輝著 (2011) 3. Java SE 6.0視窗程式設計之道，碁峰出版社，黃嘉輝著 (2008) 4. Java 初學指引，博碩文化，陳錦輝著 (2010) 視窗程式設計 6. 標籤、顏色、字型與圖示 Chih Hung Wang

標籤 Swing的JLabel類別可以提供使用者建立顯示文字與圖示的標籤，並可控制文字與圖示的水平與垂直對齊方式。JLabel類別的繼承架構如下所示。 由於標籤於視窗介面的主要功能為顯示資料，所以，JLabel類別非常簡單，並不需要運用MVC架構，故沒有模型類別（model class）。JLabel類別建構子的規格如下： public JLabel() public JLabel(Icon image) public JLabel(Icon image, int horizontalAlignment) public JLabel(String text) public JLabel(String text, int horizontalAlignment) public JLabel(String text, Icon icon, int horizontalAlignment)

下表將介紹JLabel類別的常用方法：

範例4-1將示範標籤的運用。 顏色與字型 範例 本節將運用範例4-2說明如何運用Color類別設定標籤使用的前景顏色，以及標籤文字的字型、樣式與大小，執行結果如下圖。

範例4-1 import javax.swing.*; //引用套件 import javax.swing.event.*; import java.awt.*; import java.awt.event.*; public class LabelEX extends JFrame { LabelEX() { JLabel lbRight = new JLabel("靠右", JLabel.RIGHT); JLabel lbLeft = new JLabel("靠左", JLabel.LEFT); JLabel lbCenter = new JLabel("置中", JLabel.CENTER); JLabel lbLeadingTop = new JLabel("靠前緣", JLabel.LEADING); lbLeadingTop.setVerticalAlignment(SwingConstants.TOP); //設定垂直方向靠上對齊 JLabel lbTrailingBottom = new JLabel("靠後緣", JLabel.TRAILING); lbTrailingBottom.setVerticalAlignment(SwingConstants.BOTTOM); //設定垂直方向靠下對齊 Container cp = getContentPane(); //取得內容面版 cp.setLayout(new GridLayout(2, 3, 10, 10)); //取得佈局管理員

cp.add(lbLeft); //將元件加入面版 cp.add(lbCenter); cp.add(lbRight); cp.add(lbLeadingTop); cp.add(lbTrailingBottom); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //設定關閉視窗將預設結束程式 setSize(300, 250); //設定視窗的大小為300x250 setVisible(true); //顯示視窗框架 } public static void main(String args[]) { new LabelEX(); //宣告視窗框架物件

顏色 在程式設計運用實務上，有兩種方式： 第一種、直接運用Color類別定義的靜態屬性，取得代表特定顏色的Color物件。 第二種、以RGB值宣告Color物件 RGB值為運用RGB模型（Red-Green-Blue，紅、綠、藍）描述顏色時，所使用之數值，共由三個數值組成，分別代表形成指定顏色之紅、綠、藍三原色光的強度，代表強度的數值範圍從0到255，255代表最大強度。若欲宣告表達自訂顏色的Color物件時，則可以在宣告Color物件時，傳入描述該顏色的RGB值。

欲運用某字型時，可以建立描述這個字型的Font物件，以下為Font類別的建構子。   public Font(String name, int style, int size)

範例4-2 import javax.swing.*; //引用套件 import java.awt.*; public class ColorFontEX extends JFrame { ColorFontEX() { JLabel lbRed = new JLabel("紅"); lbRed.setForeground(Color.RED); //以Color類別的常數取得代表紅色的Color物件, //並設定為標籤的前景顏色 JLabel lbGreen = new JLabel("綠"); lbGreen.setForeground(new Color(0, 255, 0)); //以整數的RGB值宣告代表綠色的Color物件, JLabel lbBlue = new JLabel("藍"); lbBlue.setForeground(new Color(0.0f, 0.0f, 1.0f)); //以浮點數的RGB值宣告代表藍色的Colord物件, JLabel lbTimesBold15 = new JLabel("Times New Roman"); lbTimesBold15.setFont( new Font("Times New Roman", Font.BOLD, 20)); //設定標籤內文字使用的字型

Container cp = getContentPane(); //取得內容面版 cp.setLayout(new GridLayout(2, 2, 10, 10)); //取得佈局管理員 cp.add(lbRed); //將元件加入面版 cp.add(lbGreen); cp.add(lbBlue); cp.add(lbTimesBold15); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //設定關閉視窗將預設結束程式 pack(); //設定以適當大小顯示 setVisible(true); //顯示視窗框架 } public static void main(String args[]) { new ColorFontEX(); //宣告視窗框架物件

圖示 處理顯示於視窗介面顯示於各種元件上的圖示，Swing將運用Icon介面與ImageIcon類別處理。Icon介面可供使用者以繪圖的方式建立圖示，ImageIcon類別則用於顯示圖檔的圖示。 範例4-3將示範如何實作Icon介面，定義繪製圖示的類別，以及運用ImageIcon類別以圖檔建立圖示，執行結果如圖所示。 實作Icon介面繪製圖示 Icon介面將定義下表所列的三種方法，以決定圖示的高度、寬度與圖示的畫面。

範例 4-3 import javax.swing.*; //引用套件 import java.awt.*; public class IconEX extends JFrame{ IconEX(){ JLabel lbIcon = new JLabel(new BitcIcon(80, 80)); //以標籤顯示圖示 JLabel lbImageIcon = new JLabel(new ImageIcon(".\\Icon\\Bitc.gif")); //以圖檔建立顯示於標籤的圖示 Container cp = getContentPane(); //取得內容面版 cp.setLayout(new GridLayout(1, 2, 10, 10)); //取得佈局管理員 cp.add(lbIcon); //將元件加入面版 cp.add(lbImageIcon); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //設定關閉視窗將預設結束程式 pack(); //以適當大小顯示視窗 setVisible(true); //顯示視窗框架 } public static void main(String args[]) { new IconEX(); //宣告視窗框架物件

class BitcIcon implements Icon { //宣告實作Icon介面的圖示類別 private int width, height; public BitcIcon(int w, int h){ //建構子 width = w; height = h; } //繪製圖示 public void paintIcon(Component c, Graphics g, int x, int y){ g.drawRect(5, 5, 70, 70); //繪製矩形 g.drawString("位元文化", 15, 45); //繪製文字 public int getIconWidth(){ //取得圖示寬度 return width; public int getIconHeight(){ //取得圖示高度 return height;

當宣告同時顯示文字與圖示的標籤，呼叫建構子時，傳入的位置常數將控制圖示位置。若欲設定圖示的垂直方向對齊方式，則必須呼叫setVerticalAlignment()方法。而文字的水平、垂直方向之對齊方式的設定，則以相對於圖示位置的方式設定，執行設定時，需呼叫setVerticalTextPosition()方法與setHorizontalTextPosition()方法。   預設情況下，同時顯示文字與圖示的標籤，圖示的水平與垂直方向均為置中對齊，文字位置則置於圖示的右方。範例4-4將示範同時顯示圖示與文字的標籤，並設定文字相對於圖示的位置。

Ex 4-4 import javax.swing.*; //引用套件 import javax.swing.event.*; import java.awt.*; import java.awt.event.*; public class LabelIconEX extends JFrame{ LabelIconEX(){ JLabel lbBitcCenter = new JLabel("文字置於圖示中央", new ImageIcon(".\\Icon\\Bitc.gif"), SwingConstants.CENTER); //同時顯示文字與圖示的標籤, 圖示置中 lbBitcCenter.setHorizontalTextPosition(SwingConstants.CENTER); //設定文字的水平方向相對於圖示採置中對齊 JLabel lbBitcTop = new JLabel("文字置於圖示中央、靠上", lbBitcTop.setHorizontalTextPosition(SwingConstants.CENTER); lbBitcTop.setVerticalTextPosition(SwingConstants.TOP); //設定文字的垂直方向相對於圖示採置上對齊 JLabel lbBitcBottom = new JLabel("文字置於圖示中央、靠下", lbBitcBottom.setHorizontalTextPosition(SwingConstants.CENTER); lbBitcBottom.setVerticalTextPosition(SwingConstants.BOTTOM); //設定文字的垂直方向相對於圖示採置下對齊 JLabel lbBitcLeft = new JLabel("文字置於圖示左方、靠下", new ImageIcon(".\\Icon\\Bitc.gif"), SwingConstants.CENTER); lbBitcLeft.setHorizontalTextPosition(SwingConstants.LEFT); //設定文字的水平方向相對於圖示採置左對齊 lbBitcLeft.setVerticalTextPosition(SwingConstants.BOTTOM); Ex 4-4

JLabel lbBitcRight = new JLabel("文字置於圖示右方、靠上", new ImageIcon(".\\Icon\\Bitc.gif"), SwingConstants.CENTER); //同時顯示文字與圖示的標籤, 圖示置中 lbBitcRight.setHorizontalTextPosition(SwingConstants.RIGHT); //設定文字的水平方向相對於圖示採置右對齊 lbBitcRight.setVerticalTextPosition(SwingConstants.TOP); //設定文字的水平方向相對於圖示採置上對齊 Container cp = getContentPane(); //取得內容面版 cp.setLayout(new GridLayout(2, 3, 10, 10)); //取得佈局管理員 cp.add(lbBitcCenter); //將元件加入面版 cp.add(lbBitcTop); cp.add(lbBitcBottom); cp.add(lbBitcLeft); cp.add(lbBitcRight); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //設定關閉視窗將預設結束程式 pack(); //以適當大小顯示視窗 setVisible(true); //顯示視窗框架 } public static void main(String args[]) { new LabelIconEX(); //宣告視窗框架物件