ImageIcon教程 · ZetCode 中文系列教程

# `ImageIcon`教程原文：http://zetcode.com/java/imageicon/ 在本教程中，我們將使用`ImageIcon`。我們將繪制一個圖標，縮放一個圖標，創建一個自定義圖標，并將圖標放入各種 Swing 組件中。 ## `ImageIcon` `Icon`是固定大小的小圖片，通常用于裝飾組件。 `ImageIcon`是`Icon`接口的實現，可從圖像繪制圖標。可以從 URL，文件名或字節數組創建圖像。 ```java paintIcon(Component c, Graphics g, int x, int y) ``` `Icon`的`paintIcon()`方法在指定位置繪制圖標。 ## `ImageIcon`構造器 `ImageIcon`具有多個構造器，包括： * `ImageIcon(byte[] imageData)` - 從字節數組創建`ImageIcon`。 * `ImageIcon(Image image`） — 從圖像對象創建`ImageIcon`。 * `ImageIcon(String filename)` - 創建一個`ImageIcon`指定的文件。 * `ImageIcon(URL location)` - 從指定的 URL 創建一個`ImageIcon`。 `ImageIcon`可以處理 PNG，JPEG 和 GIF 圖像。如果要使用 BMP 或 ICO 圖像，可以使用 image4j 庫。 ## 繪制圖標在第一個示例中，我們將在面板上繪制一個圖標。 `PaintingIconEx.java` ```java package com.zetcode; import java.awt.Container; import java.awt.Dimension; import java.awt.EventQueue; import java.awt.Graphics; import javax.swing.GroupLayout; import javax.swing.ImageIcon; import javax.swing.JComponent; import javax.swing.JFrame; import javax.swing.JPanel; class DrawingPanel extends JPanel { private ImageIcon icon; public DrawingPanel() { loadImage(); initPanel(); } private void loadImage() { icon = new ImageIcon("book.jpg"); } private void initPanel() { int w = icon.getIconWidth(); int h = icon.getIconHeight(); setPreferredSize(new Dimension(w, h)); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); icon.paintIcon(this, g, 0, 0); } } public class PaintingIconEx extends JFrame { public PaintingIconEx() { initUI(); } private void initUI() { DrawingPanel dpnl = new DrawingPanel(); createLayout(dpnl); setTitle("Image"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } private void createLayout(JComponent... arg) { Container pane = getContentPane(); GroupLayout gl = new GroupLayout(pane); pane.setLayout(gl); gl.setHorizontalGroup(gl.createSequentialGroup() .addComponent(arg[0]) ); gl.setVerticalGroup(gl.createParallelGroup() .addComponent(arg[0]) ); pack(); } public static void main(String[] args) { EventQueue.invokeLater(() -> { JFrame ex = new PaintingIconEx(); ex.setVisible(true); }); } } ``` 該示例將文件系統中的圖像加載到`ImageIcon`中并將其繪制在`JPanel`組件上。 ```java private void loadImage() { icon = new ImageIcon("book.jpg"); } ``` 我們將 JPG 圖像加載到`ImageIcon`中。該圖像位于項目根目錄中。 ```java private void initPanel() { int w = icon.getIconWidth(); int h = icon.getIconHeight(); setPreferredSize(new Dimension(w, h)); } ``` 在`initPanel()`方法中，我們使用`getIconWidth()`和`getIconHeight()`方法確定圖標的寬度和高度。我們設置面板的首選大小以匹配圖標大小。 ```java @Override public void paintComponent(Graphics g) { super.paintComponent(g); icon.paintIcon(this, g, 0, 0); } ``` 在`paintComponent()`方法中，我們使用`paintIcon()`方法在面板上繪制圖標。 ![Painting icon](https://img.kancloud.cn/64/a7/64a79d163139a1dbce3a08cd05006644_236x242.jpg) 圖：繪畫圖標 ## 縮放圖像以下示例顯示了縮放圖像的簡單方法。 `ImageIconScaleEx.java` ```java package com.zetcode; import java.awt.Container; import java.awt.EventQueue; import java.awt.Image; import javax.swing.GroupLayout; import javax.swing.ImageIcon; import javax.swing.JComponent; import javax.swing.JFrame; import static javax.swing.JFrame.EXIT_ON_CLOSE; import javax.swing.JLabel; public class ImageIconScaleEx extends JFrame { public ImageIconScaleEx() { initUI(); } private void initUI() { ImageIcon originalIcon = new ImageIcon("slovakia.png"); JLabel originalLabel = new JLabel(originalIcon); int width = originalIcon.getIconWidth() / 2; int height = originalIcon.getIconHeight() / 2; Image scaled = scaleImage(originalIcon.getImage(), width, height); ImageIcon scaledIcon = new ImageIcon(scaled); JLabel newLabel = new JLabel(scaledIcon); createLayout(originalLabel, newLabel); setTitle("Scaled icon"); setLocationRelativeTo(null); setDefaultCloseOperation(EXIT_ON_CLOSE); } private Image scaleImage(Image image, int w, int h) { Image scaled = image.getScaledInstance(w, h, Image.SCALE_SMOOTH); return scaled; } private void createLayout(JComponent... arg) { Container pane = getContentPane(); GroupLayout gl = new GroupLayout(pane); pane.setLayout(gl); gl.setAutoCreateContainerGaps(true); gl.setAutoCreateGaps(true); gl.setHorizontalGroup(gl.createSequentialGroup() .addComponent(arg[0]) .addComponent(arg[1]) ); gl.setVerticalGroup(gl.createParallelGroup() .addComponent(arg[0]) .addComponent(arg[1]) ); pack(); } public static void main(String[] args) { EventQueue.invokeLater(() -> { ImageIconScaleEx ex = new ImageIconScaleEx(); ex.setVisible(true); }); } } ``` 窗口上顯示了兩個圖像：原始圖像及其旁邊的縮放圖像。 ```java ImageIcon originalIcon = new ImageIcon("slovakia.png"); ``` 我們將 PNG 圖像讀取到`ImageIcon`中。該圖像位于項目根目錄中。 ```java int width = originalIcon.getIconWidth() / 2; int height = originalIcon.getIconHeight() / 2; ``` 我們使用`getIconWidth()`和`getIconHeight()`方法獲得原始圖像的寬度和高度。 ```java Image scaled = scaleImage(originalIcon.getImage(), width, height); ``` 我們將圖標的`Image`，其`width`和`height`傳遞給`scaleImage()`方法，在其中執行縮放操作。 ```java private Image scaleImage(Image image, int w, int h) { Image scaled = image.getScaledInstance(w, h, Image.SCALE_SMOOTH); return scaled; } ``` `getScaledInstance()`創建`Image`的縮放版本。我們使用`Image.SCALE_SMOOTH`縮放操作，該操作對圖像平滑度的優先級高于縮放速度。 ```java ImageIcon scaledIcon = new ImageIcon(scaled); JLabel newLabel = new JLabel(scaledIcon); ``` 我們從`Image`創建一個`ImageIcon`，并將其傳遞給`JLabel`組件。 ![Scaling image](https://img.kancloud.cn/a5/2c/a52c3e079bb4cb7d56cfa8a776148cdf_407x216.jpg) 圖：縮放 image ## 自定義圖標 Swing 繪畫 API 也可以用于創建自定義圖標。圖形上下文將傳遞給`paintIcon()`方法。 `CustomIconEx.java` ```java package com.zetcode; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Component; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.Icon; import javax.swing.JFrame; import javax.swing.JLabel; class MissingIcon implements Icon { private final int WIDTH = 32; private final int HEIGHT = 32; private final BasicStroke stroke = new BasicStroke(5); @Override public void paintIcon(Component c, Graphics g, int x, int y) { doDrawing(g, x, y); } public void doDrawing(Graphics g, int x, int y) { Graphics2D g2d = (Graphics2D) g.create(); g2d.setColor(Color.white); g2d.fillRect(x + 1, y + 1, WIDTH - 2, HEIGHT - 2); g2d.setColor(Color.darkGray); g2d.drawRect(x + 1, y + 1, WIDTH - 2, HEIGHT - 2); g2d.setColor(Color.red); g2d.setStroke(stroke); g2d.drawLine(x + 10, y + 10, x + WIDTH - 10, y + HEIGHT - 10); g2d.drawLine(x + 10, y + HEIGHT - 10, x + WIDTH - 10, y + 10); g2d.dispose(); } @Override public int getIconWidth() { return WIDTH; } @Override public int getIconHeight() { return HEIGHT; } } class MyLabel extends JLabel { public MyLabel(Icon icon) { super(icon); } @Override public boolean isOpaque() { return true; } } public class CustomIconEx extends JFrame { public CustomIconEx() { initUI(); } private void initUI() { JLabel lbl = new MyLabel(new MissingIcon()); lbl.setBackground(Color.gray); add(lbl); setSize(250, 150); setTitle("Custom icon"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { CustomIconEx ex = new CustomIconEx(); ex.setVisible(true); }); } } ``` 該示例創建一個缺少的自定義圖標，并在帶有`JLabel`的窗口上顯示該圖標。 ```java class MissingIcon implements Icon { ``` 要創建自定義圖標，我們實現`Icon`接口。 ```java @Override public int getIconWidth() { return WIDTH; } @Override public int getIconHeight() { return HEIGHT; } ``` 我們重寫`getIconWidth()`和`getIconHeight()`方法，它們確定圖標的大小。 ```java @Override public void paintIcon(Component c, Graphics g, int x, int y) { doDrawing(g, x, y); } ``` 我們覆蓋了`paintIcon()`方法，在該方法中繪制了圖標。 `Graphics`對象提供了許多繪制 2D 形狀并獲取有關應用圖形環境的信息的方法。 ```java public void doDrawing(Graphics g, int x, int y) { Graphics2D g2d = (Graphics2D) g.create(); g2d.setColor(Color.white); g2d.fillRect(x + 1, y + 1, WIDTH - 2, HEIGHT - 2); g2d.setColor(Color.darkGray); g2d.drawRect(x + 1, y + 1, WIDTH - 2, HEIGHT - 2); g2d.setColor(Color.red); g2d.setStroke(stroke); g2d.drawLine(x + 10, y + 10, x + WIDTH - 10, y + HEIGHT - 10); g2d.drawLine(x + 10, y + HEIGHT - 10, x + WIDTH - 10, y + 10); g2d.dispose(); } ``` 在`doDrawing()`方法內部，我們繪制了圖標。該過程與`paintComponent()`方法中的繪制相同。 `Graphics2D`類擴展了`Graphics`類，以提供對幾何，坐標轉換，顏色管理和文本布局的更復雜的控制。 ```java class MyLabel extends JLabel { public MyLabel(Icon icon) { super(icon); } @Override public boolean isOpaque() { return true; } } ``` 我們有一個自定義的`MyLabel`組件。我們將其設為不透明，即標簽具有背景。 ```java JLabel lbl = new MyLabel(new MissingIcon()); ``` 圖標設置為標簽組件。 ![Missing custom icon](https://img.kancloud.cn/15/ca/15ca696bcf09f4a548fe81277f24d79f_250x150.jpg) 圖：缺少自定義圖標 ## `ImageIcon`按鈕可以將`ImageIcons`放置在`JButton`組件上。 `ImageIconButtonsEx.java` ```java package com.zetcode; import java.awt.Container; import java.awt.EventQueue; import javax.swing.GroupLayout; import javax.swing.ImageIcon; import javax.swing.JButton; import javax.swing.JComponent; import javax.swing.JFrame; import static javax.swing.JFrame.EXIT_ON_CLOSE; public class ImageIconButtonsEx extends JFrame { public ImageIconButtonsEx() { initUI(); } private void initUI() { ImageIcon quitIcon = new ImageIcon("quit.png"); ImageIcon saveIcon = new ImageIcon("save.png"); ImageIcon homeIcon = new ImageIcon("home.png"); JButton quitBtn = new JButton(quitIcon); JButton saveBtn = new JButton(saveIcon); JButton homeBtn = new JButton(homeIcon); createLayout(quitBtn, saveBtn, homeBtn); setTitle("JButtons"); setLocationRelativeTo(null); setDefaultCloseOperation(EXIT_ON_CLOSE); } private void createLayout(JComponent... arg) { Container pane = getContentPane(); GroupLayout gl = new GroupLayout(pane); pane.setLayout(gl); gl.setAutoCreateContainerGaps(true); gl.setAutoCreateGaps(true); gl.setHorizontalGroup(gl.createSequentialGroup() .addComponent(arg[0]) .addComponent(arg[1]) .addComponent(arg[2]) ); gl.setVerticalGroup(gl.createParallelGroup() .addComponent(arg[0]) .addComponent(arg[1]) .addComponent(arg[2]) ); gl.linkSize(arg[0], arg[1], arg[2]); pack(); } public static void main(String[] args) { EventQueue.invokeLater(() -> { ImageIconButtonsEx ex = new ImageIconButtonsEx(); ex.setVisible(true); }); } } ``` 我們有三個按鈕。它們每個都顯示一個`ImageIcon`。 ```java ImageIcon quitIcon = new ImageIcon("quit.png"); ImageIcon saveIcon = new ImageIcon("save.png"); ImageIcon homeIcon = new ImageIcon("home.png"); ``` 創建了三個`ImageIcons`。我們將文件名傳遞給每個構造器。 PNG 文件位于項目根目錄中。 ```java JButton quitBtn = new JButton(quitIcon); JButton saveBtn = new JButton(saveIcon); JButton homeBtn = new JButton(homeIcon); ``` `JButton`組件接受`ImageIcon`作為參數。 ![Image buttons](https://img.kancloud.cn/e5/9f/e59f8c0c9838a8ae871220bcc8d49fd4_206x82.jpg) 圖：圖像 buttons ## `JFrame`圖標 `JFrame`組件可以在其標題欄中顯示一個圖標。它顯示在標題欄的左側。 `FrameIconEx.java` ```java package com.zetcode; import java.awt.EventQueue; import javax.swing.ImageIcon; import javax.swing.JFrame; import static javax.swing.JFrame.EXIT_ON_CLOSE; public class FrameIconEx extends JFrame { public FrameIconEx() { initUI(); } private void initUI() { ImageIcon webIcon = new ImageIcon("web.png"); setIconImage(webIcon.getImage()); setTitle("Icon"); setSize(300, 200); setLocationRelativeTo(null); setDefaultCloseOperation(EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { FrameIconEx ex = new FrameIconEx(); ex.setVisible(true); }); } } ``` `web.png`是一個很小的`22x22px`圖像文件。 ```java ImageIcon webIcon = new ImageIcon("web.png"); ``` 我們從位于項目根目錄中的 PNG 文件創建一個`ImageIcon`。 ```java setIconImage(webIcon.getImage()); ``` `setIconImage()`設置要顯示為該窗口圖標的圖像。 `getImage()`返回圖標的`Image`。 ![Icon](https://img.kancloud.cn/f7/8e/f78eaff8d96f6ca509daa9bbf24fb0bc_300x200.jpg) 圖：圖標 ## `JLabel`中的`ImageIcon` 在下面的示例中，我們將`ImageIcons`放入`JLabel`組件中。 `ImageIconLabelEx.java` ```java package com.zetcode; import java.awt.Container; import java.awt.EventQueue; import javax.swing.GroupLayout; import javax.swing.ImageIcon; import javax.swing.JComponent; import javax.swing.JFrame; import static javax.swing.JFrame.EXIT_ON_CLOSE; import javax.swing.JLabel; public class ImageIconLabelEx extends JFrame { public ImageIconLabelEx() { initUI(); } private void initUI() { JLabel lbl1 = new JLabel(new ImageIcon("cpu.png")); JLabel lbl2 = new JLabel(new ImageIcon("drive.png")); JLabel lbl3 = new JLabel(new ImageIcon("laptop.png")); JLabel lbl4 = new JLabel(new ImageIcon("player.png")); JLabel lbl5 = new JLabel(new ImageIcon("pda.png")); createLayout(lbl1, lbl2, lbl3, lbl4, lbl5); setTitle("Icons"); setLocationRelativeTo(null); setDefaultCloseOperation(EXIT_ON_CLOSE); } private void createLayout(JComponent... arg) { Container pane = getContentPane(); GroupLayout gl = new GroupLayout(pane); pane.setLayout(gl); gl.setAutoCreateContainerGaps(true); gl.setAutoCreateGaps(true); gl.setHorizontalGroup(gl.createSequentialGroup() .addComponent(arg[0]) .addComponent(arg[1]) .addComponent(arg[2]) .addComponent(arg[3]) .addComponent(arg[4]) ); gl.setVerticalGroup(gl.createParallelGroup() .addComponent(arg[0]) .addComponent(arg[1]) .addComponent(arg[2]) .addComponent(arg[3]) .addComponent(arg[4]) ); pack(); } public static void main(String[] args) { EventQueue.invokeLater(() -> { ImageIconLabelEx ex = new ImageIconLabelEx(); ex.setVisible(true); }); } } ``` 項目根目錄中有五個 PNG 文件。它們顯示在`JLabel`組件的窗口中。 ```java JLabel lbl1 = new JLabel(new ImageIcon("cpu.png")); JLabel lbl2 = new JLabel(new ImageIcon("drive.png")); JLabel lbl3 = new JLabel(new ImageIcon("laptop.png")); JLabel lbl4 = new JLabel(new ImageIcon("player.png")); JLabel lbl5 = new JLabel(new ImageIcon("pda.png")); ``` `JLabel`具有一個構造器，該構造器將`ImageIcon`作為參數。 ![Icons in labels](https://img.kancloud.cn/27/26/27265429576aa435327ab812c37a84cd_290x98.jpg) 圖：圖標s in labels ## `JTabbedPane`中的`ImageIcon` `JTabbedPane`是 Swing 組件，允許用戶通過單擊選項卡在一組組件之間切換。這些選項卡可以包含`ImageIcons`。 `ImageIconTabbedPaneEx` ```java package com.zetcode; import java.awt.Container; import java.awt.Dimension; import java.awt.EventQueue; import javax.swing.GroupLayout; import javax.swing.ImageIcon; import javax.swing.JComponent; import javax.swing.JFrame; import static javax.swing.JFrame.EXIT_ON_CLOSE; import javax.swing.JPanel; import javax.swing.JTabbedPane; public class ImageIconTabbedPaneEx extends JFrame { public ImageIconTabbedPaneEx() { initUI(); } private void initUI() { ImageIcon icon1 = new ImageIcon("dot1.png"); ImageIcon icon2 = new ImageIcon("dot2.png"); ImageIcon icon3 = new ImageIcon("dot3.png"); JTabbedPane tbp = new JTabbedPane(); tbp.setPreferredSize(new Dimension(350, 250)); tbp.addTab("", icon1, new JPanel()); tbp.addTab("", icon2, new JPanel()); tbp.addTab("", icon3, new JPanel()); createLayout(tbp); setTitle("Icons"); setLocationRelativeTo(null); setDefaultCloseOperation(EXIT_ON_CLOSE); } private void createLayout(JComponent... arg) { Container pane = getContentPane(); GroupLayout gl = new GroupLayout(pane); pane.setLayout(gl); gl.setAutoCreateContainerGaps(true); gl.setAutoCreateGaps(true); gl.setHorizontalGroup(gl.createSequentialGroup() .addComponent(arg[0]) ); gl.setVerticalGroup(gl.createParallelGroup() .addComponent(arg[0]) ); pack(); } public static void main(String[] args) { EventQueue.invokeLater(() -> { ImageIconTabbedPaneEx ex = new ImageIconTabbedPaneEx(); ex.setVisible(true); }); } } ``` 該示例在`JTabbedPane`組件的選項卡中顯示`ImageIcons`。 ```java ImageIcon icon1 = new ImageIcon("dot1.png"); ``` `ImageIcon`已創建。 ```java JTabbedPane tbp = new JTabbedPane(); ``` `JTabbedPane`已創建。 ```java tbp.addTab("", icon1, new JPanel()); ``` `addTab()`方法的第二個參數是`ImageIcon`。 ![JTabbedPane icons](https://img.kancloud.cn/bd/00/bd0010a2fe3a654a9d4b55fd810c8a41_376x300.jpg) 圖：`JTabbedPane`圖標本教程專門針對 Java `ImageIcon`。您可能也對相關教程感興趣：[用 Java 讀寫 ICO 圖像](/articles/javaico/)， [Java Swing 教程](/tutorials/javaswingtutorial/)， [Java 教程](/lang/java/)，[用 Java 顯示圖像](/java/displayimage/) 。