GUI-BOX | EL CÓDIGO ES

ASOMBROSO. PASIÓN. DIVERTIDO. ESTRESANTE. SATISFACCIÓN.

LOGO

Área de descarga

Cómo crear un menú con animación en Java 2018

En este post les mostraré cómo pueden crear un menú con animación estilo web (drop down) para mostrar y ocultar un panel utilizando java y netbeans.

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 al hacer click en un botón, se realice la animación y “baje” para que pueda ser visible y a su vez presionando de nuevo “suba” a su posición original. Bueno espero y les suene interesante, entonces vamos a empezar.

Antes de leer todo y hacerlo siguiendo las instrucciones escritas, les dejo el vídeo, muy probablemente les sea de mayor provecho:

Instrucciones escritas

  • Como primer paso, deberás descargar la librería de animación.
  • 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).
  • Teniendo los 2 archivos anteriores, ya podemos empezar a crear nuestro proyecto, entonces haciendo uso de NetBeans, creamos un nuevo proyecto:
  • 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 en 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, sino, después andas batallando por cuestión de las rutas relativas y absolutas (indicar la ruta como dirección de una carpeta local).
  • 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 🙂
  • 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 haré 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 mostrará y ocultara un menú (haciendo animación de arriba hacia abajo y viceversa) modificaremos la coordenada S, donde le pondremos un número 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 cómo el panel ha sido colocado hasta arriba del frame, por lo tanto el usuario no lo podrá 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 el 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”
  • Agregamos estas dos librerías (Una de ellas es la de Animción) que descargamos 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);
}
  • 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:
  • 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio utiliza cookies para mejorar tu experiencia y nuestro servicio . Leer más