Java/swing/サンプル/JSliderサンプル ボリューム調整みたいなスライダ


サンプルソース JSliderSample5.java

参考 JSliderのUIや色を変更する - Java Swing Tips
teraiさんのサンプルをえいやと修正して自分用のボリューム調整的なスライダを作ってみました。

スライダの見た目を変更するには、SliderUIを継承して見た目を描画するクラスを作るようですが、
全部自力で書くと大変なのでMetalSliderUIを継承して作ってあります。

マーカーを描画するpaintThumbメソッドと、トラックを描画するpaintTrackメソッドをオーバーライドします。
// スライダー描画クラス
class TriSliderUI extends MetalSliderUI {
  // マーカー描画スレッド
  @Override
  public void paintThumb(Graphics g) {
    // ここにマーカー描画ロジックを実装
  }
 
  // トラック描画スレッド
  @Override
  public void paintTrack(Graphics g) {
    // ここにトラック描画ロジックを実装
  }
}
 

作ったUIクラスをスライダーのsetUIメソッドで slider.setUI(new TriSliderUI())なんてやれば完成です。
public class JSliderSample5 extends JFrame {
// スライダーに自作UIクラスを設定
  private void init() {
    add(new JLabel("ボリューム調整みたいなスライダ"));
    JSlider slider = new JSlider();
    slider.setUI(new TriSliderUI());
    add(slider);
  }
 

サンプルソース JSliderSample5.java

import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.Rectangle;
import java.awt.RenderingHints;
 
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JSlider;
import javax.swing.plaf.metal.MetalSliderUI;
 
// 参考
// JSliderのUIや色を変更する - Java Swing Tips
// http://terai.xrea.jp/Swing/VolumeSlider.html
// teraiさんのサンプルをえいやと修正して自分用のボリューム調整的なスライダを作ってみました。
public class JSliderSample5 extends JFrame {
  public static void main(String[] args) {
    new JSliderSample5();
  }
 
  public JSliderSample5() {
    setTitle("JSliderサンプル ボリューム調整みたいなスライダ");
    setBounds(200, 100, 300, 90);
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setLayout(new FlowLayout());
 
    init();
 
    setVisible(true);
  }
 
  private void init() {
    add(new JLabel("ボリューム調整みたいなスライダ"));
    JSlider slider = new JSlider();
    slider.setUI(new TriSliderUI());
    add(slider);
  }
}
 
// スライダー描画クラス
class TriSliderUI extends MetalSliderUI {
  // マーカー描画スレッド
  @Override
  public void paintThumb(Graphics g) {
    if (slider.getOrientation() == JSlider.HORIZONTAL) {
      Graphics2D g2 = (Graphics2D) g;
      g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
      g2.setPaint(Color.LIGHT_GRAY);
      int x = thumbRect.x + thumbRect.width / 2 - 2;
      int y = thumbRect.y;
      int w = 5;
      int h = thumbRect.height;
      g2.fill3DRect(x, y, w, h, true);
    } else {
      super.paintThumb(g);
    }
  }
 
  // トラック描画スレッド
  @Override
  public void paintTrack(Graphics g) {
    int cx, cy, cw, ch;
    int pad;
    Rectangle trackBounds = trackRect;
    if (slider.getOrientation() == JSlider.HORIZONTAL) {
      Graphics2D g2 = (Graphics2D) g;
      // いろいろ座標設定
      pad = trackBuffer;
      cx = pad;
      cy = -2 + trackBounds.height / 2;
      cw = trackBounds.width;
 
      // アンチエイリアス設定
      g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
      g2.translate(trackBounds.x, trackBounds.y + cy);
 
      // トラックの背景描画(ライトグレー
      g2.setPaint(Color.LIGHT_GRAY);
      Polygon polygon1 = new Polygon();
      polygon1.addPoint(0, cy);
      polygon1.addPoint(cw, cy);
      polygon1.addPoint(cw, -cy);
      g2.fillPolygon(polygon1);
 
      // トラックの支点から現在地までの描画(白
      g2.setPaint(Color.white);
      Polygon polygon2 = new Polygon();
      polygon2.addPoint(0, cy);
      polygon2.addPoint(thumbRect.x, cy);
      polygon2.addPoint(thumbRect.x, cy - (int) (cy * 2 / (double) cw * thumbRect.x));
      g2.fillPolygon(polygon2);
      polygon2.reset();
 
      // 黒い枠線描画
      g2.setPaint(Color.black);
      g2.drawPolygon(polygon1);
 
      g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_OFF);
      g2.translate(-trackBounds.x, -(trackBounds.y + cy));
    } else {
      super.paintTrack(g);
    }
  }
}
 

コメント

最終更新:2012年12月16日 00:34