sábado, 5 de mayo de 2012

Redimensionamiento de imágenes en componentes de JFrame

votar
   En la entrada de esta semana vamos a tratar de cómo añadir imágenes en una interfaz gráfica de usuario o GUI.
   Como este blog esta pensado para ayudar a los que empiezan, vamos a partir de cero y crear dicha interfaz. Los que ya seáis expertos podéis saltaros esta parte.

   En Java, la creación de ventanas, botones, campos de texto, etc. se hace a través de las apis de java.awt. y javax.swing. No vamos ahora a ver la jerarquía ni los aspectos teóricos de estas clases, porque es un tema muy extenso, pero os recomiendo que echéis un ojo a los docs de Oracle.

   Yendo a lo práctico, si queréis hacer una ventana hay que crear primero un marco (frame) en el que pondremos un panel (panel) y en él todos los demás objetos que queramos añadir. Un ejemplo muy sencillo sería:


import java.awt.*;
import javax.swing.*;
import javax.swing.JFrame;

public class DemosFrame extends JFrame{
    //Vamos a crear componentes
    private JButton botón = new JButton("Esto es un botón");
    private JLabel label = new JLabel("Esto es una etiqueta");
    private JTextField textfield = new JTextField("Esto es un campo de texto");
    private JTextArea textarea = new JTextArea("Esto es un área de texto");
   //Podríamos añadir más cosas, pero como muestra vale.

   DemosFrame(){ //constructor de DemosFrame
      JPanel panel = new JPanel(); //creamos el panel
      //Ahora añadimos todo al panel
      panel.add(botón);
      panel.add(label);
      panel.add(textfield);
      panel.add(textarea);
      setContentPane(panel); //añadimos el panel al marco
   }

   public static void main(String[] args){
      DemosFrame frame = new DemosFrame(); //creamos el marco
      
      frame.setSize(400,400); //le ponemos las medidas que queramos
      frame.setLayout(new FlowLayout()); //colocamos los componentes según la disposición que mejor nos convenga
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //para salir del programa al cerrar la ventana
      frame.setLocationRelativeTo(null); //para centrar la ventana en la pantalla
      frame.setVisible(true); //¡Nunca hagáis visible el marco antes de añadirle todo lo demás!
   }
}

   Recordad que los componentes se colocan en el panel, no en el marco.

   Ahora bien, supongamos que ahora queremos añadir una imagen. ¿Cómo lo hacemos? Lo habitual es utilizar ImageIcon, una implementación de la interfaz Icon que nos permite añadir archivos de imágenes con extensiones GIF, JPEG o PNG para colocarlas en botones, etiquetas o paneles.

   Suponed que tenéis una imagen que queréis añadir a un botón. La forma de hacerlo es muy sencilla: 

    ImageIcon icon = new ImageIcon("imagen.gif");

si la imagen está en el mismo directorio, o bien

   ImageIcon icon = new ImageIcon("ruta/imagen.gif");

si la imagen está en otro.
(Notad que en Unix el path se separa con "/", mientras que en Windows podéis usar "/" o "\\")

   Y a continuación:

   JButton botón = new JButton(icon);

   Pero si la imagen no la tenéis en vuestro equipo, si no que queréis descargarla de internet, tenéis que hacer lo siguiente:

   java.net.URL sitio = new URL("http://www.sitio.com/imagen.gif");
   ImageIcon icon = new ImagenIcon(sitio);

  Y luego añadirlo a donde queráis. Tened en cuenta que lanza una MalformedURLException que hay que declarar o manejar.

   Pero, ¿qué ocurre si la imagen es demasiado grande? Por ejemplo, tenemos una foto y queremos colocarla en un botón, pero no nos cabe porque ocupa toda la pantalla. Bueno, ni Icon ni ImageIcon tienen un método para redimensionar imágenes, pero la clase Image sí, e ImageIcon tiene un constructor que acepta instancias de Image como parámetros. Así que, esto es lo que haremos: 


/*Método mostrado por Gregg Bolinger en JavaRanch*/ImageIcon icon = new ImageIcon("miimagen.jpeg");
Image img = icon.getImage(); //convertimos icon en una imagen
Image otraimg = img.getScaledInstance(115,230,java.awt.Image.SCALE_SMOOTH); //creamos una imagen nueva dándole las dimensiones que queramos a la antigua
ImageIcon otroicon = new ImageIcon(otraimg);
JButton botón = new JButton(otroicon);


   Y eso es todo lo que hay que hacer para ajustar el tamaño de la imagen a nuestras necesidades. Fijaos en que el primer número de getScaled() corresponde al ancho y el segundo al alto de la imagen.


   Esperamos que os haya sido útil. :-)

2 comentarios:

  1. las medidas en que unidades estan?? gracias por la ayuda!!

    ResponderEliminar
    Respuestas
    1. Hola, Andrés.
      Las medidas están en píxeles, ancho por alto. Por ejemplo, la definición del método getScaledInstance es la siguiente:
      getScaledInstance(int width, int height, int hint)
      En el último int lo que pones es el tipo de algoritmo que quieres usar para el redimensionamiento. Yo he puesto SCALE_SMOOTH, pero hay más: SCALE_FAST, SCALE_DEFAULT...
      ¡Un saludo!

      Eliminar