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.

UITableView-Sample-App.jpg

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 Screen Shot 2015-12-18 at 10.20.34.png
  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

Screen Shot 2015-12-18 at 10.20.59

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:@&amp;quot;nombreimagen.extension&amp;quot;]];

    // 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

Screen Shot 2015-12-18 at 10.34.45.png

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

Screen Shot 2015-12-18 at 10.03.32.png

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 🙂

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s