ImageView en IOS – Objective C

imagen de la plantilla básica

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.

imagen de la plantilla básica
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.

carpeta de imagenes
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.

Imagen por defecto
Asignar una imagen estática o por defecto
Yo seleccione ferrari, por lo tanto en el storyboard el ImageView ahora muestra la foto elegida:
Ferrari como imagen por defecto
Ahora lo que debemos hacer es poder cambiar la imagen cuando se presione cada uno de los botones, para ello debemos primero ligar el ImageView a nuestro código, esto es muy sencillo, tan solo seleccionamos el control ImageView y presionamos el asistente (el asistente tiene forma de dos círculos, pero en versiones anteriores de Xcode es un traje con corbata)
Seleccionar el inspector
Seleccionamos el asistente y nos aseguramos de usar el archivo .h
Debemos asegurarnos de seleccionar el archivo con extensión .h para ligar a este el ImageView y no al .m. Para ligarlo tan solo debemos presionar la tecla ctrl y al mismo tiempo dar clic en el componente y arrastrar la linea al cuerpo del archivo .h
Ligar el ImageView
Ligando el ImageView al código
Cuando soltemos el mouse, se nos preguntará por las propiedades del link, las cuales deben de quedar de la siguiente manera:
Propiedades del enlace
Propiedades del enlace
Dar click en connect para completar el proceso. Una vez ligada la imagen, nuestro archivo ViewController.h queda de la siguiente forma:
//
//  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:

Creando una acción
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.

2 thoughts on “ImageView en IOS – Objective C

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *