Uno de los elementos más utilizados en una aplicación es el ImageView, el cual nos da la posibilidad de mostrar imágenes en nuestra aplicación móvil. En IOS el control ImageView utiliza la clase UIImageView y su uso es realmente muy sencillo.

La propiedad mágica

La propiedad que nos permite asignar una imagen a un objeto UIImageView es la propiedad “image” (como no). En código se hace de la siguiente forma:

miImagen.image = [UIImage imageNamed:@"nombreImagen"];

Manos a la obra

Vamos a crear una pequeña aplicación que mostrará tres images de coches y que tendrá un diseño como la imagen de abajo. En Xcode creamos un proyecto para IOS del tipo Single View Application.

Plantilla básica

Aquí nada nuevo, tan solo arrastramos los sigueintes componentes en el storyBoard: una etiqueta o Label, tres botones (Button) y nuestro flamante ImageView.

Tenemos que agregar también las imágenes a la carpeta de imágenes del proyecto, las llamaremos ferrari, googleCar y nissan.

Tres imágenes de coches

Una vez con nuestras imágenes elegidas y guardadas, vamos a asignar una imagen por defecto para el ImageView, para ello seleccionamos el control y nos fijamos en el inspector de propiedades(el cuarto inspector) en la propiedad “image“, ahí en el combo box deben aparecer como opciones las tres imágenes agregadas anteriormente; seleccionamos la que más nos guste.

Asignar una imagen estática o por defecto

Seleccionamos el asistente y nos aseguramos de usar el archivo .h

Ligando el ImageView al código

Propiedades del enlace

//
//  ViewController.h
//  ImageViewExample
//
//  Created by Rogelio Torres on 25/01/15.
//  Copyright (c) 2015 Notas de Software. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIImageView *imagen;

@end

El siguiente paso es generar tres funciones para cada botón, que cada vez que un botón sea presionado se cambie la imagen que se esta viendo en el ImageView. Para ello, todavía teniendo seleccionado el inspector, presionar la tecla ctrl y arrastrar el primer botón al archivo .h de la misma forma que se hizo con el ImageView.

Debemos asegurarnos que las propiedades del enlace correspondan a una acción y no a un Outlet:

Ligando el botón a una acción

Repetir esto para cada botón. Al final, nuestro código queda de la siguiente manera.

//
//  ViewController.h
//  ImageViewExample
//
//  Created by Rogelio Torres on 25/01/15.
//  Copyright (c) 2015 Notas de Software. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIImageView *imagen;
- (IBAction)btn1Click:(id)sender;
- (IBAction)btn2Click:(id)sender;
- (IBAction)btn3Click:(id)sender;

@end

//
//  ViewController.m
//  ImageViewExample
//
//  Created by Rogelio Torres on 25/01/15.
//  Copyright (c) 2015 Notas de Software. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)btn1Click:(id)sender {
}

- (IBAction)btn2Click:(id)sender {
}

- (IBAction)btn3Click:(id)sender {
}
@end

En el archivo ViewController.m se agregaron los métodos que serán llamados cada vez que se presionen los botones, en cada método hay que agregar self.imagen.image = [UIImage imageNamed:@”nombreImagen”]; de tal forma que cada imagen corresponda a un botón diferente

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)btn1Click:(id)sender {
    self.imagen.image = [UIImage imageNamed:@"googleCar"];
}

- (IBAction)btn2Click:(id)sender {
    self.imagen.image = [UIImage imageNamed:@"nissan"];
}

- (IBAction)btn3Click:(id)sender {
    self.imagen.image = [UIImage imageNamed:@"ferrari"];
}
@end

Descargar código

El proyecto se encuentra disponible en GitHub en la url:  https://github.com/notasdesoftware/ImageViewExample para que juegues con el.