J2ME 程式設計實戰 (五)：ImageItem 與 Spacer 佈局技巧

範例程式碼：ImageItemDemo (MIDP 2.0)

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class ImageItemDemo extends MIDlet implements CommandListener, ItemCommandListener {
    private Form form;
    private Image sohuImage, neteaseImage;
    private ImageItem sohuItem, neteaseItem;
    private Display display;
    private Command exitCmd, connectCmd;
    private Spacer spacer;
    private Alert connectingAlert;

    public ImageItemDemo() {
        form = new Form("ImageItem 測試");
        exitCmd = new Command("離開", Command.EXIT, 1);
        connectCmd = new Command("連線", Command.ITEM, 2);
        
        // Spacer: 填充剩餘空間，實現兩端對齊
        spacer = new Spacer(10, 2);
        spacer.setLayout(Item.LAYOUT_EXPAND);
        
        connectingAlert = new Alert("連線中...", "正在連線至 www.163.com ...", null, AlertType.INFO);

        try {
            // 載入 JAR 內資源圖片
            sohuImage = Image.createImage("/sohu.png");
            sohuItem = new ImageItem(null, sohuImage, ImageItem.LAYOUT_RIGHT, "這是搜狐!");
            // 無互動，純顯示
            
            neteaseImage = Image.createImage("/163.png");
            // LAYOUT_RIGHT + HYPERLINK = 右對齊 + 可點擊 (有下劃線提示)
            neteaseItem = new ImageItem(null, neteaseImage, ImageItem.LAYOUT_RIGHT, "這是網易", Item.HYPERLINK);
            neteaseItem.setItemCommandListener(this);
            neteaseItem.setDefaultCommand(connectCmd);
            
            form.append(sohuItem);
            form.append(spacer);      // 關鍵：中間彈性空間
            form.append(neteaseItem);
            form.addCommand(exitCmd);
            form.setCommandListener(this);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    protected void startApp() {
        display = Display.getDisplay(this);
        display.setCurrent(form);
    }
    protected void pauseApp() {}
    protected void destroyApp(boolean unconditional) {}

    // Form 層級命令 (離開)
    public void commandAction(Command c, Displayable d) {
        if (c == exitCmd) {
            destroyApp(false);
            notifyDestroyed();
        }
    }

    // Item 層級命令 (ImageItem 點擊)
    public void commandAction(Command c, Item item) {
        if (c == connectCmd && item == neteaseItem) {
            display.setCurrent(connectingAlert, form); // 顯示 Alert 後自動回 Form
        }
    }
}

核心技術點解析

1. ImageItem 四大建構子參數

ImageItem(String label, Image img, int layout, String altText)
ImageItem(String label, Image img, int layout, String altText, int appearanceMode)


label：標籤文字 (可為 null)
img：Image 物件 (不可變，建立後不可修改)
layout：LAYOUT_LEFT/LAYOUT_CENTER/LAYOUT_RIGHT + LAYOUT_NEWLINE_BEFORE/AFTER
altText：圖片無法顯示時的替代文字 (無障礙)
appearanceMode：PLAIN (預設) / HYPERLINK / BUTTON

2. Spacer：彈性佈局的關鍵

Spacer(int minWidth, int minHeight)
spacer.setLayout(Item.LAYOUT_EXPAND);  // 關鍵：佔用所有剩餘空間

效果：`[ImageItem:左] [Spacer:彈性填滿] [ImageItem:右]` → 兩端對齊佈局，不螢幕寬度自適應。

3. ItemCommandListener：細粒度事件處理

• `CommandListener` 處理 Form/Displayable 層級命令 (軟鍵、選單)
• `ItemCommandListener` 處理**單一 Item 內部**命令 (ImageItem 點擊、TextField 確認、Gauge 互動)
• `item.setDefaultCommand(cmd)` 設定預設動作 (如按下確認鍵觸發)

4. MIDP 2.0 新增外觀模式

資源管理最佳實踐

• 圖片放在 `res/` 目錄，打包進 JAR (`/sohu.png` 絕對路徑)
• `Image.createImage("/path")` 拋出 `IOException` 需捕獲
• 大圖片考慮 `createImage(InputStream)` 分塊載入避免 OOM
• 釋放：`image = null` + `System.gc()` (MIDP 無 Finalizer 保證)

模擬器測試要點

1. 確認 JAD 檔 `MIDlet-1: ImageItemDemo, /icon.png, ImageItemDemo`
2. WTK 模擬器：Run → 觀察兩圖片兩端對齊、中間自適應間距
3. 點擊網易圖片 → 顯示「連線中...」Alert → 自動返回 Form
4. 按下軟鍵「離開」 → MIDlet 銷毀

常見問題