# JSlider Design ändern



## FmM89n (3. Jan 2011)

Ist es möglich ein JSlider Objekt (oder ein anderes Swing/AWT Objekt) so umzugestalten, dass das Objekt wie folgt aussieht?









Ich benütze das herkömmliche java LookAndFeel und möchte dies auch nicht ändern


----------



## Marco13 (3. Jan 2011)

LookAndFeel lookAndFeel = UI.getLookAndFeel();
Feel feel = lookAndFeel.getFeel();
Look look = new OtherLook();
UI.setLookAndFeel(new LookAndFeel(look, feel));
???:L

Was genau meinst du? Grundsätzlich kann man bei jedem Objekt die paint-Methode überschreiben, und hat dann dort für jeden einzlenen Pixel die freie Wahl aus 16777216 Farben. Fragt sich höchstens, wie viel Aufwand gerechtfertigt ist, um etwas "so" aussehen zu lassen...


----------



## André Uhres (4. Jan 2011)

Hallo FmM89n,

versuch's mal so:


```
import java.awt.*;
import javax.swing.*;
import javax.swing.event.*;
public class MySliderDemo {
    private final JFrame window;
    public MySliderDemo() {
        window = new JFrame("MySliderDemo");
        window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        window.setSize(300, 100);
        window.setLocationRelativeTo(null);
        window.add(new MySlider(90));
    }
    public static void main(final String args[]) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                new MySliderDemo().setVisible(true);
            }
        });
    }
    public void setVisible(final boolean visible) {
        window.setVisible(visible);
    }
}
class MySlider extends JPanel {
    private final JSlider slider;
    private final JLabel label;
    public MySlider(final int value) {
        super(new BorderLayout());
        slider = new JSlider();
        label = new JLabel();
        slider.setValue(value);
        slider.setMajorTickSpacing(10);
        slider.setPaintTicks(true);
        label.setText(String.valueOf(slider.getValue()));
        int h = slider.getPreferredSize().height;
        label.setPreferredSize(new Dimension(h, h));
        slider.addChangeListener(new ChangeListener() {
            public void stateChanged(final ChangeEvent evt) {
                label.setText(String.valueOf(slider.getValue()));
            }
        });
        add(slider);
        add(label, BorderLayout.LINE_END);
    }
    public JSlider getSlider() {
        return slider;
    }
    public JLabel getLabel() {
        return label;
    }
}
```

Gruß,
André


----------



## Marco13 (4. Jan 2011)

Hui, da hat wohl jemand die Kristallkugel ausprobiert, die er zu Weihnachten bekommen hat 
Aber stimmt: Kann gut sein, das es nur um's Label ging...:bahnhof:


----------



## dgWFME (4. Jan 2011)

ich glaube ihr habt mich falsch verstanden.

für mein Programm verwende ich das Standard java look and feel. Dieses Design gefällt mir ganz gut, nur bei einem JSlider gefällt mir das Windowsdesign (siehe Bild oben) besser.
Deswegen wollte ich fragen, ob man nur das Design des JSlider Objekts ändern kann, ohne die anderen JComponents zu verändern?
Oder ob man den Pfeil des JSliders ändern kann, z.B. kleiner darstellen, farbe ändern, ...

Und eine Bitte hätte ich noch: Kann man den Stufensprung einstellen, z.B. soll sich der Pfeil in 10er Stufen bewegen können.
Das müsste mit dieser Methode gehen: setExtent()

Allerdings kann es hierbei zu Fehlern kommen, siehe Java Swing: Schieberegler - Artikel von www.it-academy.cc - Verein für Informationstechnologie

Ich kann auch damit leben, wenn die Werte nur in 10er Schritte auf den Balken auftragen werden, also 1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, nicht 1 2 3 4 ... 99 100.


----------



## André Uhres (4. Jan 2011)

Hallo sheicvNMui88,

ich weiß nicht wirklich, was du willst. Hier ein paar Links, die dir helfen könnten:
How to Use Sliders (The Java™ Tutorials > Creating a GUI With JFC/Swing > Using Swing Components)
JSlider (Java Platform SE 6)

Gruß,
André


----------



## RelaX (24. Apr 2014)

Ich weiß das die Frage schon etwas älter ist aber ich hab da mal etwas gebastelt was dem ein oder anderen vielleicht etwas weiter helfen wird. Ich hab dazu mal alles in eine Klasse gepackt damit man es direkt starten kann. ALLERDINGS wird in der letzten Klasse ein Bild benötigt welches als Zeiger dienen soll. Mehr müsst ihr nicht ändern. Das ganze ist ein Wattrechner der zwei Regler hat. Der Obere für Ohm und der untere für Volt.

Vielleicht kann jemand was mit anfangen. Feedback nehme ich wirklich gerne. Kritik hilft!!!


```
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.Image;
import java.awt.Insets;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.event.FocusEvent;
import java.awt.event.FocusListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JSlider;
import javax.swing.JTextField;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
import javax.swing.plaf.metal.MetalSliderUI;

public class Testframe extends JFrame implements Runnable   {
	
	/**
	 * 
	 */
	private static final long serialVersionUID = -7013351238082172285L;
	private JPanel mainPanel;
	public static final Color farbe1 = new Color(78, 82, 110);
	
	private TensionCalculatorTab calcview;
	
	
	public Testframe() {
		super("Test mit Slidern");
	}
	
	public void createFrame() {
		
		mainPanel = new JPanel();
		mainPanel.setBackground(farbe1);
		mainPanel.setLayout(new BorderLayout());
		
		
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setSize(900,300);
		setLocationRelativeTo(null);
		calcview = new TensionCalculatorTab();
		mainPanel.add(calcview);
		add(mainPanel);
		setVisible(true);
	}
	
	
	public void run() {
		createFrame();
	}


	public static void main(String[] args) throws IOException {
        Testframe f = new Testframe();
        f.run();
    }
	
	public class TensionCalculatorTab extends JScrollPane implements ChangeListener, KeyListener, FocusListener {

		/**
		 * 
		 */
		private static final long serialVersionUID = 7251942234341993428L;

		private JPanel mainPanel;

		private GridBagConstraints gbc;
		private GridBagLayout gbl;
		
		private RedGreenSlider ohmSlider;
		private RedGreenSlider voltSlider;
		
		private JLabel wattLable;

		public TensionCalculatorTab() {
			super();
			createView();
		}

		private void createView() {
			mainPanel = new JPanel();
			mainPanel.setBackground(Testframe.farbe1);
			gbc = new GridBagConstraints();
			gbl = new GridBagLayout();
			mainPanel.setLayout(gbl);
			
			
			
			gbc.insets = new Insets(50, 5, 0, 5);
			gbc.anchor = GridBagConstraints.NORTHWEST;
			gbc.gridwidth = GridBagConstraints.REMAINDER;
			gbc.gridx = 0;
			gbc.gridy = 0;
			gbc.weighty = 0;
			gbc.weightx = 1;
			gbc.fill = GridBagConstraints.HORIZONTAL;
			ohmSlider = new RedGreenSlider(0, 60);
			ohmSlider.addChangeListener(this);
			ohmSlider.addKeyListener(this);
			ohmSlider.addFocusListener(this);
			gbl.setConstraints(ohmSlider, gbc);
			mainPanel.add(ohmSlider);
			
			
			
			gbc.insets = new Insets(10, 5, 0, 5);
			gbc.gridx = GridBagConstraints.RELATIVE;
			gbc.gridy = GridBagConstraints.RELATIVE;
			voltSlider = new RedGreenSlider(0, 90);
			voltSlider.addChangeListener(this);
			voltSlider.addKeyListener(this);
			voltSlider.addFocusListener(this);
			gbl.setConstraints(voltSlider, gbc);
			mainPanel.add(voltSlider);
			
			
			
			gbc.insets = new Insets(10, 29, 0, 5);
			gbc.gridwidth = 1;
			gbc.weighty = 1;
			gbc.weightx = 0;
			gbc.fill = GridBagConstraints.NONE;
			JLabel label = new JLabel("Watt: ");
			gbl.setConstraints(label, gbc);
			mainPanel.add(label);
			
			
			
			gbc.insets = new Insets(10, 5, 0, 5);
			gbc.gridwidth = GridBagConstraints.REMAINDER;
			gbc.weightx = 1;
			wattLable = new JLabel(String.valueOf(((11.0 / 2) * (11.0 / 2)) / (6.6 / 2)));
			gbl.setConstraints(wattLable, gbc);
			mainPanel.add(wattLable);

			
			this.setViewportView(mainPanel);
		}

		@Override
		public void stateChanged(ChangeEvent e) {
			if(e.getSource() instanceof JSlider) {
				if(e.getSource() == ohmSlider.getSlider()) {
					synFromSlider(ohmSlider);
					calculate();
				} else if(e.getSource() == voltSlider.getSlider()) {
					synFromSlider(voltSlider);
					calculate();
				}
			}
		}
		
		private void synFromSlider(RedGreenSlider slider) {
			int value = slider.getSlider().getValue();
			if((value % 10) == 0) {
				slider.getValueField().setText(String.valueOf(slider.getSlider().getValue() / 10));
			} else {
				slider.getValueField().setText(String.valueOf(slider.getSlider().getValue() / 10.0));
			}
		}
		
		private void synFromTextField(RedGreenSlider slider, double max) {
			String typed = slider.getValueField().getText().replace(',','.');
			if(typed.matches("\\d+\\.")) {
	            return;
	        }
			double value = Double.parseDouble(typed);
			if(value > max) {
				slider.getValueField().setText(String.valueOf(max/10.0));
			} else if(value < 0) {
				slider.getValueField().setText("0.0");
			}
			slider.getSlider().setValue((int) (Double.parseDouble(slider.getValueField().getText().replace(',','.')) * 10));
		}
		
		private void calculate() {
			double volt = Double.parseDouble(voltSlider.getValueField().getText());
			double ohm = Double.parseDouble(ohmSlider.getValueField().getText());
			wattLable.setText(String.valueOf((volt * volt) / ohm));
		}

		@Override
		public void keyPressed(KeyEvent e) {
			
		}

		@Override
		public void keyReleased(KeyEvent e) {
			if(e.getSource() instanceof JTextField) {
				if(e.getSource() == ohmSlider.getValueField()) {
					synFromTextField(ohmSlider, 60);
					calculate();
				} else if(e.getSource() == voltSlider.getValueField()) {
					synFromTextField(voltSlider, 90);
					calculate();
				}
			}
		}

		@Override
		public void keyTyped(KeyEvent e) {
		}

		@Override
		public void focusGained(FocusEvent e) {
			if (e.getSource() instanceof JTextField) {
				((JTextField) e.getSource()).selectAll();
			}
		}

		@Override
		public void focusLost(FocusEvent arg0) {
			
		}
		
		public class RedGreenSlider extends JPanel {

			
			/**
			 * 
			 */
			private static final long serialVersionUID = -9213928210481440460L;

			private HorizontGradientPanel gradientPanel;

			private GridBagConstraints gbc;
			private GridBagLayout gbl;
			
			private JSlider slider;

			private int maxValue;
			private int minValue;
			
			private JTextField valueField;

			private final Dimension dim = new Dimension(75, 25);

			public RedGreenSlider(int minValue, int maxValue) {
				super();
				this.minValue = minValue;
				this.maxValue = maxValue;
				createView();
			}
			
			private void createView() {
				gbc = new GridBagConstraints();
				gbl = new GridBagLayout();
				setLayout(gbl);
				setOpaque(false);
				
				gbc.insets = new Insets(0, 0, 0, 0);
				gbc.anchor = GridBagConstraints.NORTHWEST;
				gbc.gridwidth = 1;
				gbc.gridx = 0;
				gbc.gridy = 0;
				gbc.weightx = 1;
				gbc.weighty = 1;
				gbc.fill = GridBagConstraints.HORIZONTAL;
				JPanel sliderPanel = createSlider();
				gbl.setConstraints(sliderPanel, gbc);
				add(sliderPanel);
				
				gbc.insets = new Insets(0, 0, 0, 0);
				gbc.anchor = GridBagConstraints.SOUTH;
				gbc.weightx = 0;
				gbc.weighty = 0;
				gbc.fill = GridBagConstraints.NONE;
				gbc.gridx = GridBagConstraints.RELATIVE;
				gbc.gridy = GridBagConstraints.RELATIVE;
				gbc.gridwidth = GridBagConstraints.REMAINDER;
				
				valueField = new JTextField(String.valueOf(((maxValue + minValue) / 20.0)));
				valueField.setPreferredSize(dim);
				valueField.setMaximumSize(dim);
				valueField.setMinimumSize(dim);
				//TODO rounded Border?
				gbl.setConstraints(valueField, gbc);
				add(valueField);
			}
			
			private JPanel createSlider() {
				JPanel panel = new JPanel();
				GridBagConstraints gbc = new GridBagConstraints();
				GridBagLayout gbl = new GridBagLayout();
				panel.setLayout(gbl);
				panel.setOpaque(false);

				slider = new JSlider();
				slider.setMinimum(minValue);
				slider.setMaximum(maxValue);
				slider.setMinorTickSpacing(1);
				slider.setValue(((maxValue + minValue) / 2));
				
				try {
					slider.setUI(new CustomSliderUI(slider));
				} catch (IOException e) {
					e.printStackTrace();
				}
				
				gbc.insets = new Insets(0, 15, 0, 15);
				gbc.anchor = GridBagConstraints.NORTHWEST;
				gbc.gridwidth = GridBagConstraints.REMAINDER;
				gbc.gridx = 0;
				gbc.gridy = 0;
				gbc.weightx = 1;
				gbc.weighty = 0;
				gbc.fill = GridBagConstraints.HORIZONTAL;
				slider.setOpaque(false);
				gbl.setConstraints(slider, gbc);
				panel.add(slider);
				
				gbc.insets = new Insets(0, 24, 0, 25);
				gbc.gridx = GridBagConstraints.RELATIVE;
				gbc.gridy = GridBagConstraints.RELATIVE;
				gradientPanel = new HorizontGradientPanel();
				Dimension dim = new Dimension(17, 17);
				gradientPanel.setMinimumSize(dim);
				gradientPanel.setPreferredSize(dim);
				gbl.setConstraints(gradientPanel, gbc);
				panel.add(gradientPanel);
				
				return panel;
			}
			
			public void addChangeListener(ChangeListener listener) {
				slider.addChangeListener(listener);
			}
			
			public void addKeyListener(KeyListener listener) {
				valueField.addKeyListener(listener);
			}
			
			public void addFocusListener(FocusListener listener) {
				valueField.addFocusListener(listener);
			}
			
			public JSlider getSlider() {
				return slider;
			}

			public void setSlider(JSlider slider) {
				this.slider = slider;
			}
			
			public JTextField getValueField() {
				return valueField;
			}

			public void setValueField(JTextField valueField) {
				this.valueField = valueField;
			}
			
			public class HorizontGradientPanel extends JPanel {

				/**
				 * 
				 */
				private static final long serialVersionUID = -1775738109870275204L;
				private final Color green = new Color(0,183,0);
				private final Color red = new Color(225,0,0);
				
				public HorizontGradientPanel() {
					super();
					setOpaque(true); 
				}
				
				
				public void paintComponent(Graphics g) { 
			        Graphics2D g2d = (Graphics2D) g.create();
			         GradientPaint gp = new GradientPaint((int)(getWidth()*0.55), getHeight()/2, green, getWidth(), getHeight()/2, red, false); 
			        g2d.setPaint(gp); 
			        g2d.fillRect(0, 0, getWidth(), getHeight()); 
			    } 
				
				
			}
			
			public class CustomSliderUI extends MetalSliderUI {
				
				private int thumbWidth = 20;
				private int thumbHeight = 20;
			    
			    private Image picimg;
			    
			    public CustomSliderUI(JSlider slider, int thumbWidth, int thumbHeight) throws IOException {
			    	this(slider);
			    	this.thumbHeight = thumbHeight;
			    	this.thumbWidth = thumbWidth;
			    }

			    public CustomSliderUI(JSlider slider) throws IOException {
			        super();
			        //TODO Hier wird ein Bild benötigt das als Zeiger dient!
			        ImageIcon img = new ImageIcon("lib" + File.separator + "pictures"
			    			+ File.separator + "1downarrow.png");
			        
					BufferedImage bild = new BufferedImage(img.getIconWidth(), img.getIconHeight(), BufferedImage.TYPE_INT_ARGB);
					bild.getGraphics().drawImage(img.getImage(), 0,0, img.getImageObserver());
			        picimg = bild.getScaledInstance(thumbWidth, thumbHeight, Image.SCALE_SMOOTH);
			    }

			    
			    @Override
			    public void paintTrack(Graphics g) {

			    }

			    @Override
			    public void paintThumb(Graphics g) {
			        Graphics2D g2d = (Graphics2D) g;
			        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
			                RenderingHints.VALUE_ANTIALIAS_OFF);
			        Rectangle t = thumbRect;
			        g2d.drawImage(picimg, t.x, t.y, null);
			    }
			    
			    
			    @Override
			    protected Dimension getThumbSize() {
			        return new Dimension(thumbWidth, thumbHeight);
			    }
			}
			
		}

	}

}
```


----------

