iOS : Ejercicio 17. Cargar imagen en UIImageView desde internet ~ THE BEST ANDROIDE

Blog >Lista ejercicios > Ejercicio 17

Hola desarrolladores,vamos con el tutorial de ejercicios completando la parte de multihilos de iOS.

Ejercicio 17: Conectarse a la red y cargar una imagen desde internet

Creamos un proyecto de la forma habitual,create new proyect - single view application. Ahí crearemos en el storyboard 2 objetos con sus correspondientes conexiones : una ImageView y un Button :

Vamos a utilizar una variable de tipo NSData :

NSData es un objeto genérico para empaquetar buffers de datos, se usa para transmitir o guardar datos en estado puro.

Pero antes de eso, vamos a subir una imagen a un servidor para poder utilizarla, yo personalmente y entre otros uso dropbox, es gratuito, así que sino teneis no se que haceis con vuestra vida pero deberiais, se hace muy rapido, te registras y te bajas el cliente desde aquí.

Ahora subimos esta imagen o la que elijamos (que friquis somos los informáticos) :

Y una vez la imágen ha sido subida a arriba botón derecho - copiar enlace publico. Bien por la política de dropbox para que sea público tenemos 2 opciones, o moverla a la carpeta que nos crea por defecto dropbox llamada "Public" o cambiamos las tres www por dl de tal manera que nos queda el enlace así :

https://dl.dropbox.com/s/oulaen0jeknx718/img.jpg?dl=0

Volvamos a XCode y en el .m donde la función de acción del botón, creamos el archivo NSData junto a otra variable NSUrl donde esta la url de nuestra imagen :

@interface ViewController : UIViewController
@property (weak, nonatomic) IBOutlet UIImageView *Img;
- (IBAction)botonAccionImg:(id)sender;
@end
- (IBAction)botonAccionImg:(id)sender {
    //URL IMAGEN
    NSURL *url= [NSURL URLWithString:@"https://dl.dropbox.com/s/oulaen0jeknx718/image.jpg?dl=0"];
    //NSDATA CON URL
    NSData *dato=[NSData dataWithContentsOfURL:url];
    //LO CARGAMOS EN LA IMAGEN
    [self.Img setImage=[UIImage imageWithData:dato]];
}

Ejecutamos el proyecto y al pulsar el boton de "Cargar Imagen" se carga nuestra imagen perfectamente, sólo que hay una pega, desde que se pulsa el botón, hasta que se carga la imagen, no podemos hacer nada es decir, en este proyecto sólo hay un boton con el que interactuar, pero si hubiera más elementos con los que interactuar, no podríamos tocarlos.

(Podeis probar insertando un tab-bar y pulsando sobre las opciones, ya vereis que no os deja)

Para que esto no ocurra, ya que de cara al usuario no queda bien que mientras se ande cargando algo se quede el teléfono como colgado,ya que tecnicamente no es así, pero da esa impresión, hay que meter este proceso en un hilo, y eso lo hacemos de la siguiente manera :

 @implementation ViewController

- (void)viewDidLoad

{
    [super viewDidLoad];
}

- (IBAction)botonAccionImg:(id)sender {
    //GESTOR DE HILOS (COLA)
    NSOperationQueue *cola=[NSOperationQueue new];
    //OPERACION A LANZAR
    //initwITHtARGET:self (sobre esta clase)
    //selector:metodo a ejecutar en el hilo que estamos creando
    //object: objeto a mandar a ese metodo
    NSInvocationOperation *operacion = [[NSInvocationOperation alloc]initWithTarget:self selector:@selector(cargarImagen) object:nil];
    //añadimos la operacion a la cola
    [cola addOperation:operacion];
}

-(void) cargarImagen{
    //URL IMAGEN
    NSURL *url= [NSURL URLWithString:@"https://dl.dropbox.com/s/oulaen0jeknx718/image.jpg?dl=0"];
    //NSDATA CON URL
    NSData *dato=[NSData dataWithContentsOfURL:url];
    //LO CARGAMOS EN UN OBJETO IMAGE
    UIImage *Img = [UIImage imageWithData:dato];
    //Volvemos al hilo principal
    [self.Img performSelectorOnMainThread:@selector(setImage:) withObject:Img waitUntilDone:YES];
}
@end