JFrame con bordes redondeados [SOLUCIONADO]

Crear una ventana con bordes suavizados en Java

Diseñar una interfaz gráfica de usuario (GUI) atractiva y moderna es un aspecto vital en el desarrollo de aplicaciones. En Java, uno de los elementos más fundamentales para la creación de interfaces gráficas es el JFrame. Sin embargo, las ventanas generadas con este componente por defecto tienen bordes rectangulares y un aspecto algo anticuado. En la actualidad, la tendencia está en los bordes suavizados o redondeados, lo que otorga a las aplicaciones un look más fresco y actualizado.

Para lograr esquinas redondeadas en las ventanas de nuestras aplicaciones Java utilizando Swing, es necesario involucrarse un poco más a fondo en manejo de propiedades de JFrame y métodos para el dibujo y renderizado de componentes.

Personalización del JFrame

Al momento de trabajar con un JFrame, tenemos diversas opciones para alterar su apariencia predeterminada. Antes de aplicar esquinas redondeadas, debemos eliminar ciertos estilos por defecto y asumir un mayor control sobre la ventana. Usaremos el método setUndecorated(true), que elimina la barra de título y los bordes predeterminados de la ventana, y así permitir un diseño más limpio y que se adecue a nuestro requisito de bordes redondeados.

import javax.swing.JFrame;

public class VentanaRedondeada extends JFrame {
    public VentanaRedondeada() {
        setUndecorated(true); // Eliminamos los bordes y la barra de título por defecto
        setSize(300, 200); // Definimos el tamaño de nuestra ventana
        setLocationRelativeTo(null); // Centramos la ventana en la pantalla
        setVisible(true); // Hacemos visible la ventana
    }

    public static void main(String[] args) {
        new VentanaRedondeada();
    }
}

Redondeo de esquinas con Graphics2D

Después de eliminar los elementos default del JFrame, procederemos a redondear las esquinas. Utilizaremos la clase Graphics2D, que nos provee un espacio donde dibujar y personalizar elementos gráficos con gran facilidad.

Para lograr las esquinas redondeadas, se dibuja un fondo y luego sobre él, un Rectangle2D con esquinas curvas. Esto se hace sobrescribiendo el método paintComponent de un JPanel y aplicando las operaciones de dibujo en dicho método.

import javax.swing.JPanel;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.RoundRectangle2D;

public class PanelRedondeado extends JPanel {
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g); // Llamada al método de la clase base para preparar el panel
        Graphics2D g2 = (Graphics2D) g;
        RoundRectangle2D rectanguloRedondeado = new RoundRectangle2D.Double(0, 0, getWidth(), getHeight(), 20, 20);
        g2.fill(rectanguloRedondeado); // Llenamos el rectángulo con esquinas redondeadas
    }
}

El siguiente paso es integrar este panel a nuestra ventana personalizada. En el constructor de VentanaRedondeada, creamos una instancia de PanelRedondeado y la añadimos al JFrame.

public class VentanaRedondeada extends JFrame {
    public VentanaRedondeada() {
        setUndecorated(true);
        setSize(300, 200);
        setLocationRelativeTo(null);
        
        PanelRedondeado panel = new PanelRedondeado();
        setContentPane(panel); // Establecemos nuestro panel como el contenido principal del JFrame

        setVisible(true);
    }

    public static void main(String[] args) {
        new VentanaRedondeada();
    }
}

Añadiendo funcionalidad

Con la ventana y su decoración con esquinas redondeadas, conviene añadir algunas funcionalidades básicas para mejorar la experiencia del usuario, como la posibilidad de mover la ventana arrastrándola con el ratón. Dado que hemos eliminado la barra de título y con ella, la capacidad de mover la ventana de forma predeterminada, debemos implementar esta funcionalidad nosotros mismos.

Se logra agregando MouseMotionListener al panel y sobrescribiendo los métodos mouseDragged y mouseMoved para seguir la posición del puntero y mover la ventana en consecuencia.

import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;

// ...

public class VentanaRedondeada extends JFrame {
    private int posX, posY; // Variables para almacenar la posición anterior del ratón
    
    public VentanaRedondeada() {
        // ...

        PanelRedondeado panel = new PanelRedondeado();
        setContentPane(panel);

        // Agregamos los listeners para manejar el movimiento de la ventana
        panel.addMouseListener(new MouseAdapter() {
            @Override
            public void mousePressed(MouseEvent e) {
                posX = e.getX();
                posY = e.getY();
            }
        });

        panel.addMouseMotionListener(new MouseMotionAdapter() {
            @Override
            public void mouseDragged(MouseEvent e) {
                setLocation(getLocation().x + e.getX() - posX, getLocation().y + e.getY() - posY);
            }
        });

        // ...
    }

    // ...
}

Aspectos a considerar para la compatibilidad

Aunque la personalización de la ventana es estéticamente deseable, no debemos olvidar la compatibilidad con diferentes entornos y sistemas operativos. Es fundamental garantizar que el comportamiento de la ventana es consistente en plataformas distintas. Podemos hacer pruebas en Windows, Linux, y macOS para asegurarnos de que nuestra ventana se comporta correctamente en estos sistemas. También es crucial gestionar correctamente los eventos de cierre de la ventana, para liberar recursos y finalizar la aplicación de forma limpia cuando el usuario decida cerrarla.

Optimizando la personalización

Una vez implementadas las esquinas redondeadas y las funcionalidades básicas de la ventana, podemos continuar refinando la interfaz. Por ejemplo, es posible aplicar sombras o gradientes, gestionar eventos del teclado para funcionalidades adicionales, y aplicar transiciones suaves para el redimensionamiento o la visualización de la ventana.

En este punto, también es importante considerar el uso eficiente de los recursos gráficos, asegurándose de que la personalización no tenga un impacto negativo en el rendimiento del programa. La gestión correcta del ciclo de vida de los objetos y componentes gráficos es indispensable para mantener una aplicación responsiva y ágil.

Implementación de diseño responsivo

Finalmente, en la actual era de la diversidad de pantallas y dispositidades, es vital diseñar y desarrollar con un enfoque responsivo. Incluso una ventana de escritorio debe ser capaz de adaptarse a diferentes resoluciones y proporciones de pantalla. Debemos considerar cómo el diseño responsivo afecta a la visibilidad de los componentes internos de la ventana y cómo manejan el redimensionamiento.

Por supuesto, siempre hay espacio para la mejora y la innovación. A medida que Java y sus librerías gráficas evolucionan, también lo hacen las técnicas y las herramientas disponibles para los desarrolladores de interfaces gráficas. Permanecer actualizado con estas tendencias y prácticas es clave para crear aplicaciones modernas, funcionales y atractivas.

Lo importante al personalizar el aspecto de una ventana en Java es mantener un equilibrio entre la estética y la usabilidad. Cuidar cada detalle, desde los bordes redondeados hasta la respuesta a interacciones básicas del usuario, es indispensable para entregar una experiencia de usuario efectiva y agradable.

En resumen, la creación de una ventana con bordes suavizados en Java requiere de una comprensión detallada de las capacidades que ofrece el entorno de desarrollo y la API de componentes gráficos. A través de la práctica y la experimentación con diferentes métodos y técnicas, los desarrolladores pueden enriquecer sus aplicaciones y deleitar a los usuarios con interfaces estéticamente agradables y altamente funcionales.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad