Estilizar Lista en Java (JList)

Publicado: 11 noviembre, 2011 en JAVA
Etiquetas:, , , ,

Esta vez les traigo un ejemplo de como estilizar una Lista.

Aquí veremos como agregarle un Icono personalizado a cada elemento así como un Texto descriptivo o ToolTipText.

Cada elemento de la Lista extiende de JLabel, por lo que podemos utilizar las propiedades de este a como creamos conveniente,  para lo que crearemos una clase llamada RenderLista.java la cual extendera de JLabel e implementara el ListCellRenderer.

Para el Ejemplo necesitaremos 3 Iconos:

  1. femenino.png
  2. masculino.png
  3. error.png

Todos ellos dentro de un paquete llamado “iconos”

package clases;

import java.awt.Color;
import java.awt.Component;
import java.awt.Font;
import java.util.HashMap;

import javax.swing.*;
/**
 *
 * @author cgarcia
 */
public class RenderLista extends JLabel implements ListCellRenderer {

    /*Esta coleccion nos servira para recibir los Iconos identificados
     *con el texto mostrado en la lista */
    HashMap<String, Icon> elementos;
    /*Esta coleccion nos servira para recibir los ToolTip identificados
     *con el texto mostrado en la lista */
    HashMap<String, String> toolTip;

    /*si el elemento de la lista no fue agregado a la coleccion de los iconos
     * se le colocara un icono por defecto */
    ImageIcon icononulo = new ImageIcon(this.getClass().getResource("/iconos/error.png"));

    /*Constructor recibiendo las listas*/
    public RenderLista(HashMap<String, Icon> pelementos, HashMap<String, String> tool){
        this.elementos = pelementos;
        toolTip = tool;
    }
    /*Contructor sin Datos*/
    public RenderLista() {
        elementos = new HashMap<String, Icon>();
    }

    @Override
    @SuppressWarnings("element-type-mismatch")
    public Component getListCellRendererComponent(JList list, Object value,
                        int index, boolean isSelected, boolean cellHasFocus) {
        /*Primero verificamos si el Texto del Elemento se encuentra
         *dentro de nuestra coleccion*/
        if (elementos.get(value) != null) {
            //si es asi asignamos el Icono correspondiente
            setIcon(elementos.get(value));
            //y tambien asignamos el texto
            setText(value.toString());
            /*Ahora comenzamos con el estilo, la idea es que sea diferente
             * cuando este seleccionado*/
            if (isSelected) {
                 setFont(new Font("Verdana", Font.BOLD, 16));
                 setForeground(Color.white);
                 setBackground(Color.BLUE);
                 setOpaque(true);
            } else {
                setFont(null);
                setForeground(Color.black);
                setOpaque(false);
            }
        } else {
            setIcon(icononulo);
            setText(value.toString());
            if (isSelected) {
                setFont(new Font("Verdana", Font.BOLD, 14));
                setForeground(new java.awt.Color(24,165,211));
            } else {
                setFont(null);
                setForeground(Color.black);
            }
        }

        if (toolTip!=null) {
             if (toolTip.get(value) != null) {
                 setToolTipText(toolTip.get(value));
             }
        }
        return this;
    }
}

Una vez creada esta Clase crearemos un JFrame donde agregaremos una Lista y a esta Lista le aplicaremos el estilo que acabamos de crear.

package clases;
import java.util.HashMap;
import javax.swing.Icon;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JList;

public class Principal extends JFrame {
  private HashMap<String, Icon> elementos = new HashMap<String, Icon>();
  private HashMap<String, String> tooltip = new HashMap<String, String>();

  //Texto de la Lista
  Object datos  []={"Maria","Pedro","Pablo","Juana"};
  //Texto que aparecera al posicionar el puntero sobre el componente de la lista
  String toolTipSexo[]={"Femenino","Masculino","Masculino","Femenino"};

//Constructor
    public Principal() {
        this.setTitle("Personalizando Lista");

        //Creamos la Lista
        JList lista;
        lista = new JList();
        //Seteamos los datos a la Lista
        lista.setListData(datos);

        //Seteamos los datos a las Colecciones
        for(int i=0; i<datos.length; i++)
        {
            /*Colocaremos Icono al elemento de la lista dependiendo del
             * ToolTipText, que en este caso se refiere al Sexo*/
            if(toolTipSexo[i].equals("Femenino"))
            {
                elementos.put(datos[i].toString(), new ImageIcon(this.getClass()
                        .getResource("/iconos/femenino.png")));
            }else
            {
                elementos.put(datos[i].toString(), new ImageIcon(this.getClass()
                        .getResource("/iconos/masculino.png")));
            }
            tooltip.put(datos[i].toString(), toolTipSexo[i]);
        }

        /*Instanciamos la Clase RenderLista
         * Pasandole la coleccion de iconos y de textos */
        RenderLista render = new RenderLista(elementos, tooltip);
        //Aplicamos los Estilos
        lista.setCellRenderer(render);
       //Agregamos la lista al contenedor
        this.add(lista);
    }

    public static void main(String... args) {
        new Principal().setVisible(true);
    }
}
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s