Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Personaliza un JComboBox estilo Metro de Windows

Personaliza un JComboBox estilo Metro de Windows

Autor jc mouse miércoles, octubre 15, 2014

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

metro bolivia

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:

proyecto metro

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:

combo start

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

metro combobox

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!!!

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

Empaquetado de texturas en LibGDX

Empaquetado de texturas en LibGDX

Continuando con los tutoriales sobre LibGDX (Librería para el desarrollo de videojuegos), en esta ocasión veremos como e...

Uso de BitmapFont en LibGDX

Uso de BitmapFont en LibGDX

En este tutorial conoceremos lo que es el uso de BitmapFont en LibGDX y algún uso que le podemos dar como crear un menú,...

Añade un PlaceHolder a un JTextField

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF...

Mapas interactivos – El proyecto – Parte 2

Mapas interactivos – El proyecto – Parte 2

Comenzando este tutorial, primero necesitamos definir la «estructura» de nuestro proyecto. Haremos uso del IDE de Dreamw...

Descargar video de TikTok sin marca de agua

Descargar video de TikTok sin marca de agua

TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...

Código de Control v7 en JavaScript

Código de Control v7 en JavaScript

En esta oportunidad, se deja a disposición de la comunidad de programadores de Bolivia y también porque no, del que quie...

2 comentarios en “Personaliza un JComboBox estilo Metro de Windows”

  1. K Alemán dice:

    hay forma de hacer esto con los botones? Hacerlos estilo metro?

    1. Mouse dice:

      si, debes quitarle todo estilo y asignar un color de metro, los botones son sencillos de hacer

Los comentarios estan cerrados

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