Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Crear componente Switch de Android para Java Swing

Crear componente Switch de Android para Java Swing

Autor jc mouse miércoles, febrero 8, 2017

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.

switch android

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» 🙂

proyecto 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.

mockup java

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

arco rectangulo

arco ancho

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.

Switch Java Swing

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Archivos binarios en Java (Lectura/Escritura)

Archivos binarios en Java (Lectura/Escritura)

Según Santa Wikipedia: «Un archivo binario es un archivo informático que contiene información de cualquier tipo codifica...

Personalizar JTable: Problema resuelto

Personalizar JTable: Problema resuelto

En este post se da respuesta a una pregunta realizada por facebook. El problema dice así: Se quiere personalizar un JTab...

Tutoriales para creación de videojuegos gratis en descarga directa

Tutoriales para creación de videojuegos gratis en descarga directa

La comunidad 3D Buzz  era una de los lugares donde la gente curiosa de aprender a realizar videojuegos buscaba recursos...

Juego: Acierta los colores (Código Fuente)

Juego: Acierta los colores (Código Fuente)

Acierta los colores o Adivina los colores es un sencillo juego que consiste en que dado 6 colores «rojo», «verde», «salm...

«Hola Mundo» con Android Studio y Kotlin

«Hola Mundo» con Android Studio y Kotlin

Kotlin es un lenguaje de programación relativamente nuevo que ha ido ganando terreno en el desarrollo de aplicaciones pa...

Convertir voz a texto con Android

Convertir voz a texto con Android

En este post realizaremos una aplicación que pueda capturar nuestra voz y convertir en texto Pasar voz a texto con Andro...

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp