Java Synth LookAndFeel 客製化皮膚開發完整教學

Synth 簡介

Synth 是 JDK 5 引入的可換膚觀感架構，透過 XML 定義元件外觀（圖片、顏色、字型、邊距），完全分離「外觀」與「邏輯」，無需寫繪圖代碼即可實現豐富 UI。

完整開發流程

1. 專案結構準備

src/
  com/example/
    MainFrame.java
    resources/
      synth/
        demo.xml
        images/
          btn_normal.png
          btn_hover.png
          btn_pressed.png

2. XML 皮膚定義 (demo.xml)

<?xml version="1.0" encoding="UTF-8"?>
<synth>
  <style id="buttonStyle">
    <!-- 預設狀態 -->
    <state>
      <imagePainter method="buttonBackground" 
                    path="images/btn_normal.png"
                    sourceInsets="9 10 9 12" paintCenter="true" stretch="true"/>
      <insets top="9" left="10" bottom="9" right="12"/>
      <font name="微軟正黑體" size="16"/>
      <color type="TEXT_FOREGROUND" value="#FFFFFF"/>
    </state>
    <!-- 滑鼠懸停 -->
    <state value="MOUSE_OVER">
      <imagePainter method="buttonBackground" path="images/btn_hover.png"
                    sourceInsets="9 10 9 12" paintCenter="true" stretch="true"/>
      <insets top="9" left="10" bottom="9" right="12"/>
      <color type="TEXT_FOREGROUND" value="#FFFF00"/>
    </state>
    <!-- 按下 -->
    <state value="PRESSED">
      <imagePainter method="buttonBackground" path="images/btn_pressed.png"
                    sourceInsets="10 12 8 9" paintCenter="true" stretch="true"/>
      <insets top="10" left="12" bottom="8" right="9"/>
      <color type="TEXT_FOREGROUND" value="#00FF00"/>
    </state>
    <property key="Button.margin" type="insets" value="0 0 0 0"/>
  </style>
  <bind style="buttonStyle" type="region" key="Button"/>
</synth>

3. 關鍵屬性解析

4. Java 代碼載入與啟用

import javax.swing.*;
import javax.swing.plaf.synth.SynthLookAndFeel;
import java.io.InputStream;

public class MainFrame extends JFrame {
    public MainFrame() {
        initLookAndFeel();
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setLayout(new FlowLayout());
        add(new JButton("Synth 按鈕"));
        add(new JButton("另一個按鈕"));
        pack();
        setLocationRelativeTo(null);
    }

    private void initLookAndFeel() {
        try {
            SynthLookAndFeel synth = new SynthLookAndFeel();
            // 從 classpath 載入（打包進 JAR 也能用）
            InputStream is = getClass().getResourceAsStream("/synth/demo.xml");
            synth.load(is, getClass());
            UIManager.setLookAndFeel(synth);
        } catch (Exception e) {
            e.printStackTrace();
            // 降級預設觀感
            try { UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName()); }
            catch (Exception ignored) {}
        }
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new MainFrame().setVisible(true));
    }
}

進階技巧

• 多元件共用風格：同一 <style id="..."> 可 <bind> 給 Button、ToggleButton、MenuItem 等多個 region
• 動態切換主題：準備多組 XML，運行期 UIManager.setLookAndFeel(new SynthLookAndFeel()) 熱切換
• 高解析度支援：提供 @2x 圖片，XML 中路徑用同名，配合 UIManager.put("swing.hidpi", true)（JDK 9+）
• 除錯技巧：啟動參數 -Dsynth.debug=true 印出載入過程

常見坑與解法

Synth 讓 Swing 擁有「CSS 風格」的外觀定義能力，掌握 XML + 九宮格圖片，即可零代碼打造專業級桌面應用介面。