Java: como hacer un menú con animación



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





Link para librería: Nef-Animacion
Link para recursos: Iconos.

Lo quieres escrito?

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).

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.





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.

Bien, ahora creamos un nuevo paquete, para almacenar los 2 recursos que usaremos, las imágenes y el frame.



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 .

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?.



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.

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.



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.



Colocamos nuestras imágenes (las que descargaron hace rato) y las copiamos al paquete del proyecto.

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).

Seleccionamos nuestra etiqueta que tiene la imagen y damos clic derecho, seleccionamos la opción ?Eventos? --> ?Mouse? --> ?mouseReleased?



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);
}

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.

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:





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

Java: como hacer un menú con animación
45 Puntos Score: 5/10
Visitas: 2523 Favoritos: 20
Ver los usuarios que votaron...
9 Comentarios Java: como hacer un menú con animación
interesante tutorial lo agrego a favoritos psra revisarlo mas tarde  
Cita diemetal: Mostrar
, gracias y espero te sea ?
si lo integro a mi proximo trabajo del instituto quedar?
Cita Trazgul: Mostrar
Consulta, estoy por comenzar con java.Esto es Java o Java script?

Voy a comenzar a hacer aplicaciones para android, y es fundamental antes de aprender a programar en android studio, saber bastante de java, si tenes tutoriales para por ejemplo, hacer juego para celular, te lo agradeceria! (dudo que lo hagas, pido mucho a veces jaja)
se ve interesante despues lo utilizo. @chelo80 hola, soy tecnico en sistemas y aveces porgrama en java. Bueno te aclaro sobre tu primer pregunta: java y javaScript no son lo mismo javaScript es un lenguaje script para uso en navegadores web en enfocado a la misma, java por otra parte es un lenjuaje de programacion con propositos generales y tiene variantes como javaFX(aplicaciones para web y escritorio), javaME para celulares(los anteriores Nokia para que te des una idea nada que ver con android), JSP para paginas web. Como vez tiene nombres parecidos pero no son lo mismo. si realmente quieres hacer buenos programas en android tienes que saber la programaci?
@joart apoyo tu consejo de ser lo menos dependiente posible de algun IDE.

@chelo80 si quieres aprender Android, lo primero ser?
Cita nekio: Mostrar
Cita joart: Mostrar
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!