Java mover un frame undecorated

Cómo mover un frame sin decoración "undecorated"

En este tutorial les mostraré cómo hacer para mover una ventana sin decoración o undecorated.

No sé si les ha ocurrido desmarcar la casilla “undecorated” de los frames, tal vez por curiosidad o porque en verdad lo requieren.

Si lo han hecho, se dieron cuenta de que al frame, se le quita la ventana por defecto de Windows, o del SO que utilicen. También, se habrán dado cuenta de que cuando seleccionamos la opción undecorated, el frame queda inmóvil, no podemos arrastrarlo por nuestra pantalla, es ahí la solución que les tengo, sé que esto no es ninguna novedad (para muchos), y sé que ya hay tutoriales que muestran cómo hacerlo, pero me he dado cuenta de que en los tutos que hay, el arrastrar el componente, hace un pequeño salto que no es agradable a la vista, es por eso me decidí hacer este ejemplo.

Espero que les sirva:




  1. Deben de tener una interfaz de algún proyecto, pueden ver mis otros tutoriales para que hagan una interfaz personalizada desde cero, o bien, trabajar en una que ya tengan.
  2. Deben de hacer el frame sin decoración (“undecorated”), para ello van a propiedades y marcan la casilla “undecorated”.

  3. Después en el código, dentro del constructor, ponen esta línea:

    AWTUtilities.setWindowOpaque(this, false);
    


  4. También pueden poner esta línea, que es para centrar el frame en la pantalla

    this.setLocationRelativeTo(null);
    


  5. Ahora, deberán poner una etiqueta (JLabel) en la posición que quieran, para que sea como la cabecera, o el área de donde se podrá arrastrar el frame:

  6. Cambien el cursor de la etiqueta, pongan el cursor de movimiento, para indicarle al usuario que en esa área puede arrastrar la ventana.

  7. Ahora, vamos con los eventos sobre la etiqueta, necesitamos los eventos mouse pressed y mouse dragged, ya que ocupamos las coordenadas de donde da clic y las coordenadas cuando arrastra la ventana.
    Comenzamos con el pressed, elegimos eventos de la etiqueta -> eventos ->mouse ->pressed
  8. Dentro del mouse pressed, ponemos estas lineas:

    x = evt.getX();
    y = evt.getY();
    
  9. Las variables x e y, deben ser declaradas globales (fuera del método, al inicio de la clase o al fin, no importa).
  10. Ahora, seleccionamos eventos de a etiqueta, eventos -> mouseMotion -> mouseDragged.
    Dentro del mouse Dragged, ponemos esta línea:

    this.setLocation(this.getLocation().x + evt.getX() - x, this.getLocation().y + evt.getY() - y);
    


NOTA: pongan los paneles o etiquetas de fondo en “opaque” = false, para que solo se vean los componentes que ustedes quieran.

Bueno, eso es todo, si no les gusta leer, les dejo el video:



Suscríbanse al canal, denle like al video, necesito un mínimo de 100 likes para subir un video de cómo hacer un login como el del ejemplo.
Gracias.



guibox

Próximo Ing. en sistemas computacionales (sólo falta el título ;)). Apasionado por el diseño de interfaces de usuario y el responsive design y no por eso dejo de programar la lógica de los sistemas, no hay lenguaje al que le haga el feo, si no se programar en él, que se prepare que será el próximo objetivo ;).

4 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  2. sera que me puedes regalar la plantilla gracias me lo puede manda al: mateo.nieto@ucp.edu.co

    ResponderBorrar
  3. Este comentario ha sido eliminado por el autor.

    ResponderBorrar
  4. HOla aprecio tus trabajos son excelentes si no es problema podrias enviarme la plantilla de este login ¡¡ mi correo personal ULISES_DIAZ123@HOTMAIL.COM

    ResponderBorrar