高階 Synth：Swing 皮膚化開發全攻略，輕鬆打造專業級 UI

前言：Swing 客製化外觀的歷史痛點

過去要自訂 Swing 外觀，需繼承 Metal 39 個類或 Basic 60 個類，工作量龐大、程式碼混亂、文檔缺乏，導致開源客製外觀鳳毛麟角。Java 5.0 引入 Synth Look and Feel，以「皮膚」概念徹底改變遊戲規則：**零 Java 代碼編寫外觀，完全透過 XML + 圖片資源描述**，設計師與開發者完美分工。

Synth 核心架構：三步驟啟用

SynthLookAndFeel synth = new SynthLookAndFeel();
synth.load(MyFrame.class.getResourceAsStream("demo.xml"), MyFrame.class);
UIManager.setLookAndFeel(synth);

核心哲學：Synth 是「白板」外觀——預設完全空白，只有在 XML 定義元件時才會渲染。

XML 結構兩大核心標籤

1. <style>：定義視覺風格

包含顏色、字體、圖片、狀態、元件專屬屬性。建議**每個 Swing 元件一個 style**，雖不利用 XML 繼承，但最易編寫、除錯、維護。

2. <bind>：綁定風格至元件

<bind style="button" type="region" key="Button"/>

• key 對應 javax.swing.plaf.synth.Region 常數（如 Button、TextField、ScrollBarThumb）
• 複雜元件（JTabbedPane、JScrollBar）擁有多個 Region

實戰構建登入畫面皮膚

步驟一：全域預設字體與顏色

<style id="default">
  <font name="Aharoni" size="14"/>
  <state>
    <color value="#FFFFFF" type="FOREGROUND"/>
  </state>
</style>
<bind style="default" type="region" key=".*"/> <!-- 萬用字元套用所有元件 -->

步驟二：圖片邊框與九宮格拉伸

痛點：TextField 邊框非固定尺寸，如何用單一圖片適應任意大小？

解法：九宮格切圖——將圖片切為 9 區域（四角不拉伸、邊緣單向拉伸、中心可選），透過 sourceInsets 定義切割線。

<style id="textfield">
  <opaque value="true"/>
  <state>
    <font name="Aharoni" size="14"/>
    <color value="#D2DFF2" type="BACKGROUND"/>
    <color value="#000000" type="TEXT_FOREGROUND"/>
  </state>
  <imagePainter method="textFieldBorder" path="images/textfield.png"
                sourceInsets="4 6 4 6" paintCenter="false"/>
  <insets top="4" left="6" bottom="4" right="6"/> <!-- 增加內邊距容納圖片 -->
</style>
<bind style="textfield" type="region" key="TextField"/>

• method 對應 SynthPainter.paintTextFieldBorder（去掉 paint 前綴、首字母小寫）
• sourceInsets：上 左 下 右（像素）
• paintCenter="false"：中心區域留給文字渲染

步驟三：狀態感知樣式（按鈕為例）

<style id="button">
  <state> <!-- DEFAULT 狀態 -->
    <imagePainter method="buttonBackground" path="images/button.png"
                  sourceInsets="9 10 9 12" paintCenter="true" stretch="true"/>
    <insets top="9" left="10" bottom="9" right="12"/>
    <font name="Aharoni" size="16"/>
    <color type="TEXT_FOREGROUND" value="#FFFFFF"/>
  </state>
  <state value="MOUSE_OVER">
    <imagePainter method="buttonBackground" path="images/button_on.png" .../>
    <insets .../>
    <color type="TEXT_FOREGROUND" value="#FFFFFF"/>
  </state>
  <state value="PRESSED">
    <imagePainter method="buttonBackground" path="images/button_press.png" .../>
    <insets .../>
    <color type="TEXT_FOREGROUND" value="#FFFFFF"/>
  </state>
  <property key="Button.margin" type="insets" value="0 0 0 0"/>
</style>
<bind style="button" type="region" key="Button"/>

支援狀態：ENABLED、MOUSE_OVER、PRESSED、DISABLED、FOCUSED、SELECTED、DEFAULT。可組合：value="MOUSE_OVER and PRESSED"。

步驟四：元件專屬屬性（CheckBox 圖示切換）

<style id="checkbox">
  <imageIcon id="check_off" path="images/checkbox_off.png"/>
  <imageIcon id="check_on" path="images/checkbox_on.png"/>
  <property key="CheckBox.icon" value="check_off"/>
  <state value="SELECTED">
    <property key="CheckBox.icon" value="check_on"/>
  </state>
</style>
<bind style="checkbox" type="region" key="CheckBox"/>

<property> 如雜湊表，直接對應 UIManager 鍵值對。

步驟五：自訂 Painter 繪製漸層背景與曲線

XML 無法描述複雜繪圖邏輯時，擴展 SynthPainter 並透過 <painter> 註冊。

<style id="panel">
  <object id="background" class="demo.synth.BackgroundPainter"/>
  <object class="javax.swing.plaf.ColorUIResource" id="startColor">
    <int>30</int><int>123</int><int>235</int>
  </object>
  <defaultsProperty key="Panel.startBackground" type="idref" value="startColor"/>
  <object class="javax.swing.plaf.ColorUIResource" id="endColor">
    <int>1</int><int>20</int><int>80</int>
  </object>
  <defaultsProperty key="Panel.endBackground" type="idref" value="endColor"/>
  <painter method="panelBackground" idref="background"/>
</style>
<bind style="panel" type="region" key="Panel"/>

public class BackgroundPainter extends SynthPainter {
    public void paintPanelBackground(SynthContext ctx, Graphics g, int x, int y, int w, int h) {
        Color start = UIManager.getColor("Panel.startBackground");
        Color end = UIManager.getColor("Panel.endBackground");
        Graphics2D g2 = (Graphics2D) g;
        g2.setPaint(new GradientPaint(x, y, start, w, h, end));
        g2.fillRect(x, y, w, h);
        g2.setColor(new Color(255, 255, 255, 120));
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        g2.draw(new CubicCurve2D.Double(0, h/4, w/3, h/10, 66*w, 1.5*h, w, h/8));
    }
}

進階技巧

1. 非 Swing 元件皮膚化

<bind style="mystyle" type="name" key="Custom.*"/> <!-- 針對類名開頭為 Custom 的元件 -->

2. 風格繼承與克隆

<style id="base">
  <color value="BLACK" type="BACKGROUND"/>
  <state><font size="14"/></state>
</style>
<bind style="base" type="region" key=".*"/>
<style id="sublevel" clone="base">
  <color value="RED" type="BACKGROUND"/> <!-- 覆寫背景色 -->
</style>
<bind style="sublevel" type="region" key="Label"/>

效能、可靠性與開發效率實測

載入效能測試（三機種、兩場景）

結論：Synth 載入略慢於內建外觀，但壓力測試差距極小。**關鍵優化：減少不同圖片數量，複用圖片資源。**

已知問題與規避

• JTabbedPane 相關 Bug 佔多數（Sun Bug Parade 顯示 125 個 Bug，多數已關閉）
• JPanel 背景顏色直接設定無效 → 改用自訂 Painter
• 狀態改變時字體大小變更可能異常 → 避免不同狀態使用差異大的字體尺寸
• 所有問題均有替代方案，不構成阻礙

開發效率量化對比

**結論**：4 人團隊（2 設計 + 2 開發）**3 週內**即可交付完整專業外觀。

結語

Synth 以「資料驅動 UI」徹底解決 Swing 客製化難題：XML + 圖片分離關注點、設計師與開發者並行、標準化 Painter 擴展機制、效能可控。Java 1.4 的 GTK+/Windows XP 外觀即以 Synth 內建實現，證明其生產級成熟度。立即擁抱 Synth，讓你的 Swing 應用擁有媲美原生應用的視覺體驗！