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 http://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 http://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

Crea un TextBox estilo Metro para java

Crea un TextBox estilo Metro para java

En este tutorial personalizaremos un JTextField java para darle la apariencia de un TextBox de Windows Metro. El TextBox...

JTable de colores [Problema Resuelto]

JTable de colores [Problema Resuelto]

Problema: Se extrae registros de una base de datos y se desea mostrar estos en un control JTable utilizando un DefaultTa...

Personalizar iconos de un JTree

Personalizar iconos de un JTree

JTree cuenta con métodos que nos permiten cambiar los iconos de cada nodo según su estado, sin embargo a veces esto no e...

Personaliza JTable “MetroUI”

Personaliza JTable “MetroUI”

Un JTable es un componente swing de java que nos permite presentar datos en forma tabular, si bien haciendo uso de IDe...

Hola Bolivia con LibGDX

Hola Bolivia con LibGDX

¿Que es LibGDX? LibGDX es un framework escrito en java y C/C++  para el desarrollo de videojuegos, es multiplataforma (W...

Ejecutar función de postgreSQL desde Java

Ejecutar función de postgreSQL desde Java

Este es una continuación de un tutorial pasado [Funciones en PostgreSQL y pgAdmin], así que si quieres entenderlo mucho...

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Slim es un micro framework para PHP que nos ayuda a escribir rápidamente aplicaciones Web y APIs sencillas pero poderosa...

Es recomendable tener actualizado la Maquina Virtual Java de nuestro equipo para poder disfrutar de las mejoras que trae...

JavaFX implementa el control webview que nos permite agregar contenido HTML cargado mediante la clase WebEngine. El comp...

En este ejemplo tenemos un array en JSON el cual representa una lista de alumnos y queremos llevar este a una lista en j...

Android Bolivia

Bandera en Alto