Verbuggte custom JButton unter Windows

[peemo_royal]

Hi!

Folgendes Problem:
Ich habe mir eigene Button gebaut mit HIntergrundbild. Sehen auch ganz gut aus und auf meinem MAc funzen sie auch ohne Probleme aber auf WIndows siehts furchtbar aus.
1. Wenn man drüberfährt werden sie dunkler und bleiben auch so
2. Wenn man über ein label oder button drüberfährt und danach über einen anderen, wird das image des vorangehenden leicht in den hintergrund des anderen Button gezeichnet. Aber seht selbst :



Hier mal der Code zum Button:

package reversi;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.Stroke;

import javax.swing.BorderFactory;
import javax.swing.ButtonModel;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JLabel;

import sun.java2d.loops.DrawRect;

public class MyButton extends JButton {

	private String text;
	private Image startImg;
	private Image pressedImg;
	private Image enabledImg;

	public MyButton(String text) {
		super(text);
		this.text = text;
		this.startImg = new ImageIcon(this.getClass().getClassLoader()
				.getResource("StartButton.png")).getImage();
		this.pressedImg = new ImageIcon(this.getClass().getClassLoader()
				.getResource("PressedButton.png")).getImage();
		this.enabledImg = new ImageIcon(this.getClass().getClassLoader()
				.getResource("PressedButton.png")).getImage();
	}

	protected void paintComponent(Graphics g) {
		Graphics2D g2d = (Graphics2D) g;
		super.paintComponents(g2d);
		g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING,
				RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
		int h = this.getHeight();
		int w = this.getWidth();
		ButtonModel model = getModel();

		// draw Image

		if (model.isEnabled()) {
			g2d.drawImage(startImg, 0, 0, w, h, MyButton.this);
		} else {
			// draw helleren button.... tbd
			// g2d.drawImage(enabledImg, 0, 0, w, h, MyButton.this);

		}
		if (model.isPressed()) {
			g2d.drawImage(pressedImg, 0, 0, w, h, MyButton.this);
		}
		// if (model.isRollover()) {
		// g2d.drawImage(startImg, 0, 0, w, h, MyButton.this);
		// }

		Font font = new Font("label", Font.BOLD, w / 10);
		g2d.setColor(new Color(249, 243, 222));
		g2d.setFont(font);

		int textSize = g2d.getFontMetrics().stringWidth(text);
		int posX = (w - textSize) / 2;
		int posY = (int) (h / 1.5);

		g2d.drawString(this.text, posX, posY);

	}

}

und wie ich die Button einbinde:

	startPanel = new BackgroundPanel(this.background);
		startPanel.setLayout(gridBagLayout);
		GridBagConstraints c = new GridBagConstraints();

		createAvatars();
		avaLabelList = createAvatarList();

		nextAvaButton = new JButton(new ImageIcon(blackArrowRight));
		nextAvaButton.setPreferredSize(avaButtonSize);
		nextAvaButton.setOpaque(false);
		nextAvaButton.setContentAreaFilled(false);
		nextAvaButton.setBorderPainted(false);
		nextAvaButton.setPressedIcon(new ImageIcon(greenArrowRight));

		prevAvaButton = new JButton(new ImageIcon(blackArrowLeft));
		prevAvaButton.setPreferredSize(avaButtonSize);
		prevAvaButton.setOpaque(false);
		prevAvaButton.setContentAreaFilled(false);
		prevAvaButton.setBorderPainted(false);
		prevAvaButton.setPressedIcon(new ImageIcon(greenArrowLeft));

		// Buttons for MenuHandling
		offLineButton = new MyButton("OFFLINE");
		offLineButton.setPreferredSize(buttonSize);
		onLineButton = new MyButton("ONLINE");
		onLineButton.setPreferredSize(buttonSize);
		quitButton = new MyButton("QUIT");
		quitButton.setPreferredSize(buttonSize);

		// Add Avatars
		c.gridx = 0;
		c.gridy = 0;
		c.insets = new Insets(0, 20, 20, 20);
		startPanel.add(prevAvaButton, c);

		c.gridx = 1;
		c.gridy = 0;
		startPanel.add(avaLabel0, c);
		startPanel.add(avaLabel1, c);
		startPanel.add(avaLabel2, c);
		startPanel.add(avaLabel3, c);
		startPanel.add(avaLabel4, c);

		c.gridx = 2;
		c.gridy = 0;
		startPanel.add(nextAvaButton, c);
		// BUTTONS
		c.insets = new Insets(20, 0, 0, 0);
		c.gridx = 1;
		c.gridy = 1;
		startPanel.add(offLineButton, c);
		c.gridx = 1;
		c.gridy = 2;
		startPanel.add(onLineButton, c);
		c.gridx = 1;
		c.gridy = 3;
		startPanel.add(quitButton, c);

Ein ähnliches Problem hab ich auch mit einer Custom JScrollBar, aber wenn das gelöst werden sollte weiss ich glaub ich auch wie das andere funzt
Ich hab ehrlich gesagt keine Idee was ich falsch mach. Liegts an der Paint Mehtode oder am LAyout?
Bei meinem Mac tritt das Problem gar nicht auf, nur das mit der ScrollPAne...

Ich hoffe ihr könnt mir helfen. Muss übermorgen abgeben und bin ein wenig am verzweifeln.

€dit: hab den button jetzt au setRollOverEnabled(false) gesetzt, jetzt passierts nur noch wenn man ihn klickt, selbes ergebnis aber
Grüße Peter

 

[IMartin]

Das Layout habe ich mir nicht angesehen. In der Button-Klasse wird in

paintComponent(Graphics)

nicht

super.paintComponent(Graphics)

, sondern

super.paintComponents(Graphics)

aufgerufen. Würde ich nicht tun. Außerdem würde ich den Text nicht selber zeichnen, sondern JButton arbeiten lassen.

Nicht bis ins Detail durchdacht und auch ohne rollover image, aber tut unter meinem Windows:

public class MyButton extends JButton {

	private Image startImg;
	private Image pressedImg;

	public MyButton(String text) {
		super(text);
		
		startImg = new ImageIcon(MyButton.class.getResource("StartButton.png")).getImage();
		pressedImg = new ImageIcon(MyButton.class.getResource("PressedButton.png")).getImage();
		
		setContentAreaFilled(false);
		setFocusPainted(false);
		setForeground(new Color(249, 243, 222));
		Font font = getFont();
		setFont(new Font(font.getFamily(), Font.BOLD, 18));
	}
	
	@Override
	protected void paintComponent(Graphics g) {
		Image img = null;
		if(model.isEnabled()) {
			if(model.isPressed()) {
				img = pressedImg;
			}
			else {
				img = startImg;
			}
		}
		else {
			// TODO hellerer button
		}
		if(img != null) {
			g.drawImage(img, 0, 0, getWidth(), getHeight(), this);
		}
		
		super.paintComponent(g);
	}

}

 

[peemo_royal]

danke schonmal, ich probiers gleich mal...

Ich zeichne den String selber, weil ich den Text halt zentrieren möchte. Hab da keine andere möglichkeit gefunden...


Ok. Wenn ich die super.paintcomponent s() aufrufe dann passiert der bug, wenn ich die super.paintcoomponent() calle dann hab ich nochmal hässliche StandardButtons im Hintergrund. Die hab ich dann mit dem Rest wohl auf false gesetzt.

Scheint zu funktionieren... Vielen Dank!

Ich wusste ehrlich gesagt gar nicht dass es da seinen unterschied zw s und nicht s gibt....

Grüße Peter

 

[IMartin]

Zumindest unter meinem Windows wird der Buttontext automatisch zentriert. Die Ausrichtung kann man aber auch einstellen:

setHorizontalAlignment(SwingConstants.CENTER);

 

[peemo_royal]

funktioniert alles wunderbar. Vielen Vielen Dank!

 

[IMartin]

Schön zu hören, trotzdem noch eine Anregung: Man könnte Bild und Text auch überlagern, ohne

paintComponent(Graphics)

zu überschreiben:

		setHorizontalAlignment(SwingConstants.CENTER);
		setHorizontalTextPosition(SwingConstants.CENTER);

Da können aber unter Umständen hässliche, 1px breite Ränder zwischen Border und Bild entstehen. Also vielleicht Border weg und mit auf das png zeichnen, falls überhaupt eine Border gewüscht ist. Dann sieht die Button-Klasse nur noch irgendwie so aus und eine Factory-Methode statt der Klasse würde reichen:

public class MyButton extends JButton {

	public MyButton(String text) {
		super(text);
		
		setIcon(new ImageIcon(MyButton.class.getResource("StartButton.png")));
		setPressedIcon(new ImageIcon(MyButton.class.getResource("PressedButton.png")));
		setRolloverIcon(new ImageIcon(MyButton.class.getResource("RolloverButton.png")));
		
		setBorder(BorderFactory.createEmptyBorder());
		setContentAreaFilled(false);
		setFocusPainted(false);
		setForeground(new Color(249, 243, 222));
		Font font = getFont();
		setFont(new Font(font.getFamily(), Font.BOLD, 18));
		setHorizontalAlignment(SwingConstants.CENTER);
		setHorizontalTextPosition(SwingConstants.CENTER);
	}

}

 

[peemo_royal]

ah das hört sich iwie eleganter an. vielen danke für die mühe werd mal rumprobieren.
Ränder hab ich eh ausgeschalten

 

[peemo_royal]

Schön zu hören, trotzdem noch eine Anregung: Man könnte Bild und Text auch überlagern, ohne

paintComponent(Graphics)

zu überschreiben:

		setHorizontalAlignment(SwingConstants.CENTER);
		setHorizontalTextPosition(SwingConstants.CENTER);

Da können aber unter Umständen hässliche, 1px breite Ränder zwischen Border und Bild entstehen. Also vielleicht Border weg und mit auf das png zeichnen, falls überhaupt eine Border gewüscht ist. Dann sieht die Button-Klasse nur noch irgendwie so aus und eine Factory-Methode statt der Klasse würde reichen:

public class MyButton extends JButton {

	public MyButton(String text) {
		super(text);
		
		setIcon(new ImageIcon(MyButton.class.getResource("StartButton.png")));
		setPressedIcon(new ImageIcon(MyButton.class.getResource("PressedButton.png")));
		setRolloverIcon(new ImageIcon(MyButton.class.getResource("RolloverButton.png")));
		
		setBorder(BorderFactory.createEmptyBorder());
		setContentAreaFilled(false);
		setFocusPainted(false);
		setForeground(new Color(249, 243, 222));
		Font font = getFont();
		setFont(new Font(font.getFamily(), Font.BOLD, 18));
		setHorizontalAlignment(SwingConstants.CENTER);
		setHorizontalTextPosition(SwingConstants.CENTER);
	}

}

hab das mal getestet, leider wird bei mir kein Text angezeigt...Ausserdem geht der abgerundete look den die Buttons haben wenn sie größer sind dabei verloren.
Danke aber nochmal!

 

[IMartin]

Abgerundeter Look:
Ist eine Layout Sache. Die preferred size des Buttons ist vermutlich kleiner als das Bild.

Graphics.drawImage(Image, int, int, int, int, ImageObserver)

skaliert das Bild. Ein Bild, das über

AbstractButton.setIcon(Icon)

gesetzt wurde, wird gegebenenfalls abgeschnitten.

Fehlender Text:
Könnte am verwendeten Look and Feel liegen. Funktioniert bei mir mit Metal oder auch Nimbus.

Grundsätzlich, wenn das L&F nicht das übliche sein soll, würde ich mir aus den frei verfügbaren L&Fs eines aussuchen, das

• meinen Wünschen möglichst nahe kommt und
• möglichst einfach konfigurierbar ist, so dass ich das, was nicht meinen Wünschen entspricht, einfach ändern kann. Ich denke da auch an ein anderes Thema mit ScrollBars. Nimbus kann man Painter für die Buttons/ScrollBars geben, in anderen L&Fs funktioniert das zum Teil über Bilder.

 

[peemo_royal]

ja darauf bin ich auch schon gekommen mittlerweile

Das mit dem LookAndFeel ist interessant, damit hab ich mich noch gar nicht auseinandergesetzt, ich bin ja noch nicht so lang am Java programmieren. Aber da werd ich mal schaun was sich machen lässt.
Mit dem Buttons bin ich eigentlich mit der paintComponent fürs erste zufrieden, aber ich werd mich mal an die ScrollBars wagen. Danke dir!