Personaliza un JComboBox estilo Metro de Windows

Si bien se pueden encontrar en google estilos java (Look and Feel) listos para cambiar la apariencia de nuestras aplicaciones, hacer uso de ellos tiene sus pros y sus contras, un pro, nos ahorran tiempo al diseñar nuestra GUI pero a su vez un contra, nos volvemos esclavos de esos estilos porque no podemos cambiarlos y debemos conformarnos con lo que podamos encontrar, otras veces hay que pagar licencias y algunos son muy bonitos pero consumen muchos recursos.

Una alternativa es personalizar nuestros propios componentes, lleva más tiempo si, pero con un poco de paciencia podemos crear nuestra propia paleta de swing que podremos reutilizar en los proyectos que queramos, y eso es lo que haremos en este tutorial, personalizaremos un JComboBox dándole un aspecto más minimalista que esta de moda 🙂 el estilo Metro de Windows 8

En la imagen de abajo, veras que dividimos el jcombo en tres partes, que son las que modificaremos:

Los items, les daremos un mayor tamaño
El valor seleccionado, se cambiara el color a un rojo intenso
El botón y la flecha, cambiaremos la apariencia 3d por uno minimalista, ademas, podemos cambiar la flecha por el icono que queramos, veremos eso mas adelante

Proyecto: Personalizar un JComboBox

IDE: Netbeans 7.x

Nivel: Avanzado

Tiempo: 20 minutos

Proyecto Swing ComboBox

1. Crea un nuevo proyecto, FILE -> NEW PROJECT -> JAVA -> JAVA CLASS LIBRARY, dale el nombre de «CustomComboBox» y crea la siguiente estructura:

Tenemos dos clases:

CustomUI.java
SComboBox.java

creamos también un paquete «res» que es donde colocaremos las imágenes que vallamos a utilizar

2. Para modificar un swing java podemos hacer uso de sus propiedades pero esto nos limita mucho, si queremos cambiar toda la apariencia, debemos hacer uso de la clase BasicComboBoxUI, de esta forma podremos acceder y sobreescribir los métodos de los diferentes componentes que forman un combobox para darle el estilo que queramos.

Abre la clase CustomUI que creamos en el paso 1 y pega el siguiente código:

01 package org.bolivia.combo;
02 import java.awt.Color;
03 import java.awt.Component;
04 import java.awt.Graphics;
05 import java.awt.Rectangle;
06 import javax.swing.BorderFactory;
07 import javax.swing.DefaultListCellRenderer;
08 import javax.swing.ImageIcon;
09 import javax.swing.JButton;
10 import javax.swing.JComponent;
11 import javax.swing.JList;
12 import javax.swing.ListCellRenderer;
13 import javax.swing.plaf.ComboBoxUI;
14 import javax.swing.plaf.basic.BasicArrowButton;
15 import javax.swing.plaf.basic.BasicComboBoxUI;
16 /**
17  * @web https://www.jc-mouse.net/
18  * @author Mouse
19  */
20 public class CustomUI extends BasicComboBoxUI{
21     
22     private ImageIcon espacio =  new ImageIcon(getClass().getResource("/org/bolivia/res/espacio.png"));
23     private Color red = new Color(153,3,3);
24     
25     public static ComboBoxUI createUI(JComponent c) {
26         return new CustomUI();
27     }
28 
29     @Override 
30     protected JButton createArrowButton() {        
31         BasicArrowButton basicArrowButton = new BasicArrowButton(BasicArrowButton.SOUTH, //Direccion de la flecha
32                 Color.WHITE, //Color de fondo
33                 new Color(130,7,7),//sombra
34                 new Color(130,7,7),//darkShadow
35                 Color.WHITE //highlight
36                 );         
37         //se quita el efecto 3d del boton, sombra y darkShadow no se aplican 
38         basicArrowButton.setBorder(BorderFactory.createLineBorder(red,2));
39         basicArrowButton.setContentAreaFilled(false);        
40         return basicArrowButton;
41     }        
42 
43     //Se puede usar un JButton para usar un icono personalizado en lugar del arrow
44     /* 
45  @Override 
46  protected JButton createArrowButton() { 
47  JButton button = new JButton(); 
48  //se quita el efecto 3d del boton, sombra y darkShadow no se aplican 
49  button.setText("");
50  button.setBorder(BorderFactory.createLineBorder(red,2));
51  button.setContentAreaFilled(false);
52  button.setIcon( new ImageIcon(getClass().getResource("/org/bolivia/res/estrella.png")) );
53  return button;
54  } 
55  */
56     
57     @Override
58     public void paintCurrentValueBackground(Graphics g,
59                                Rectangle bounds,
60                                boolean hasFocus)
61     {
62         g.setColor( red );            
63         g.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
64     }
65       
66     //Pinta los items
67     @Override
68     protected ListCellRenderer createRenderer()
69     {
70         return new DefaultListCellRenderer() {      
71             
72         @Override
73         public Component getListCellRendererComponent(JList list,Object value,int index,
74           boolean isSelected,boolean cellHasFocus) {
75       
76         super.getListCellRendererComponent(list,value,index,isSelected,cellHasFocus);
77         list.setSelectionBackground(red);
78         if (isSelected)
79         {
80             setBackground( red );
81             setForeground(Color.WHITE);
82         }
83         else
84         {
85             setBackground( Color.WHITE );            
86             setForeground( new Color(70,70,70));
87         }
88         if (index!=-1) {          
89           setIcon( espacio );          
90         }
91         return this;
92       }
93     };
94     }
95 }

Explicación:

20 Nuestra clase se extiende de BasicComboBoxUI

22 Aquí hacemos referencia a una imagen PNG, esta imagen es transparente (importante) y tiene las dimensiones 12×50 pixeles, utiliza cualquier edito de imágenes para crearla y colócala en el paquete «res»

23 El color principal de todo el componente, en este caso un rojo intenso

29,41 El contenedor del Arrow (flecha) es un BasicArrowButton que se extiende de un JButton y por tanto tiene las mismas propiedades que este, pero claro modificado para mostrar una flecha, lo que hacemos aquí es crear nuestro propio button con los colores que queremos ademas para seguir con el estilo minimalista, eliminamos el estilo 3d del jbutton

44,54 Como dijimos arriba, el encargado de pintar la flecha es un jbutton modificado, pero si lo que queremos es usar un icono propio, podemos hacer uso de un JButton en lugar de un BasicArrowButton . De esta forma podemos lograr un efecto como este:

58,64 pintamos de rojo la sección donde va el item seleccionado

67,94 Finalmente modificaremos la apariencia (tamaño, color) de la lista de items del combobox

3. Para terminar, abre la clase SComboBox.java y pega el siguiente código

01 package org.bolivia.combo;
02 import java.awt.Color;
03 import java.awt.Dimension;
04 import javax.swing.BorderFactory;
05 import javax.swing.JComboBox;
06 /**
07  * @web https://www.jc-mouse.net/
08  * @author Mouse
09  */
10 public class SComboBox extends JComboBox{
11  
12     /** Constructor */
13     public SComboBox()
14     {
15         Dimension dimension = new Dimension(200,32);
16         setPreferredSize(dimension);
17         setSize(dimension);      
18         setForeground(Color.WHITE);        
19         setBorder(BorderFactory.createLineBorder(new Color(71, 71, 71), 2));
20         setUI(CustomUI.createUI(this));                
21         setVisible(true);
22     }
23 
24 }

Lo que hacemos aquí es extender esta clase de un JComboBox, modificamos algunas propiedades y asignamos la clase CustomUI

4. Finalmente clic derecho sobre el proyecto, CLEAN AND BUILD para crear el JAR

Nuestro componente no tiene propiedades nuevas, solamente le cambiamos la apariencia

Una vez que instalemos esta nuevo swing, podremos usarla ya sea gráficamente arrastrando esta al diseñador de netbeans o ya sea por código de la siguiente manera:

SComboBox combo = new SComboBox();
combo.setModel( new DefaultComboBoxModel(
                new String[] { "Enero", "Febrero", "Marzo", "Diciembre" })
              );
add(combo);

Descargas

Proyecto en Netbeans 7.x AQUI

enjoy!!!

Personaliza un JComboBox estilo Metro de Windows

Tags

Últimas entradas

FOCA: Herramienta para recolección y análisis de Metadatos

Paginación en SQL Server 2008 y Laravel

¿Como paginar con Laravel 11?

¿Cómo hacer el video ABRAZO gratis?

Crea y usa Traits en Laravel

Artículos similares

JavaScript: Script y Web para generar banderas ondeando

Subir imagen a un servidor web con REST/JSON

Duplicación de objetos con la Interface Cloneable

Formulario de autenticación circular

Introduccion a la programacion shell

Tink biblioteca criptográfica de Google

JC Mouse | Bolivia