Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Componentes / Java / Java / Look and Feel / Modificar las pestañas de JTabbedPane

Modificar las pestañas de JTabbedPane

Por jc mouse lunes, enero 14, 2013

En este tutorial veremos lo fácil que es personalizar las pestañas de un JTabbedPane con unas cuantas lineas de código y un poco de imaginación. Para no ser repetitivo ni aburrido, recomiendo ver tutoriales anteriores sobre la creación y personalización de este tipo de librerías swing [Personalizar JTabbedPane con Netbeans].

Manos a la obra.

La clase BasicTabbedPaneUI contiene todos los métodos necesarios para personalizar todo el componente JTabbePane, es lectura obligatoria , si quieres entender este post, leer el API de BasicTabbedPaneUI.

Modificaremos los tabs de este swing sobre escribiendo los métodos de BasicTabbedPaneUI, el resultado sera sencillo pero nos permitirá entender el funcionamiento de esta clase.

shape tabs

Para modificar la forma de las pestañas, sobre escribiremos 2 métodos, paintTabBackground paintTabBorder.

* paintTabBackground

protected void paintTabBackground( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected ) 
{

}

Entre las variables que tiene este método  encontramos a «x» y «y» que representan las coordenadas de la esquina superior izquierda de cada pestaña. Tenemos a «w» y «h» que son el ancho y alto de cada pestaña respectivamente. isSelected es un boolean que nos indica si la pestaña con la que trabajamos esta seleccionada o no, TabIndex nos indica que  pestaña esta seleccionada.

dimensiones tabs

Conociendo estos parámetros y haciendo uso de un poco de geometría y un editor de imágenes  podremos diseñar la forma de un nuevo tab, por ejemplo:

polygon

Pero ahora debemos llevar esos puntos a código, para eso, colocamos los puntos X en un array y los puntos Y en otro, esta sucesión de puntos, utilizando java2d, serán pintados en un polígono la cual da forma a la pestaña.

xp = new int[]{ x, 
  x,
  x+4,
  x+w+5,
  x+w+5,
  x+w,
  x+w,
  x
            };
yp = new int[]{ y+h,
  y+4,
  y,
  y,
  y+5,
  y+10,
  y+h,
  y+h
            };

Polygon shape = new Polygon( xp, yp, xp.length );
g2D.fill( shape );

* paintTabBorder

protected void paintTabBorder( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected) 
{

}

Lo mismo para pintar los bordes, debemos sobre escribir el método paintTabBorder y haciendo uso de la misma figura  poligonal pintamos los bordes con java2d. Si declaramos el método pero lo dejamos vació, las pestañas no tendrán bordes.

Un JTabbedPane tiene 4 formas de presentar a las pestañas, LEFTRIGHTBOTTOMTOP, siendo esta última la DEFAULT (por defecto) dependiendo de cual este activado y dependiendo de cual sea la forma que queremos darle al tab, la forma poligonal sufre ciertos cambios y podría no mostrarse como quisiéramos, si la pestaña tiene una forma bastante irregular, lo mejor es diseñar y calcular la forma geométrica para cada uno de los posibles estados,   en este ejemplo solo realizamos la modificaciones para TOP.

La clase completa, la cual llame «shapeTabbedPaneUI.java» es:

package swing.xp;
import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import javax.swing.plaf.basic.BasicTabbedPaneUI;
/**
 * @web https://www.jc-mouse.net
 * @author Mouse
 */
public class shapeTabbedPaneUI extends BasicTabbedPaneUI{

    //Para almacenar la forma del tabs
    private Polygon shape;
    //Para almacenar los puntos de la forma poligonal del tabs o.O
    private int xp[] = null; 
    private int yp[] = null;

    @Override
 protected void paintTabBackground( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected ) 
 {
    Graphics2D g2D = (Graphics2D)g;
    //colores degradados para los tabs
    GradientPaint gradientSel = new GradientPaint( 0, 0,  new Color(242,249,242), 0, y+h/2, new Color(217,237,246) );
    GradientPaint gradientUnsel = new GradientPaint( 0, 0,  new Color(232,232,232), 0, y+h/2, new Color(205,205,205) );    

    switch( tabPlacement )
    {
        case LEFT: 
        case RIGHT:        
        case BOTTOM:
            /* codigo para estos tabs */
            break;
        case TOP:
        default:            
            xp = new int[]{ x, 
                            x,
                            x+4,
                            x+w+5,
                            x+w+5,
                            x+w,
                            x+w,
                            x
            };
            yp = new int[]{ y+h,
                            y+4,
                            y,
                            y,
                            y+5,
                            y+10,
                            y+h,
                            y+h
            };
          break;
    }

    shape = new Polygon( xp, yp, xp.length );

    if ( isSelected ) 
    {         
         g2D.setPaint( gradientSel );
    }
    else
    {        
        g2D.setPaint( gradientUnsel );
    }

     g2D.fill( shape );
 }

 @Override
  protected void paintTabBorder( Graphics g, int tabPlacement, int tabIndex, int x, int y, int w, int h, boolean isSelected) 
  {

    Graphics2D g2D = (Graphics2D)g;    

     switch( tabPlacement )
    {
        case LEFT: 
        case RIGHT:        
        case BOTTOM:
            /* codigo para estos tabs */
            break;

        case TOP:
        default:           
            xp = new int[]{ x, 
                            x,
                            x+4,
                            x+w+5,
                            x+w+5,
                            x+w,
                            x+w,
                            x
            };
            yp = new int[]{ y+h,
                            y+4,
                            y,
                            y,
                            y+5,
                            y+10,
                            y+h,
                            y+h
            };
          break;
    }

     shape = new Polygon( xp, yp, xp.length );

    if ( isSelected )
    {
         g2D.setColor( new Color(60,127,177) );
         g2D.drawPolyline( xp , yp , xp.length - 1 );
    }
    else
    {
        g2D.setColor( new Color(137,140,149) );
        g2D.drawPolyline( xp , yp , xp.length );
    }     

  } 

}//--> fin clase UI

Implementando esta clase UI en un JTabbedPane, tendremos como resultado:

shape tabs

Este es un ejemplo sencillo de lo que se puede hacer con shapeTabbedPaneUI, la documentación esta ahí, solo debes hacer volar tu imaginación si deseas pestañas más originales.

Descarga el proyecto de este  ejemplo  AQUI 🙂

Tags

Artículos similares

JSCRUM .:. Gestor de Proyectos

¿Qué es SCRUM? SCRUM es un modelo de referencia que define un conjunto de prácticas y roles, y que puede tomarse como pu[...]

Numero a Literal en Java

Cuando se realizan trabajos donde se necesita mostrar al cliente un determinado monto de dinero, tipo factura, recibo, c[...]

Leer y Escribir registros en archivo de texto

A veces se necesita utilizar archivos de texto plano como contenedor de registros como si de una base de datos se tratar[...]

Crea tu propia plantilla de proyectos

En un post anterior [Crear plantillas personalizadas para Netbeans] vimos una forma sencilla que tiene Netbeans para fac[...]

Hola mundo en Netbeans

De los diferentes IDE’s que existen para crear aplicaciones para android, lamentablemente Netbeans es una de las m[...]

Ejemplo completo de CORBA en Java

Common Object Request Broker Architecture (CORBA) es un estándar que permite que diversos componentes de software escrit[...]