Blog
>Lista ejercicios >
Ejercicio 8
Hola compañeros, vamos a ver como hacer un Table View, más personalizado.
Ejercicio 8: Crear un Table View más personalizado.
Vamos a tirar del ejercicio anterior y partir desde esa base, en él apararece una UITableView con simplemente un texto estático que poníamos en la función cellForRowAtIndexPath, concretamente en la fila :
celda.textView.text=@"ValorcualquieraDeNombre";
Comenzamos arrastrando al proyecto 7 imágenes imágenes, el numero da igual.
Bien, ahora vamos a cambiar el estilo del elemento UITableViewCell en la función cellForRowAtIndexPath, que como recordaremos, es la encargada de insertar los items en las celdas de la tabla.
Al crear la celda hay que indicar la propiedad initWithStyle. En este caso, lo que haremos es cambiar el estilo que teníamos por este : UITableViewCellStyleSubtitle que nos permite además de introducir un textLabel,una descripcción y una imagen distinta, para hacer la tabla más dinámica.
Si os fijais bien en el código, donde antes sólo se podia escribir celda.textLabel, ahora hay otras propiedades como detailTextLabel o imageView e incluso le he metido el accessoryType que es la flechita de la derecha de la celda.
De las imágenes que os he comentado al principio, he usado una de ellas :
Hay muchas formas de hacerlo, pero como estamos de novatos, vamos a trabajar la programación, es decir vamos a crear una nueva clase de Objetive-C que contenga dos String (osea el nombre y la descripción) y una imagen. Esta es la clase contenedora que almacena los datos de cada celda para hacer el array de objetos que contenga todos los datos.Yo la he llamado Personaje, y hereda de NSObject
Primero va código del .h y después código del .m
Entonces, ahora vamos a llenar el array de forma un poquito más dinamica como dije antes,en el ejercicio anterior recordemos que estaba en el método viewDidLoad, que es el método que se ejecuta nada más empezar la app.
Así que ahora creo una función que he llamado InsertarItems donde cargamos todos los objetos Personaje en el NSMutableArray y la llamamos desde este método.
Ahora volvemos a la función cellForRowAtIndexPath, para cambiar la carga estática de los elementos por los elementos del objeto Persnaje que vamos a ver a acontinuación :
Y este, es el resultado :
Disculpar el punto de frikismo, pero es lo que tiene ser informático...
Vamos a ir un paso más. Supongamos que queremos personalizar mucho más nuestra tabla, pues tendremos que ir al storyboard y arrastrar un componente UITableViewCell dentro de nuestro UITableView. Vamos a crear nuestra celda personalizada. Ahi insertaremos los dos labels y nuestra ImageView, e incluso yo he subido el ancho de nuestra celda, podemos personalizarlo a nuestro antojo.
El alto de celda se modifica mediante una función heightForRowAtIndexPath que también hay que implementar en el código:
Creamos otra clase Objetive-C que herede de UITableViewCell con los elementos que pongamos dentro de la celda, yo la he llamado CeldaView. Esta celda es la que va a llevar las propiedades de nuestra celda que acabamos de crear y también necesitamos asignarlesa a la celda en el storyboard en el apartado CustomClass : CeldaView, y sobre todo muy importante en Identifier : IDCelda
*NOTA : En el pantallazo, me he equivocado al poner IDCelda, una pestaña más a la derecha en el inspector de propiedades aparece la opción Identifier, es ahi donde hay que poner el IDCelda.
Aqui va el código CeldaView.h y CeldaView, no lo explico porque es bastante intuitivo :
Hacemos las conexiones a los elementos de la forma habitual :
Para ir finalizando, volvemos al ViewController.m. Ahí es donde tenemos que configurar otra vez la función cellForRowAtIndexPath que es la que se encarga de llenar las filas, tenemos que cambiarla para que coja la celda que hemos creado en vez la que viene por defecto, quedaría así :
Y por fín, este es el resultado :
Hola compañeros, vamos a ver como hacer un Table View, más personalizado.
Ejercicio 8: Crear un Table View más personalizado.
Vamos a tirar del ejercicio anterior y partir desde esa base, en él apararece una UITableView con simplemente un texto estático que poníamos en la función cellForRowAtIndexPath, concretamente en la fila :
celda.textView.text=@"ValorcualquieraDeNombre";
Comenzamos arrastrando al proyecto 7 imágenes imágenes, el numero da igual.
Bien, ahora vamos a cambiar el estilo del elemento UITableViewCell en la función cellForRowAtIndexPath, que como recordaremos, es la encargada de insertar los items en las celdas de la tabla.
Al crear la celda hay que indicar la propiedad initWithStyle. En este caso, lo que haremos es cambiar el estilo que teníamos por este : UITableViewCellStyleSubtitle que nos permite además de introducir un textLabel,una descripcción y una imagen distinta, para hacer la tabla más dinámica.
//METODO QUE INTRODUCE LOS VALORES DEL ARRAY EN LAS CELDAS
-(UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//RECUPERAMOS ARRAY SEGUN LA POSICION DE LA FILA
Personaje *fila = [[Personaje alloc] init];
fila=[items objectAtIndex:indexPath.row];
//CREAMOS LA CELDA
UITableViewCell *celda =[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
//COPIAMOS LA VARIABLE DEL ARRAY EN LA FILA
celda.textLabel.text=@"Celda Tabla";
celda.detailTextLabel.text=@"Detalle";
celda.imageView.image=[UIImage imageNamed:@"heroe2.jpg"];
celda.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
//DEVOLVEMOS LA CELDA
return celda;
}
Si os fijais bien en el código, donde antes sólo se podia escribir celda.textLabel, ahora hay otras propiedades como detailTextLabel o imageView e incluso le he metido el accessoryType que es la flechita de la derecha de la celda.
De las imágenes que os he comentado al principio, he usado una de ellas :
Hay muchas formas de hacerlo, pero como estamos de novatos, vamos a trabajar la programación, es decir vamos a crear una nueva clase de Objetive-C que contenga dos String (osea el nombre y la descripción) y una imagen. Esta es la clase contenedora que almacena los datos de cada celda para hacer el array de objetos que contenga todos los datos.Yo la he llamado Personaje, y hereda de NSObject
Primero va código del .h y después código del .m
#import@interface Personaje : NSObject @property (nonatomic,strong)NSString *Nombre; @property (nonatomic,strong)NSString *Descripcion; @property (nonatomic,strong)UIImage *imagen; @end #import "Personaje.h" @implementation Personaje @synthesize Nombre; @synthesize Descripcion; @synthesize imagen; @end
Entonces, ahora vamos a llenar el array de forma un poquito más dinamica como dije antes,en el ejercicio anterior recordemos que estaba en el método viewDidLoad, que es el método que se ejecuta nada más empezar la app.
Así que ahora creo una función que he llamado InsertarItems donde cargamos todos los objetos Personaje en el NSMutableArray y la llamamos desde este método.
- (void)viewDidLoad
{
[super viewDidLoad];
self.InsertarItems;
}
-(void)InsertarItems{
//RESERVAMOS MEMORIA PARA LOS ITEMS DEL ARRAY
items = [[NSMutableArray alloc] init];
//RESERVAMOS MEMORIA
Personaje* p1= [[Personaje alloc] init];
//RELLENAMOS CAMPOS DE LA CLASE PERSONAJE
p1.Nombre = [[NSString alloc] initWithFormat:@"Monkey D Luffy"];
p1.Descripcion = [[NSString alloc] initWithFormat:@"Futuro Rey pirata"];
p1.imagen = [UIImage imageNamed:@"heroe2.jpg"];
//REPETIMOS EL PROCESO CON TANTOS PERSONAJES COMO QUERAMOS METER
Personaje* p2= [[Personaje alloc] init];
p2.Nombre = [[NSString alloc] initWithFormat:@"Fhash"];
p2.Descripcion = [[NSString alloc] initWithFormat:@"Relámpago humano"];
p2.imagen = [UIImage imageNamed:@"heroe1.jpg"];
Personaje* p3= [[Personaje alloc] init];
p3.Nombre = [[NSString alloc] initWithFormat:@"Jonh Constantine"];
p3.Descripcion = [[NSString alloc] initWithFormat:@"Destructor de demonios"];
p3.imagen = [UIImage imageNamed:@"heroe3.jpg"];
Personaje* p4= [[Personaje alloc] init];
p4.Nombre = [[NSString alloc] initWithFormat:@"Super Man"];
p4.Descripcion = [[NSString alloc] initWithFormat:@"Clack Ken"];
p4.imagen = [UIImage imageNamed:@"heroe4.jpg"];
Personaje* p5= [[Personaje alloc] init];
p5.Nombre = [[NSString alloc] initWithFormat:@"Joker"];
p5.Descripcion = [[NSString alloc] initWithFormat:@"Payaso loco"];
p5.imagen = [UIImage imageNamed:@"villano1.jpg"];
Personaje* p6= [[Personaje alloc] init];
p6.Nombre = [[NSString alloc] initWithFormat:@"Doctor Connor"];
p6.Descripcion = [[NSString alloc] initWithFormat:@"Profesor universitario"];
p6.imagen = [UIImage imageNamed:@"villano2.jpg"];
Personaje* p7= [[Personaje alloc] init];
p7.Nombre = [[NSString alloc] initWithFormat:@"Don quijote Don Flamingo"];
p7.Descripcion = [[NSString alloc] initWithFormat:@"Shichibukai"];
p7.imagen = [UIImage imageNamed:@"villano3.jpg"];
//AÑADIMOS LOS PERSONAJES AL ARRAY
[items addObject:p1];
[items addObject:p2];
[items addObject:p3];
[items addObject:p4];
[items addObject:p5];
[items addObject:p6];
[items addObject:p7];
}
Ahora volvemos a la función cellForRowAtIndexPath, para cambiar la carga estática de los elementos por los elementos del objeto Persnaje que vamos a ver a acontinuación :
celda.textLabel.text=fila.Nombre;
celda.detailTextLabel.text=fila.Descripcion;
celda.imageView.image=fila.imagen;
Y este, es el resultado :
Disculpar el punto de frikismo, pero es lo que tiene ser informático...
Vamos a ir un paso más. Supongamos que queremos personalizar mucho más nuestra tabla, pues tendremos que ir al storyboard y arrastrar un componente UITableViewCell dentro de nuestro UITableView. Vamos a crear nuestra celda personalizada. Ahi insertaremos los dos labels y nuestra ImageView, e incluso yo he subido el ancho de nuestra celda, podemos personalizarlo a nuestro antojo.
El alto de celda se modifica mediante una función heightForRowAtIndexPath que también hay que implementar en el código:
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
//EN MI CASO HE PUESTO DE ALTO 85
return 85;
}
Creamos otra clase Objetive-C que herede de UITableViewCell con los elementos que pongamos dentro de la celda, yo la he llamado CeldaView. Esta celda es la que va a llevar las propiedades de nuestra celda que acabamos de crear y también necesitamos asignarlesa a la celda en el storyboard en el apartado CustomClass : CeldaView, y sobre todo muy importante en Identifier : IDCelda
*NOTA : En el pantallazo, me he equivocado al poner IDCelda, una pestaña más a la derecha en el inspector de propiedades aparece la opción Identifier, es ahi donde hay que poner el IDCelda.
Aqui va el código CeldaView.h y CeldaView, no lo explico porque es bastante intuitivo :
@interface CeldaView : NSObject @property (nonatomic,retain)IBOutlet IBLabel *Name; @property (nonatomic,retain)IBOutlet IBLabel *Description; @property (nonatomic,retain)IBOutlet IBImageView *img; @end #import "CeldaView.h" @implementation Personaje @synthesize Name; @synthesize Description; @synthesize img; @end
Hacemos las conexiones a los elementos de la forma habitual :
Para ir finalizando, volvemos al ViewController.m. Ahí es donde tenemos que configurar otra vez la función cellForRowAtIndexPath que es la que se encarga de llenar las filas, tenemos que cambiarla para que coja la celda que hemos creado en vez la que viene por defecto, quedaría así :
//METODO QUE INTRODUCE LOS VALORES DEL ARRAY EN LAS CELDAS
-(UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//RECUPERAMOS ARRAY SEGUN LA POSICION DE LA FILA
Personaje *fila = [[Personaje alloc] init];
fila=[items objectAtIndex:indexPath.row];
//ANTIGUA CELDA
/*CREAMOS LA CELDA
UITableViewCell *celda =[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
//COPIAMOS LA VARIABLE DEL ARRAY EN LA FILA
celda.textLabel.text=fila.Nombre;
celda.detailTextLabel.text=fila.Descripcion;
celda.imageView.image=fila.imagen;*/
CeldaView *celda =[tabla dequeueReusableCellWithIdentifier:@"IDCelda"];
//COPIAMOS LA VARIABLE DEL ARRAY EN LA FILA
celda.textLabel.text=fila.Nombre;
celda.detailTextLabel.text=fila.Descripcion;
celda.imageView.image=fila.imagen;
//DEVOLVEMOS LA CELDA
return celda;
}
Y por fín, este es el resultado :
|
Indice
|
Ejercicio anterior |
Siguiente ejercicio |
