Java y NetBean, cómo hacer un menú personalizado con animación, mostrar ocultar un menú (JPanel).

Hola que tal java developers, en esta oportunidad les mostraré como crear un menú con animación. La animación trata de mostrar / ocultar un contenedor, que en este caso será un Panel, que contendrá varios componentes (esto ya lo puedes modificar a tu gusto), entonces el Panel en un principio, estará oculto, para después haciendo clic en un botón, se realice la animación y “baje” para que pueda ser visible. Bueno espero y les suene interesante, entonces vamos a empezar.

1. Como primer paso deberás descargar la librería desde aquí.
2. Ahora descarga los recursos que usaré en el ejemplo, claro también puedes crear tus propios recursos, no te limites a lo que yo comparto (si lo crees necesario).
3. Teniendo los 2 archivos anteriores, ya podemos empezar a crear nuestro proyecto, entonces haciendo uso de NetBeans, creamos un nuevo proyecto:
   
   
   NOTA: Marcamos la casilla “Use dedicated folder for storing libraries” o “Usar una carpeta dedicada para almacenar las bibliotecas” (en caso de que lo tengas en español).
4. Ahora le damos clic derecho al nuestro proyecto, y seleccionamos la opción “Propiedades”, después en la ventana emergente, seleccionamos la opción “Add Jar Folder”, para agregar nuestra librería de Nef-Animacion.
   
   
   
   
   
   
   
5. Buscamos la ruta donde guardamos la librería (no importa el lugar donde se encuentre, escritorio, descargas, etc.), y marcamos la opción de “Copiar a la carpeta de bibliotecas”. Esto se hace con el fin de que cuando queramos generar nuestro Jar de la aplicación, este contenga todas las librerías y trabaje perfectamente, si no, después andas batallando por cuestión de las rutas relativas y absolutas (indicar la ruta como dirección de una carpeta local).
   
   
   
   
   
   
   NOTA: Esto lo puedes aplicar para tus demás proyectos donde utilices librerías, es una buena práctica.
6. Bien, ahora creamos un nuevo paquete, para almacenar los 2 recursos que usaremos, las imágenes y el frame.
   
   
   
7. Dentro de este paquete, creamos un nuevo JFrame, y le añadimos un Panel, este panel lo cambiamos de tamaño, de modo que cubra toda la superficie del frame, como si fuera un fondo de pantalla :).
8. A este panel, le cambiaremos su propiedad de “Ajuste de distribución”, dando clic derecho sobre el panel, y elegimos la opción de “Absolute layout” o “Diseño absoluto”.
   
   
   
9. Ahora agregamos otro Panel, encima del anterior, le puedes cambiar el color para identificarlo, también cambia los nombres de los componentes para no confundirlos. Este nuevo panel lo hare de 580px de ancho y 110px de alto, de un color gris oscuro. Bien, después de esto, damos clic derecho al nuevo panel y seleccionamos “Propiedades”, dentro de aquí bajamos hasta encontrar el encabezado “Gestor de distribución”, en donde aparecen una X y una S.
10. X representa el eje de las X, y S representa el eje de las Y. Entonces, como el ejemplo trata de que mostrara y ocultara un menú (haciendo animación de arriba hacia abajo y viceversa) modificaremos la coordenada S, donde le pondremos un numero negativo (para que se valla hasta arriba, por encima del frame) para que no se vea. Podemos ver el tamaño (el alto es el segundo numero) viendo en “Preferred Size”, de esta manera, deberás asignar ese mismo número pero en negativo, para la coordenada S o Y.
    
    
    
11. Como pueden ver en la imagen, se ve como el panel ha sido colocado hasta arriba del frame, por lo tanto el usuario no lo prodra ver cuando ejecute la aplicación.
    
    
    
12. Colocamos nuestras imágenes (las que descargaron hace rato) y las copiamos al paquete del proyecto.
13. Ahora colocamos una etiqueta (JLabel) sobre el primer panel (el fondo, NO el menú) y la situamos más o menos a la mitad de todo frame (que se vea centrado pues). Después damos clic derecho a la etiqueta y en “Propiedades” seleccionamos “Icon”, y elegimos la imagen de “Bajar” para que se muestre con el pico hacia abajo:
    
    
    
    
    
    
    
    
    
    Y para no tener problemas, arrastramos la etiqueta encima del panel de menú (OJO arrastrarla en la pequeña ventana “Navegador”, que se encuentra en la parte inferior izquierda de tu pantalla, esa en donde se listan los componentes) de tal manera que la nueva etiqueta quede por encima del menú (para que el menú no la tape cuando baje).
14. Seleccionamos nuestra etiqueta que tiene la imagen y damos clic derecho, seleccionamos la opción “Eventos” --> “Mouse” --> “mouseReleased”
    
    
    
15. Ahora este es el código que agregaremos:
    Agregamos estas dos librerias (Una de ellas es la de Animción) que desacargamos antes y que colocamos en el proyecto.

    import Animacion.Animacion;
    import javax.swing.ImageIcon;
    

    
    Después, en el evento de la etiqueta (el mouseReleased de hace un momento) colocamos este código:
    

    int posicion = mi_etiqueta_icono.getY();
            if(posicion > 0){ //está abajo, ya bajó el menú, ahora hay que subirlo
                Animacion.subir(0, -110, 2, mi_panel_menu);
                Animacion.subir(95, 0, 2, mi_etiqueta_icono);
                img_down();
            }else{ // está arriba, no ha bajado el menú
                Animacion.bajar(-110, 0, 2, mi_panel_menu);
                Animacion.bajar(0, 95, 2, mi_etiqueta_icono);
                img_up();
            }
    

    
    
    Ahora añaden estos dos métodos (el img_up() y el img_down()):
    
    

    public void img_up(){
            ImageIcon img = new ImageIcon(getClass().getResource("nombre_imagen_apuntaArriba.png"));
            etq_icono.setIcon(img);
    }
    public void img_down(){
            ImageIcon img = new ImageIcon(getClass().getResource("nombre_imagen_apuntaAbajo.png"));
            etq_icono.setIcon(img);
    }
    

16. Bueno, después de agregar el código, ya lo pueden ejecutar, y verán que al hacer clic sobre la etiqueta, se despliega el “Menú” que es un jpanel sin nada.
    
    
    
    
    
    
17. Pueden agregar componentes al panel Menú, para ello (porque se encuentra hasta arriba y no se ve) pueden dar doble clic al panel menú, dentro del listado de componentes:
    
    
    
18. Ahora pueden ejecutarlo nuevamente, para verlo en funcionamiento, pero ahora con más objetos, con botones, botones de radio, checks, combos, etc. Agreguen lo que quieran.
    
    
    

Explicación básica de la librería

Bueno, básicamente la librería tiene 2 métodos, el de subir y el de bajar componente.
Ambos reciben 4 parámetros (posición inicial Y, posición final Y, tiempo retardo en milisegundos, componente)

int posicion = mi_etiqueta_icono.getY();
        if(posicion > 0){ //está abajo, ya bajó el menú, ahora hay que subirlo
            Animacion.subir(0, -110, 2, mi_panel_menu);
            Animacion.subir(95, 0, 2, mi_etiqueta_icono);
            img_down();
        }else{ // está arriba, no ha bajado el menú
            Animacion.bajar(-110, 0, 2, mi_panel_menu);
            Animacion.bajar(0, 95, 2, mi_etiqueta_icono);
            img_up();
        }

Si se fijan, Animacion.subir(0, -110, 2, mi_panel_menu); recibe los parametros: 0 = coordenada Y inicial.
-110 = coordenada Y final, esto quiere decir que el componente se desplazará desde la coordenada 0 hasta la -110 con un retardo de 2 milisegundos (cada 2 milisegundos avanza 1px).
2 milisegundos
Y el componente: panel_menu.
De la misma manera funciona el Animacion.bajar

NOTA: Si quieren modificar el tamaño del menú (si lo quieren más pequeño o más grande), háganlo, cambien el tamaño en la interfaz, pero NO se olviden de cambiar también el código (en el evento de la etiqueta) porque se desfasa y se ve mal.





Les dejo el video:



Bueno Java devs, espero que les guste, si tienen dudas, en algo no explique bien, o si siguieron todos los pasos y aún tienen errores, dejen un comentario, los responderé lo más rápido posible.

Gracias, compartan con sus amigos :)