Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Proyectos / Galeria de imagene en java

Galeria de imagene en java

Autor jc mouse viernes, agosto 26, 2011

En este tutorial crearemos una Galeria de Imagenes al estilo de javascript o flash con Java y el IDE Netbeans 6.9.

1. Crear un nuevo proyecto en Netbeans (nombre: jcGaleria)

2. añadir un JFrame que sera nuestra interfaz (nombre: interfaz.java)

3. Añadir una clase, la clase controlara la galeria de imagenes (nombre: Galeria.java)

4 Con el proyecto seleccionado crea nuevo paquete (nombre: fotos), añade algunas imagenes

5. En el paquete jcGaleria, añade una imagen, esta imagen nos servira para mostrala cuando no existan imagenes en la galeria.

debes tener algo como la imagen de abajo:

y la imagen «nofoto.gif» es:

4. En la clase interfaz.java, colocaremos algunos jpanel y jbutton, utilizaremos layout (GridBagLayout) para ordenar los objetos que colocaremos dentro de la interfaz. En la imagen siguiente se resalta con rojo los nombres de los objetos con los que interactuaremos ademas de su tamaño, que para este proyecto es importante

debemos tener algo como esto, (clic para ampliar):

5. Si llegaste hasta aqui, vamos por buen camino, ahora nos toca escribir el código para interactuar con las imagenes, empezaremos con el codigo de la clase Galeria.java. es el siguiente:

package jcgaleria;

import java.awt.Dimension;
import java.awt.Image;
import java.util.ArrayList;
import javax.swing.Icon;
import javax.swing.ImageIcon;
/**
* @web https://www.jc-mouse.net/
 * @author Mouse
 */
public class Galeria {
    //para almacenar las imagene
    private ArrayList<ImageIcon> fotos = new ArrayList<ImageIcon>();
    private ImageIcon nofoto;//el nombre lo dice todo

    public Galeria(){
        //se cargan las fotos
        nofoto = new javax.swing.ImageIcon(getClass().getResource("nofoto.gif"));
        fotos.add(new javax.swing.ImageIcon(getClass().getResource("/fotos/0.jpg")));
        fotos.add(new javax.swing.ImageIcon(getClass().getResource("/fotos/1.jpg")));
        fotos.add(new javax.swing.ImageIcon(getClass().getResource("/fotos/2.jpg")));
        fotos.add(new javax.swing.ImageIcon(getClass().getResource("/fotos/3.jpg")));
        fotos.add(new javax.swing.ImageIcon(getClass().getResource("/fotos/4.jpg")));
        fotos.add(new javax.swing.ImageIcon(getClass().getResource("/fotos/5.jpg")));
    }

    /* devuelve una imagen de tamaño 100x100 VISTA PREVIA */
    public Icon getPreview(int num){
        if( num>=0 & num<fotos.size() )
        {
            Image mini = fotos.get(num).getImage().getScaledInstance(100, 100, Image.SCALE_AREA_AVERAGING);
            return new ImageIcon(mini);
        }
        else
        {
            Image mini = nofoto.getImage().getScaledInstance(100, 100, Image.SCALE_AREA_AVERAGING);
            return new ImageIcon(mini);
        }
    }

   /* devuelve la foto original, pero si el tamaño es mayor al contenedor, lo redimensiona */
   public Icon getFoto(int num, Dimension d){
        if( num>=0 & num<fotos.size() )
        {
            //si la foto es mas grande que el contendor -> redimensionar
            if(fotos.get(num).getIconWidth()>d.getWidth()){
                float v = getValor(fotos.get(num).getIconWidth(),d.width);
                return Disminuir(fotos.get(num),v);
            }else if(fotos.get(num).getIconHeight()>d.getHeight()){
                float v = getValor(fotos.get(num).getIconHeight(),d.height);
                return Disminuir(fotos.get(num),v);
            }else{
                return fotos.get(num);
            }
        }
        else
        {
            Image mini = nofoto.getImage().getScaledInstance(400, 400, Image.SCALE_AREA_AVERAGING);
            return new ImageIcon(mini);
        }
    }

   /* redimensiona la imagen en para que ingrese al contendor pero manteniendo sus proporciones*/
    private ImageIcon Disminuir(ImageIcon i, float v){
        int valEscalaX = (int) (i.getIconWidth() * v );
        int valEscalaY = (int) (i.getIconHeight() * v );
        Image mini = i.getImage().getScaledInstance(valEscalaX, valEscalaY, Image.SCALE_AREA_AVERAGING);
        return new ImageIcon(mini);
     }

    /* devuelve el valor de escala para redimensionar la imagen*/
    private float getValor(int a, int b){
        return Math.abs((a/new Float(b))-2f);
    }
}

Esta clase, al ser creada, inicializa un ArrayList con imagenes que son cargadas desde el paquete Fotos (que creamos en el paso 4), ademas de una variable «nofoto»con la imagen del paquete jcGaleria.

6. Para terminar debemos implementar esta clase en la clase interfaz.java, para ello necesitamos el siguiente codigo

package jcgaleria;
/**
* @web https://www.jc-mouse.net/
 * @author Mouse
 */
public class interfaz extends javax.swing.JFrame {
    Galeria Mi_Galeria = new Galeria();
    private int a = 0;
    private int b = 1;
    private int c = 2;
    private int d = 3;
    /** Creates new form interfaz */
    public interfaz() {
        initComponents();
        this.setTitle("Galeria de Imagenes Java - por Mouse");
        this.setLocationRelativeTo(null);
        //se elimina el texto
        FOTO_A.setText("");FOTO_B.setText("");FOTO_C.setText("");FOTO_D.setText("");FOTO_GRANDE.setText("");
        //se inici la vista previa
        FOTO_A.setIcon(Mi_Galeria.getPreview(0));
        FOTO_B.setIcon(Mi_Galeria.getPreview(1));
        FOTO_C.setIcon(Mi_Galeria.getPreview(2));
        FOTO_D.setIcon(Mi_Galeria.getPreview(3));
    }

/* demas codigo generado por netbeans 
 ...
 ...
*/

 private void FOTO_AMouseClicked(java.awt.event.MouseEvent evt) {
        FOTO_GRANDE.setIcon(Mi_Galeria.getFoto(a,FOTO_GRANDE.getSize()));
    }

    private void FOTO_BMouseClicked(java.awt.event.MouseEvent evt) {
        FOTO_GRANDE.setIcon(Mi_Galeria.getFoto(b,FOTO_GRANDE.getSize()));
    }

    private void FOTO_CMouseClicked(java.awt.event.MouseEvent evt) {
        FOTO_GRANDE.setIcon(Mi_Galeria.getFoto(c,FOTO_GRANDE.getSize()));
    }

    private void FOTO_DMouseClicked(java.awt.event.MouseEvent evt) {
        FOTO_GRANDE.setIcon(Mi_Galeria.getFoto(d,FOTO_GRANDE.getSize()));
    }

    private void CMD_NEXTActionPerformed(java.awt.event.ActionEvent evt) {
        a+=1;b+=1;c+=1;d+=1;
        FOTO_A.setIcon(Mi_Galeria.getPreview(a));
        FOTO_B.setIcon(Mi_Galeria.getPreview(b));
        FOTO_C.setIcon(Mi_Galeria.getPreview(c));
        FOTO_D.setIcon(Mi_Galeria.getPreview(d));
    }

    private void CMD_PREVIEWActionPerformed(java.awt.event.ActionEvent evt) {
        a-=1;b-=1;c-=1;d-=1;
        FOTO_A.setIcon(Mi_Galeria.getPreview(a));
        FOTO_B.setIcon(Mi_Galeria.getPreview(b));
        FOTO_C.setIcon(Mi_Galeria.getPreview(c));
        FOTO_D.setIcon(Mi_Galeria.getPreview(d));
    }

/* demas codigo generado por netbeans
 ...
 ...
 */

NOTA: No copies y pegues este codigo, recuerda que netbeans nos genera mucho código extra al crear el JFrame, seria muy largo colocarlo ese codigo aqui, ademas que innecesario, el codigo de arriba, solo representa a las partes que nosotros utilizamos al trabajar con el netbeans, los jbutton y jlabel en su mayoria, ademas de crear algunas variables e instanciar el objeto Galeria.

Finalmente compilamos y ejecutamos el proyecto, si todo salio bien, debes ver algo como esto:

Codigo fuente del proyecto

Click para descargar

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

Introducción a Scene Builder y MVC (Parte II)

Introducción a Scene Builder y MVC (Parte II)

Segunda parte del tutorial [Introducción a Scene Builder y MVC (Parte I)]. En esta segunda parte, completaremos el diseñ...

Instalación de Netbeans en Ubuntu

Instalación de Netbeans en Ubuntu

Netbeans es uno de los entornos de desarrollo integrado (Integrated Development Environment – IDE)  más conocidos...

Crear XML desde una base de datos con jDom

Crear XML desde una base de datos con jDom

Un post cortito de fin de semana 🙂 , este trata de la forma de extraer la información de una base de datos formar una es...

Introducción al Diseño Web Adaptable (Responsivo)

Introducción al Diseño Web Adaptable (Responsivo)

El diseño web adaptable (Responsive Web Design) va evolucionando como una filosofía de diseño y desarrollo de paginas we...

Esteganografia LSB en Java – [Proyecto Completo]

Esteganografia LSB en Java – [Proyecto Completo]

Mensajes ocultos utilizando el método de Inserción en el bit menos significativo (Least Significant Bit Insertion) El mé...

Script PHP – Mouse responde

Script PHP – Mouse responde

«Mouse Responde…» simula ser un alma en pena que responde cualquier pregunta que le hagan, al estilo del juego de...

6 comentarios en “Galeria de imagene en java”

  1. Mouse dice:

    buscame como jc mouse

  2. mauricio dice:

    Muchas gracias por el importante aporte, usare algunas cosas para un trabajo de la universidad, algo del manejo de imagenes. Gracias!!

  3. edwin dice:

    parsero esta excelente el codigo lo he implementado pero a mi no me deja tomar nombres de imagenes de las de 2 caracteres, me explico , puedo tomar imágenes cuyos nombre son 1.jpg, 2.jpg… etc. pero si uso nombres como f1.jg, 11.jpg, a1.jpg, me da error de archivo no existente. te agradezco la ayuda posible.

  4. Diego cruz dice:

    Muy buen código y ni que decir sobre los comentarios, excelente. Muchas gracias jc-mouse, eres una salvación para los que trabajan con Swing ya que no hay muchos recursos de este tipo.

  5. Obed dice:

    Muy bueno tu visor de imagenes, pero le faltaba algunos detalles como la redimension de imagenes con gran tamañoya que con imagenes ligeramente pasadas del tamaño del label trabajan bien pero imagenes con mas de 1000 pixeles como fondos de pantalla no redimensiona muy bien, aplique otro codigo para redimensionar que es este

    public Icon getFoto(int num, Dimension d){
    int original_width = fotos.get(num).getIconWidth();
    int original_height = fotos.get(num).getIconHeight();
    int bound_width = d.width;
    int bound_height = d.height;
    int new_width = original_width;
    int new_height = original_height;

    // first check if we need to scale width
    if (original_width > bound_width) {
    //scale width to fit
    new_width = bound_width;
    //scale height to maintain aspect ratio
    new_height = (new_width * original_height) / original_width;
    }

    // then check if we need to scale even with the new height
    if (new_height > bound_height) {
    //scale height to fit instead
    new_height = bound_height;
    //scale width to maintain aspect ratio
    new_width = (new_height * original_width) / original_height;
    }

    Image mini = fotos.get(num).getImage().getScaledInstance(new_width, new_height, Image.SCALE_AREA_AVERAGING);
    return new ImageIcon(mini);
    }

    y elimine el restante, asi mismo elimine la vista de miniaturas de sin imagenes y cuando el sistema detecta la ultima imagen bloquea el boton de continuar y al avanzar al otro lado lo activa asi solo se muestran las imagenes que realmente posee la bd, ademas de cargalas desde la BD con un jtable

    muchas gracias por tu cod, muy avanzado ya veo que me falta mucho por aprender.

  6. nanis dice:

    obed buenas tardes sera que tu me puedes regalar el codigo completo es que intente agregar el tuyo y no me va muy bien o si me pudieras regalar tu correo para contactarte… gracias

Los comentarios estan cerrados

Los comentarios están cerrados para este post
Comparte lo que sabes

Categorias

Últimas entradas

Quasar es un proyecto Open Source basado en el Framework Vue que nos permite desarrollar proyectos de todo tipo, por eje...

Continuando el post de «Introducción a Retrofit» donde realizamos una breve preparación a lo que es el uso de la librerí...

Editar un documento PDF no es tan sencillo como editar un archivo de texto por ejemplo, para editar archivos PDFs necesi...

¿Alguna vez tuviste la necesidad de hacer una captura de pantalla de una página web? Si es así, seguramente buscaste y d...

Herramientas

Generador de Enlaces a Whatsapp