lunes, 27 de mayo de 2013

Aprende como Crear un circulo de amigos Google+ en java (Parte 1)


Hace algún tiempojc-Mouse admin y programador de jc-mouse(blog)y jc-mouse(net), me pregunto un día si podría realzar un ejemplo sobre los círculos de amigos que tiene google+(por cierto google+ se actualizo y para mi gusto esta mejor que facebook :)). y hoy es ese día y recordé que existe una forma con un layout especial para colocar cualquier elemento de forma circular y el resto seria trabajo deGraphics2D mi objetivo era de comunicarme con google a través de su API para obtener las imágenes de los seguidores en google+ pero no tuve existo ,por ahora comparto con ustedes la primera parte de la aplicación por que falta aun mas.

Pero existe un layout que me permite colocar los elementos de forma circular?
siCircleLayout permite añadir cualquier varios elemento y dar las coordenadas para ubicar los de forma circular solo tendríamos que instanciar la claseCircleLayout , setLayout(newCircleLayout).
la claseCircleLayout ya viene incluida en el proyecto de descarga para cualquir uso que le quieran dar yo ya tengo unas ideas de como darle uso.

Como darle forma circular al panel y a las imagenes?
ya teniendo el layout que era la parte mas difícil el resto solo tendríamos que hacer uso de la claseGraphics2D .

Darle forma al JPanel

int w = getWidth(); 
int h = getHeight();
Graphics2D g2d = (Graphics2D)g.create();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
/********************************/
//TextLayout me permite pintar o añadir texto a cualquir elemento en este caso un JPanel
TextLayout texto = new TextLayout("Soy Seguidor(a)",new Font("Dialog", Font.PLAIN, 21), g2d.getFontRenderContext());
TextLayout total = new TextLayout("10",new Font("Dialog", Font.BOLD, 30), g2d.getFontRenderContext());
/*********AÑADO LA FORMA CIRCULAR AL JPANEL**********************/
g2d.setPaint(new Color(21,160,203));//AÑADO COLOR DE FONDO
g2d.fill(new Ellipse2D.Double(3, 3, w-6, h-6));//LE DOY LA FORMA AL JPANEL
g2d.setColor(new Color(100, 100, 100));
g2d.drawOval(3, 3, getWidth()-7, getHeight()-7);
g2d.setColor(new Color(255, 255, 255, 50));
g2d.drawOval(3, 3, getWidth()-6, getHeight()-6);
/*********AÑADO EL TEXTO Y LE DOY COLOR***************/
g2d.setColor(Color.WHITE);
texto.draw(g2d,w/3,h/2); //TEXTO CENTRADO SEGUN EL TAMAÑO DEL TEXTO
g2d.setColor(new Color(204, 204, 204));
total.draw(g2d,w/2-10,h/2+32);
/**********/
g2d.dispose();


Darle forma a lasimágenes
las imágenes de los seguidores serian botones que estarían agregados al JPanel con el layoutCircleLayout , hago lo mismo que hice en el JPanel pero, para redondear las imágenes tendría que utilizar la claseEllipse2D.Float(x, y, w,h); esta clase me permite realzar la forma circular seguido de la clasedrawImage() que me permite pintar la imagen dentro del JButton.

if(getImage()!=null){
g2.setClip(getForma());//LE DOY FORMA A LA IMAGEN CON LA CLASE ELLIPSE
g2.drawImage(image,3,3, w-6,h-6,this);//PINTO LA IMAGEN EN EL BOTON
}

protected Shape getForma(){

int w=this.getWidth();
int h=this.getHeight();

return new Ellipse2D.Float(3, 3, w-6,h-6);
}

y de esa forma obtendré las formas deseas que se asemejen al circulo de amigos de Google+.

DESCARGARTE EL CODIGO FUENTE



No hay comentarios:

Publicar un comentario