java自定义ui_Java自定义JSlider UI

JSlider作为Swing中提供的滑标组件， 以图形方式在有界区间内通过移动滑块来选择值，滑块可以显示主刻度标记和次刻度标记。大量应用于如播放器中的音量设定等领域中。

但是JSlider本身提供的UI样式很单调，不足以满足用户的审美需求，往往需要我们自行重构其UI。

下面我给出一个简单的例子。

package org.loon.framework.swing.test;

import java.awt.BorderLayout;

import java.awt.Color;

import java.awt.Component;

import java.awt.Dimension;

import java.awt.EventQueue;

import java.awt.GradientPaint;

import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.Polygon;

import java.awt.Rectangle;

import java.awt.RenderingHints;

import javax.swing.Box;

import javax.swing.JFrame;

import javax.swing.JLabel;

import javax.swing.JPanel;

import javax.swing.JSlider;

import javax.swing.WindowConstants;

import javax.swing.event.ChangeEvent;

import javax.swing.event.ChangeListener;

/** *//**

*

* Title: LoonFramework

*

*

* Description:

*

*

* Copyright: Copyright (c) 2007

*

*

* Company: LoonFramework

*

*

* @author chenpeng

* @email：

ceponline@yahoo.com.cn

* @version 0.1

*/

public class ExampleSlider extends JPanel ...{

/** *//**

*

*/

private static final long serialVersionUID = 1L;

public ExampleSlider() ...{

// 设定布局器

super(new BorderLayout());

// 设定监听器

ChangeListener listener = new ChangeListener() ...{

public void stateChanged(ChangeEvent e) ...{

if (e.getSource() instanceof JSlider) ...{

System.out.println("刻度: "

+ ((JSlider) e.getSource()).getValue());

}

}

};

// 设定JSlider1

JSlider s1 = new JSlider(0, 100, 0);

// 注入自定义ui

s1.setUI(new MySliderUI());

// 主刻度

s1.setMajorTickSpacing(10);

// 次刻度

s1.setMinorTickSpacing(5);

// 设定为显示

s1.setPaintTicks(true);

s1.setPaintLabels(true);

// 监听slider1

s1.addChangeListener(listener);

// 设定JSlider2

JSlider s2 = new JSlider(0, 100, 0);

// 使用MetalSliderUI为ui

s2.setUI(new javax.swing.plaf.metal.MetalSliderUI() ...{

protected void paintHorizontalLabel(Graphics g, int v, Component l) ...{

JLabel lbl = (JLabel) l;

lbl.setForeground(Color.green);

super.paintHorizontalLabel(g, v, lbl);

}

});

s2.setForeground(Color.BLUE);

s2.setMajorTickSpacing(10);

s2.setMinorTickSpacing(5);

s2.setPaintTicks(true);

s2.setPaintLabels(true);

s2.addChangeListener(listener);

//使用盒式容器

Box box = Box.createVerticalBox();

box.add(Box.createVerticalStrut(5));

box.add(s1);

box.add(Box.createVerticalStrut(5));

box.add(s2);

box.add(Box.createVerticalGlue());

add(box, BorderLayout.CENTER);

add(Box.createHorizontalStrut(5), BorderLayout.WEST);

add(Box.createHorizontalStrut(5), BorderLayout.EAST);

//设定窗体大小

setPreferredSize(new Dimension(240, 100));

}

public static void main(String[] args) ...{

EventQueue.invokeLater(new Runnable() ...{

public void run() ...{

createUI();

}

});

}

public static void createUI() ...{

JFrame frame = new JFrame("音量刻度设置");

frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);

frame.getContentPane().add(new ExampleSlider());

frame.setResizable(false);

frame.pack();

//居中

frame.setLocationRelativeTo(null);

frame.setVisible(true);

}

}

class MySliderUI extends javax.swing.plaf.metal.MetalSliderUI ...{

/** *//**

* 绘制指示物

*/

public void paintThumb(Graphics g) ...{

Graphics2D g2d = (Graphics2D) g;

g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

//填充椭圆框为当前thumb位置

g2d.fillOval(thumbRect.x, thumbRect.y, thumbRect.width,

thumbRect.height);

//也可以帖图(利用鼠标事件转换image即可体现不同状态)

//g2d.drawImage(image, thumbRect.x, thumbRect.y, thumbRect.width,thumbRect.height,null);

}

/** *//**

* 绘制刻度轨迹

*/

public void paintTrack(Graphics g) ...{

int cy, cw;

Rectangle trackBounds = trackRect;

if (slider.getOrientation() == JSlider.HORIZONTAL) ...{

Graphics2D g2 = (Graphics2D) g;

cy = (trackBounds.height / 2) - 2;

cw = trackBounds.width;

g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,

RenderingHints.VALUE_ANTIALIAS_ON);

g2.translate(trackBounds.x, trackBounds.y + cy);

// 背景设为灰色

g2.setPaint(Color.GRAY);

g2.fillRect(0, -cy, cw, cy * 2);

int trackLeft = 0;

int trackRight = 0;

trackRight = trackRect.width - 1;

int middleOfThumb = 0;

int fillLeft = 0;

int fillRight = 0;

//坐标换算

middleOfThumb = thumbRect.x + (thumbRect.width / 2);

middleOfThumb -= trackRect.x;

if (!drawInverted()) ...{

fillLeft = !slider.isEnabled() ? trackLeft : trackLeft + 1;

fillRight = middleOfThumb;

} else ...{

fillLeft = middleOfThumb;

fillRight = !slider.isEnabled() ? trackRight - 1

: trackRight - 2;

}

// 设定渐变

g2.setPaint(new GradientPaint(0, 0, new Color(0, 100, 100), cw, 0,

new Color(0, 255, 100), true));

g2.fillRect(0, -cy, fillRight - fillLeft, cy * 2);

g2.setPaint(slider.getBackground());

Polygon polygon = new Polygon();

polygon.addPoint(0, cy);

polygon.addPoint(0, -cy);

polygon.addPoint(cw, -cy);

g2.fillPolygon(polygon);

polygon.reset();

g2.setPaint(Color.WHITE);

g2.drawLine(0, cy, cw - 1, cy);

g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,

RenderingHints.VALUE_ANTIALIAS_OFF);

g2.translate(-trackBounds.x, -(trackBounds.y + cy));

} else ...{

super.paintTrack(g);

}

}

}

效果图：