ago, 02 2006 - 5:04 pm
Si ya estás cansado de los típicos botones cuadrados, es hora de cambiar un poco y crear interfaces gráficas más bonitas.
En el ejemplo que mostraré a continuación vamos a crear un botón redondo, pero con unas cuantas modificaciones se pueden crear botones ovaládos (casi lo mismo), rectángulos redondeados, estrellas, entre otros.
Vamos a crear el botón paso a paso…
Lo primero es importar las clases a utilizar:
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import javax.swing.*;
Para crear ésta clase, vamos a reutilizar la clase JButton para mantener
toda la funcionalidad de un botón, excepto aquello que interesa en este caso particular. Esto nos dá una serie de ventajas, como lo es el sobreescribir los métodos de Jbutton, que de una u otra forma modifiquen las propiedades visuales del botón:
public class BotonRedondo extends JButton
Y creamos dos objetos de la clase Color, que guardarán los valores corespondientes al color del botón, y el color que toma cuando está presionado:
private Color colorFondo,colorPresionado;
El constructor de la clase recibe tres argumentos: el primero de ellos es el rótulo del botón, es decir, el texto que tiene el botón; los argumentos dos y tres reciben objetos Color corespondientes al color del botón, y el color que toma cuando está presionado.
Lo primero que hacemos es invocar al método super(), para pasar al constructor de la superclase (public Jbutton(String label)) el rótulo del botón. Después asignamos los colores respectivos, y en seguida se invoca al método setContentAreaFilled(), que es el encargado de pintar la zona correspondiente al foco del botón, para que en este caso no pinte el fondo del botón.
public BotonRedondo(String rotulo,Color fon,Color pre)
{
super(rotulo);
colorFondo=fon;
colorPresionado=pre;
setContentAreaFilled(false);
}
La primera parte interesante del ejemplo es el método sobrescrito paintComponent(). Este es el método que pinta el botón en el color correspondiente al estado en que se encuentre, y también coloca el rótulo que se haya indicado en el centro del botón. Esto se hace con dos simples if, utilizando el método getModel().isArmed(), para saber si el boton está, o no, presionado.
En él se utiliza el método fillOval() de la clase Graphics para pintar un círculo relleno, y acto seguido se hace una llamada al mismo método de la superclase para que pinte el rótulo del botón sobre el círculo:
protected void paintComponent( Graphics g )
{
if(getModel().isArmed())
{
g.setColor(colorPresionado);
}
else
{
g.setColor(colorFondo);
}
g.fillOval(0,0,getSize().width-1,getSize().height-1);
super.paintComponent(g);
}
También se sobrescribe el método paintBorder() para pintar un borde alrededor del botón, llamando al método drawOval() de la clase Graphics:
protected void paintBorder( Graphics g )
{
g.setColor(getForeground());
g.drawOval(0,0,getSize().width-1,getSize().height-1 );
}
El siguiente código interesante es el encargado de responder solamente cuando el usuario pulsa el botón del ratón con el cursor posicionado dentro del círculo, y no hacer nada cuando se hace fuera. Por defecto, un objeto de tipo JButton responde a las pulsaciones de ratón en un área rectangular alrededor del ratón. No obstante, el objeto JButton no tiene idea de la forma real del botón, así que asume que es rectangular. Para indicar al objeto JButton la forma real del botón, es necesario sobreescribir el método contains(). A este método se le pasa una coordenada y responde true si la coordenada está dentro del botón y false en caso contrario.
El método, en este caso concreto del botón redondo, utiliza un objeto Shape (Ellipse2D) para determinar si la coordenada se encuentra dentro o fuera del círculo.
Shape figura;
public boolean contains(int x,int y)
{
if(figura==null!figura.getBounds().equals(getBounds()))
{
figura = new Ellipse2D.Float(0,0,getWidth(),getHeight());
}
return (figura.contains(x,y));
}
El resultado es algo así:
Las pruebas respectivas a ésta clase las he hecho en el JDK1.4, pero según algo que leí (no recuerdo donde), en el JDK 1.2.2 hay un pequeño bug en la implementación del objeto JButton,
concretamente en el tratamiento de los eventos de arraste del ratón. En un funcionamietno correcto, si se pulsa dentro del círculo y se arrastra el cursor fuera del perímetro del círculo (manteniendo pulsado el botón) se debería producir un cambio en la apariencia del botón. Al devolver el cursor al círculo, el botón debería recuperar su apariencia inicial, la misma que antes de iniciar el arrastre. Desafortunadamente, el código que implementa esta funcionalidad no llama al método contains(); en su lugar, utiliza los límites del botón (el área más pequeña que contiene al botón). Si utilizas el JDK 1.2.2 puedes observar que si arrastras el cursor lentamente fuera del círculo, pero sin salirse del área rectangular del botón, éste no altera su apariencia. La única solución a este pequeño defecto consiste en implementar toda la funcionalidad uno mismo, pero eso se sale del verdadero objetivo de este artículo.
24 Comentarios | deja el tuyo
