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!!!
En este post, crearemos una tabla swing que implemente un control jcombobox en una columna de una tabla, llenaremos con[...]
«Mouse Responde…» simula ser un alma en pena que responde cualquier pregunta que le hagan, al estilo del juego de[...]
En este tutorial crearemos una sencilla aplicación para android que nos permitirá subir una imagen a un servidor web. La[...]
Cuando Android estaba en sus inicios, varios IDEs (Entorno de Desarrollo Integrado) se disputaban el dominio por su de[...]
Para conectar Visual Basic .NET con una base de datos de MS Access se utiliza la libreria «System.Data.OleDb» en el sigu[...]
Harvard WorldMap es una plataforma de mapeo de código abierto en línea, desarrollado por el Centro de Análisis Geográfic[...]
