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

Tutorial Gráficos Vectoriales SVG – Parte I

Tutorial Gráficos Vectoriales SVG – Parte I

Estructura Interna de un archivo SVG. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD...

Crea tu JLabel con hipervinculo

Crea tu JLabel con hipervinculo

Si queremos añadir un enlace web a una aplicación en java, podemos hacer uso de botones o etiquetas, incluso se puede añ...

JavaFX y ApiRest – GET

JavaFX y ApiRest – GET

En este tutorial construiremos una aplicación en JavaFX para leer datos de un servicio web Herramientas IDE Netbeans 8.x...

Transacciones – Uso de Commit y Rollback

Transacciones – Uso de Commit y Rollback

Cuando desarrollamos aplicaciones en java con base de datos debemos tener cuidado en que se cumplan un conjunto de carac...

Crear ayuda HTML para programa con JavaFX Swing

Crear ayuda HTML para programa con JavaFX Swing

En este post veremos como crear una aplicación de ayuda al usuario similar al extinto javahelp. Pero en esta oportunidad...

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

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Se define como Transacción en base de datos a una “unidad lógica de trabajo” compuesta por un conjunto de op...

Si te gusta realizar tus propios memes o foto montajes pero tienes poca o nula experiencia en editores gráficos como Pho...

Los procedimientos almacenados no solo pueden retornar valores como números, cadenas, etc, sino también datos como los R...

XAMPP es un software para la gestión de base de datos, servidor web apache e interprete para lenguajes como php o perl....

Android Bolivia

MAUS