Download File

Paso 1
Algunas modificaciones pueden ser hechas valiéndose de algunos Look&Feel
(Substance x Ej.) pero no se puede modificar tan a fondo como haremos aquí y para
incluir un L&F en nuestro proyecto podemos en ocasiones complicar la portabilidad de
nuestra aplicación.
Paso 2
Lo primero que debemos hacer es crear una clase que extienda de JButton, y
sobreescribir alguno de sus métodos, en nuestro caso la forma, los colores (al
presionarse y al estar inactivo), el borde y la respuesta al cursor.
Se pueden hacer con varias formas pero en esta ocasión trabajaremos con 2 formas,
elipse y rectangulo de bordes redondeados.
Bien, comenzamos creando nuestra clase, la que dijimos que heredará de JButton para
poder implementar todos sus métodos al momento de ser instanciada y para que,
además se comporte como tal.
import javax.swing.JButton;
public class botonPersonalizado extends JButton{
}
Paso 3
Vamos a crear un par de variables, una booleana para decidir cual de las dos formas
tomará al momento de instanciarse(depende de los parametros que se le pasen), y dos
variables de tipo "Color" para los colores, inactivo y presionado:
import javax.swing.JButton;
public class botonPersonalizado extends JButton{
private boolean round;
private Color colorFondo, colorPresionado;
}
paso 4
Ahora crearemos dos constructores, uno para la forma de elipse y otra para si queremos
un rectángulo de bordes redondeados(al que le agregamos dos párametros que le darán
valor a la curvatura de los bordes), ambos constructores compartirán el primer
párametro que es un String que será el Texto que mostrará el botón, un color para
cuando está inactivo y otro para cuando es presionado:
import java.awt.Color;
import javax.swing.JButton;
public class botonPersonalizado extends JButton{
private boolean round;
private Color colorFondo, colorPresionado;
//Constructor forma de elipse
public BotonRedondo(String rotulo, Color fon, Color pre) {
super(rotulo);
round = true;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
} private int f, f1;
//Constructor forma rectangulo bordes curvos
public BotonRedondo(String rotulo, Color fon, Color pre, int i, int i1) {
super(rotulo);
f=i;
f1=i1;
round = false;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
}
paso 5
Ahora sobreescribiremos el metodo paintComponent( ) el cual pertenece a la clase
JButton y lleva como párametro una variable de tipo Graphics, al sobreescribir este
método, cambiaremos la forma en la que el componente es dibujado, para esto nos
apoyaremos en los métodos de Graphics
fillOval(int,int,int,int), los primeros dos párametros son la posición espacial, los otros el
ancho y el alto.
fillRoundRect(int,int,int,int,int,int), posición espacial, alto, ancho y curvatura de los
bordes, en ambos casos, el ancho y el alto estarán dados x las medidas que tenga
nuestro componente x ese motivo se los pasamos como:
getSize().width - 1
y
getSize().height - 1
(El -1 es para dejar un espacio de un pixel al borde que pintaremos luego).
Con el condicional que usa el método getModel().isArmed(), logramos saber si el botón
es presionado.
import java.awt.Color;
import javax.swing.JButton;
import java.awt.Graphics;
public class botonPersonalizado extends JButton{
private boolean round;
private Color colorFondo, colorPresionado;
//Constructor forma de elipse
public BotonRedondo(String rotulo, Color fon, Color pre) {
super(rotulo);
round = true;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
} private int f, f1;
//Constructor forma rectangulo bordes curvos
public BotonRedondo(String rotulo, Color fon, Color pre, int i, int i1) {
super(rotulo);
f=i;
f1=i1;
round = false;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
}
@ Override
protected void paintComponent(Graphics g) {
if (getModel().isArmed()) {
g.setColor(colorPresionado);
} else {
g.setColor(colorFondo);
}
if (round) {
g.fillOval(0, 0, getSize().width - 1, getSize().height - 1);
} else {
g.fillRoundRect(0, 0, getSize().width - 1, getSize().height - 1, f, f1);
}
super.paintComponent(g);
}
}
paso 6
Ahora podemos pasar a sobreescribir el método que pinta un borde alrededor de nuestro
componente, de manera similar a como le dimos la forma. solo que a diferencia del
método anterior en este usamos drawOval(int,int,int,int) y
drawRoundRect(int,int,int,int,int,int) para dibujar solo el contorno:
import java.awt.Color;
import javax.swing.JButton;
import java.awt.Graphics;
public class botonPersonalizado extends JButton{
private boolean round;
private Color colorFondo, colorPresionado;
//Constructor forma de elipse
public BotonRedondo(String rotulo, Color fon, Color pre) {
super(rotulo);
round = true;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
} private int f, f1;
//Constructor forma rectangulo bordes curvos
public BotonRedondo(String rotulo, Color fon, Color pre, int i, int i1) {
super(rotulo);
f=i;
f1=i1;
round = false;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
}
@ Override
protected void paintComponent(Graphics g) {
if (getModel().isArmed()) {
g.setColor(colorPresionado);
} else {
g.setColor(colorFondo);
}
if (round) {
g.fillOval(0, 0, getSize().width - 1, getSize().height - 1);
} else {
g.fillRoundRect(0, 0, getSize().width - 1, getSize().height - 1, f, f1);
}
super.paintComponent(g);
}
//Sobreescritura del borde
@ Override
protected void paintBorder(Graphics g) {
g.setColor(Color.black);
if (round) {
g.drawOval(0, 0, getSize().width - 1, getSize().height - 1);
} else {
g.drawRoundRect(0, 0, getSize().width - 1, getSize().height - 1, f, f1);
}
}
}
paso 7
Bien, estamos cerca de terminar, lo único que nos resta, es sobreescribir el método que
le indica al cursor del mouse si estamos x encima de las coordenadas de nuestro botón
o no, para que el botón sea presionado, o cambie el cursor o lo que sea, sólo si estamos
dentro de los límites del componente, para esto creamos antes que nada una variable de
tipo Shape y a partir de ésta sobreescribimos el método
contains(int,int) que retorna un boolean true si el mouse está sobre el componente y
false sino lo está:
import java.awt.Color;
import javax.swing.JButton;
import java.awt.Graphics;
public class botonPersonalizado extends JButton{
private boolean round;
private Color colorFondo, colorPresionado;
//Constructor forma de elipse
public BotonRedondo(String rotulo, Color fon, Color pre) {
super(rotulo);
round = true;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
} private int f, f1;
//Constructor forma rectangulo bordes curvos
public BotonRedondo(String rotulo, Color fon, Color pre, int i, int i1) {
super(rotulo);
f=i;
f1=i1;
round = false;
colorFondo = fon;
colorPresionado = pre;
setContentAreaFilled(false);
}
@ Override
protected void paintComponent(Graphics g) {
if (getModel().isArmed()) {
g.setColor(colorPresionado);
} else {
g.setColor(colorFondo);
}
if (round) {
g.fillOval(0, 0, getSize().width - 1, getSize().height - 1);
} else {
g.fillRoundRect(0, 0, getSize().width - 1, getSize().height - 1, f, f1);
}
super.paintComponent(g);
}
//Sobreescritura del borde
@ Override
protected void paintBorder(Graphics g) {
g.setColor(Color.black);
if (round) {
g.drawOval(0, 0, getSize().width - 1, getSize().height - 1);
} else {
g.drawRoundRect(0, 0, getSize().width - 1, getSize().height - 1, f, f1);
}
}
Shape figura;
@ Override
public boolean contains(int x, int y) {
if (round) {
figura = new Ellipse2D.Float(0, 0, getWidth(), getHeight());
}else{
figura = new RoundRectangle2D.Double(0, 0,getWidth(),getHeight(), f, f1);
}
return (figura.contains(x, y));
}
}
paso 8
La manera de agregarlos a nuestras aplicaciones es crear una instanciade nuestra clase
la cual se va a comportar como cualquier jButton.
Crearemos una clase con main, donde se cree un jFrame de prueba y agregaremos un
par de botones para ver su comportamiento y estética, primero creemos el jFrame y
agregaremos un botón con forma de elipse:
Pues creeemos nuestro Frame!
Como soy medio fan de crear métodos pues para la creación del jFramecon nuestros
botones haremos tres método de tipo void (sin retorno) uno que haga que el botón no
pinte su foco, que lo agregue al frame y que pinte su texto de blanco (los colores del los
botones y de su texto los pueden cambiar x los que quieran, así como la curvatura del
rectangular, esa es la idea, que lo hagan a su gusto!!!)
import java.awt.Color;
import javax.swing.JFrame;
public class Frame{
JFrame frame = new JFrame(); // Instancia de JFrame
private static void setBoton(BotonRedondo boton,int x, int y, int p ,int p1){
boton.setBounds(x, y, p, p1);
boton.setFocusPainted(false);
boton.setForeground(Color.white);
frame.getContentPane().add(boton);
}
private static void creaBotones( ){
//Instanciamos nuestra clase para 4 botones
BotonRedondo boton = new BotonRedondo("Redondo", Color.darkGray, Color.gray);
BotonRedondo boton1 = new BotonRedondo("Oval", Color.darkGray, Color.gray);
BotonRedondo boton1 = new BotonRedondo("Rect", Color.darkGray, Color.gray,30,30);
BotonRedondo boton1 = new BotonRedondo("Rect1", Color.darkGray,
Color.gray,100,30);
setBoton(boton,20,20,100,100);
setBoton(boton1,150,40,100,60);
setBoton(boton2,20,140,110,55);
setBoton(boton3,140,140,110,55);
}
private static void creaFrame( ){
creaBotones( );
frame.setBounds(0, 0, 300, 250);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(null);
frame.setVisible(true);
frame.setLocationRelativeTo(null);
}
public static void main(String [] args){
creaFrame( );
}
}