Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Proyectos / Google Circles en java

Google Circles en java

Autor jc mouse martes, junio 11, 2013

En este tutorial crearemos el botón de Google+ Google Circles para una interfaz de escritorio 🙂 si no sabes lo que son estos botones circulares el siguiente video puede ayudarte.

Estos botones originalmente basados para la web, tienen un bonito efecto de extensión cuando el cursor del ratón esta dentro y se contraen cuando pierde el foco, ademas permiten arrastrar objetos dentro de el, en fin, son como contenedores de objetos. En este post solo crearemos el efectos de extensión/contracción del botón g+ y este tendrá 8 botones circulares dentro cada uno con su propio evento CLIC. Nuestro resultado final en el siguiente vídeo

Herramientas

– Java y conocimientos sobre java2d

– IDE Netbeans 7.3

– 9 imagenes *.JPG de 100×100 pixeles

– Libreria Absolute Layout

Nivel: Intermedio

Duración: 30 minutos

Antes de programar 🙂 debemos tener en cuanta algunos aspectos del diseño:

Utilizaremos un panel de 400×400 pixeles, en este pintaremos los círculos que forman el botón de G+, este esta compuesto de 2 círculos, uno pequeño de color azul que es de tamaño fijo ( 150 pixeles de diámetro ) y el más grande, el que se extiende y contrae de 200 pixeles de diámetro inicialmente.

Debemos recordar que las coordenadas (0,0) en java2d comienzan en la esquina superior izquierda y cuando se dibuja un circulo en realidad se dibuja un rectángulo imaginario y de este se pinta el circulo indicando las coordenadas (x,y) de la esquina superior izquierda y las dimensiones (ancho,alto) de este.

G Plus project

Cuando se produzca el efecto de extensión quien sufrirá cambio sera el circulo más grande, este crecerá de 200 pixeles hasta un diámetro de 300 pixeles, pero cuando esto ocurra, también debemos de modificar las coordenadas (x,y) de la esquina sup. izquierda del circulo mayor, estas se desplazaran hasta el punto (50,50).

Diseño interfaz

Si solamente haríamos uso de las coordenadas iniciales (x,y,ancho,alto) (100,100,200,200) y finales (50,50,300,300) no lograríamos el efecto que buscamos de G+ Circles, debemos incrementar poco a poco tanto el ancho y alto, y paralelamente a este desplazar las coordenadas x,y para no desfasar la imagen.

¿como logramos esto? Se incrementara 1 pixel cada 5 milisegundos, solo se hace uso de una variable alto_ancho, ya que se trata de un circulo, al mismo tiempo la posición (x,y) inicial de 100 pixeles, decrecerá 0.5 pixeles a la vez hasta llegar a su posición final de (50,50), igualmente se hace uso de una sola variable «posicionxy» ya que nuestro contenedor principal es un rectángulo de 400×400 pixeles

alto_ancho = alto_ancho + 1;
posicionxy = posicionxy – 0.5f ;

Con esto logramos el efecto de crecimiento y para el efecto de decrecimiento usamos la inversa 😀

Cuando el circulo mayor llegue a su máxima extensión, debemos mostrar los botones circulares más pequeños, estos son JButton modificados y para posicionarlos sobre el jpanel se emplean la propiedad

setBounds( x, y, ancho, alto );

para permitir que los botones circulares tomen sus respectivas posiciones, se emplea el Absoloute Layout.

friends

Como se puede ver, mucha ciencia no hay 🙂 solo basta con una buena comprensión de java2d y la forma en que este dibuja los objetos en el lienzo.

Proyecto en Netbeans

Necesitamos crear un proyecto con la siguiente estructura:

google java

El proyecto consta de una clase interfaz que es un JFrame y dos clases JButtonCircle.java y JPanelCircle.java

Se hacen uso de 9 imágenes de 100×100 pixeles en formato *.JPG, 8 de ellas corresponden a las imágenes que tendrán los botones y la ultima «default.jpg» es la imagen que tendrá un botón circular cuando no tenga asignado ninguna fotografía. Las imágenes deben estar en el paquete «fotos».

9 fantasmas

Nota: No se olviden de añadir la librería Absolute Layout al proyecto, si no sabes como, clic derecho sobre la carpeta LIBRARIES –> ADD LIBRARY . También es importante recordar que los nombres de las clases se deben escribir tal cual se ve en la imagen, java es sensible a mayúsculas/minúsculas 🙂

Continuamos en la segunda parte del tutorial: «Botones circulares de Google Plus» 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Tutorial HeidiSQL: Sesion, Base de datos y Tablas

Tutorial HeidiSQL: Sesion, Base de datos y Tablas

HeidiSQL es un software libre y de código abierto que permite conectarse a servidores MySQL, MariaDB, Percona Server, Mi...

Compartir texto plano con un ShareActionProvider en Android

Compartir texto plano con un ShareActionProvider en Android

Un Action Provider es un elemento que habita en la Action Bar para incrementar la accesibilidad de nuestras aplicaciones...

Blog MVC – Consultas Ajax a la base de datos [p5]

Blog MVC – Consultas Ajax a la base de datos [p5]

Quinta parte de la serie de tutoriales «Creación de un blog siguiendo el patrón MVC (Modelo, Vista y Controlador)«. En e...

Filtros con JMF y una webcam [Proyecto]

Filtros con JMF y una webcam [Proyecto]

En esta oportunidad dejo a consideracion un proyecto para la captura de video desde una webcam, utilizando filtros como...

Crea música y compártela con Song Maker de Google

Crea música y compártela con Song Maker de Google

Song Maker es el nuevo experimento de Google Chrome Music Lab que permite al usuario crear música desde el navegador a t...

Compartir imagen desde android – Share Image

Compartir imagen desde android – Share Image

En este post crearemos una aplicación android que nos permitirá compartir una imagen con Facebook, whatsapp, bluetooth,...

2 comentarios en “Google Circles en java”

  1. jade dice:

    me pueden decir como hago para cambiar el nombre del circulo de medio

    1. Mouse dice:

      es un JLabel, solo debes modificar su atributo setText

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp