TableView con Imagen de fondo

En IOS tenemos un componente llamado TableView el cual generalmente encontramos con una fuente de datos y para explorarlos realizamos un scroll, por ejemplo en la siguiente imagen podemos observar algunas aplicaciones que utilizan dicho componente.

Imagen tomada de http://www.appcoda.com/wp-content/uploads/2012/04/UITableView-Sample-App.jpg

En esta sección nos vamos a enfocar en aprender a establecer una imagen de fondo a nuestro TableView, para ello debemos tener:

1. Vista con TableViewController 
2. TableViewController de una clase personalizada

Primero debemos tener una clase que herede de UITableViewController para poder seleccionarla, por ejemplo algo similar a la siguiente definición

CustomTableViewController.h

#import <UIKit/UIKit.h>

@interface CustomTableViewController : UITableViewController

@end

CustomTableViewController.m

#import "CustomTableViewController.h"

@implementation CustomTableViewController

- (void)viewDidLoad {

[super viewDidLoad];

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

Como pueden observar es la definición por defecto, aún no hay propiedades (eso no quiere decir que las deben eliminar, simplemente que es más sencillo explicar de esta manera).

Ahora si vamos  a nuestro story board vamos a poder indicar que nuestro TableViewController será de la nueva clase

Una vez establecida la clase vamos agregar una imagen a nuestro proyecto luego damos click en la implementación y agregamos el siguiente código en el método viewDidLoad

CustomTableViewController.m

    // establecemos el fondo del tableview transparente
    [self.tableView setBackgroundColor:[UIColor clearColor]];

    // se crea la instancia de UIImageView y le pasamos al constructor el nombre de la imagen con la que debe crearse
    UIImageView * tableBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"nombreimagen.extension"]];

    // Se establece la imagen del tamaño de la pantalla del dispositivo
    [tableBackgroundView setFrame: self.tableView.frame];

    // establecemos el fondo de tableview con la nueva vista
    [self.tableView setBackgroundView:tableBackgroundView];

Ahora si ejecutamos el código tendremos algo similar a la siguiente vista

Si deseamos podemos personalizar las celdas del list view para un mejor efecto

Bueno eso ha sido todo por está ocasión como pueden observar es sencillo establecer el fondo de nuestro TableViewController, el código lo pueden encontrar en Github, hasta la próxima 🙂