En este post crearemos un componente que solo hay en android y que no esta disponible en la paleta de controles de Netbeans, este componente es el Switch (interruptor) el cual tiene dos estados ON (encendido) y OFF (apagado), una opción para emular este componente en java seria usando Checkbox o Radio Button y un par de iconos, una desventaja de usar imágenes es que si cambiamos el color, diseño o tamaño de nuestra interfaz, casi siempre tendremos que rehacer los iconos para ajustarse a los cambios, esto no pasa si usamos un swing diseñado para ajustarse a los cambios de la GUI.
Podemos encontrar muchos diseños en la internet, cada uno con su propio nivel de dificultad en el diseño e implementación, nos inclinaremos por la opción 3, el de color verde. El IDE que usaremos sera Netbeans.
Tiempo: 20 minutos
Nivel: Intermedio
Paso 1: El Proyecto
Partiremos de un proyecto con una clase como se ve en la imagen de abajo, el nombre de la clase y nuestro componente es «Switch.java» 🙂
Paso 2: JComponent
Nuestra clase se heredara de JComponent que vendría a ser como el papa de todos los swing que conocemos, implementamos también un MouseListener para que el swing pueda interactuar con el mouse del usuario.
import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import javax.swing.JComponent; /** * @see https://www.jc-mouse.net/ * @author mouse */ public class Switch extends JComponent implements MouseListener{ /** * Constructor de clase */ public Switch(){ super(); } @Override public void mouseClicked(MouseEvent e) { /*...*/ } @Override public void mousePressed(MouseEvent e) { /*...*/ } @Override public void mouseReleased(MouseEvent e) { /*...*/ } @Override public void mouseEntered(MouseEvent e) { /*...*/ } @Override public void mouseExited(MouseEvent e) { /*...*/ } }//Switch:end
Paso 3: El Diseño
Nuestro componente tendrá un tamaño inicial de 60×40, cuando se cambie el tamaño el swtich se redimensionara, cuando se presione sobre el interruptor cambiar el estado de ON/OFF y viceversa.
existirá un margen de 5 px entre el borde del swing y el interruptor, y un margen de 2px entre los botones y el interruptor.
El arco que forma el interruptor sera de la altura total del componente
y el diámetro de los botones circulares igual al tamaño del swing menos un margen * 2 – un espacio de 4px
Paso 4: El Codigo
El código completo de este componente con sus respectivos comentarios es el siguiente:
import java.awt.Color; import java.awt.Cursor; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.geom.Rectangle2D; import java.awt.geom.RoundRectangle2D; import javax.swing.JComponent; /** * @see https://www.jc-mouse.net/ * @author mouse */ public class Switch extends JComponent implements MouseListener{ /** * Captura el estado del interruptor */ private boolean OnOff = true; /** * Margen entre el borde del componente y el interruptor */ private final int MARGIN = 5; /** * Margen entre el boton circular y el interrutor */ private final int BORDER = 4; /** * Colo de fondo del interruptor NO del componente */ private Color backgroundColor; /** * Color del boton circular del interruptor */ private Color buttonColor; /** * Color del interrupor cuando esta desabilitado */ private final Color DISABLED_COMPONENT_COLOR = new Color(131,131,131); /** * Constructor de clase */ public Switch(){ super(); Switch.this.setSize(new Dimension(60, 40)); Switch.this.setPreferredSize(new Dimension(60, 40)); Switch.this.setMinimumSize(new Dimension(60, 40)); Switch.this.setVisible(true); Switch.this.setCursor(new Cursor(Cursor.HAND_CURSOR)); Switch.this.addMouseListener(Switch.this); //colores iniciales Switch.this.setBackgroundColor(new Color(75,216,101)); Switch.this.setButtonColor(new Color(255,255,255)); } @Override public void paintComponent(Graphics g){ super.paintComponent(g); Graphics2D g2 = (Graphics2D) g; g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); if (isOpaque()) {//Pinta el fondo del componente g2.setColor(getBackground()); g2.fill(new Rectangle2D.Double(0, 0, getWidth(), getHeight())); } if(isEnabled()){//componente habilitado g2.setColor(( (OnOff) ? getBackgroundColor():new Color(216,217,219) ) ); g2.fill(new RoundRectangle2D.Double((float) MARGIN, (float) MARGIN, (float) getWidth() - MARGIN * 2, (float) getHeight() - MARGIN * 2, getHeight() - MARGIN * 2, getHeight() - MARGIN * 2)); }else{//componente desabilitado g2.setColor(DISABLED_COMPONENT_COLOR ); g2.draw(new RoundRectangle2D.Double((float) MARGIN, (float) MARGIN, (float) getWidth() - MARGIN * 2, (float) getHeight() - MARGIN * 2, getHeight() - MARGIN * 2, getHeight() - MARGIN * 2)); } g2.setColor((isEnabled()) ? getButtonColor() : DISABLED_COMPONENT_COLOR); //boton circular if (OnOff) {//ON a la izquierda g2.fillOval(MARGIN + BORDER / 2, MARGIN + BORDER / 2, getHeight() - MARGIN * 2 - BORDER, getHeight() - MARGIN * 2 - BORDER); } else {//OFF a la derecha g2.fillOval(getWidth() - getHeight() + MARGIN + BORDER / 2, MARGIN + BORDER / 2, getHeight() - MARGIN * 2 - BORDER, getHeight() - MARGIN * 2 - BORDER); } } /** * retorna el estado del interruptor * * @return boolean True: ON False: OFF */ public boolean isOnOff() { return OnOff; } public void setOnOff(boolean OnOff) { this.OnOff = OnOff; } public Color getBackgroundColor() { return backgroundColor; } public void setBackgroundColor(Color backgroundColor) { this.backgroundColor = backgroundColor; } public Color getButtonColor() { return buttonColor; } public void setButtonColor(Color buttonColor) { this.buttonColor = buttonColor; } @Override public void mouseClicked(MouseEvent e) { if (isEnabled()) { OnOff = !OnOff; repaint(); } } @Override public void mousePressed(MouseEvent e) { /*...*/ } @Override public void mouseReleased(MouseEvent e) { /*...*/ } @Override public void mouseEntered(MouseEvent e) { /*...*/ } @Override public void mouseExited(MouseEvent e) { /*...*/ } }//Switch:end
Para poder usarlo en nuestra aplicación, podemos llamarlo como a cualquier otra clase mediante código o si queremos usarlo en modo diseño, primero debemos compilar el proyecto.
enjoy!!!
«MyBatis es una herramienta de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados co[...]
Si bien se pueden encontrar en google estilos java (Look and Feel) listos para cambiar la apariencia de nuestras aplicac[...]
Problema: Desarrollar un juego en consola con Kotlin que genere un numero aleatorio entre un rango preestablecido y perm[...]
Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta especificación, permite tene[...]
En esta oportunidad, se deja a disposición de la comunidad de programadores de Bolivia y también porque no, del que quie[...]
Cuando programamos visualmente desde Netbeans, el IDE nos ayuda mucho al generar rapidamente código predefinido, sin emb[...]
