UITableViewCell
Uno de los componentes de la clase UITableView son las celdas que componen esa vista de tabla.
Es decir, un objeto de vista de tabla, tiene tras de sí la clase UITableView, y este objeto de vista de tabla, está compuesto de una celda que se «auto-regenera» a medida que el usuario hace scroll por la misma.
Por defecto podemos seleccionar 4 estilos de celda diferentes, pero en esta entrada os voy a enseñar cómo podéis añadir a vuestro proyecto una nueva celda totalmente modificable por vosotros.
La celda se crea en el método tableView: cellForRowAtIndexPath: esto sería la creación de una celda por defecto:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//El método dequeueReusableCellWithIdentifier: devuelve un objeto de vista de celda con un identificador
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CellIdentifier"];
//Mediante un condicional se comprueba si la celda existe, si no existe se crea una nueva celda con un identificador
if (cell == nil) {
//Aquí es dónde podemos seleccionar el estilo de la celda, tenemos 4 estilos a elegir
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"CellIdentifier"];
}
//Después de crear la celda, podemos definir atributos como: titulo, subtitulo, disclosure, imagen, etc.
cell.textLabel.text = [meses objectAtIndex:indexPath.row];
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
cell.imageView.image = [UIImage imageNamed:@"madsimp.jpeg"];
cell.detailTextLabel.text = @"Sin Descripción";
//Por último el algoritmo devuelve una celda, nuestra celda, tal y como requiere el método
return cell;
}
Si queréis «jugar» con los diferentes estilos de celda, probar a cambiar este trozo de linea de código del método anterior:
UITableViewCellStyleSubtitle
Podéis cambiar el estilo de la celda con estas variantes:
UITableViewCellStyleDefault UITableViewCellStyleValue1 UITableViewCellStyleValue2
Creando una celda personalizada
Si queremos crear una celda personalizada, es decir que podamos poner una imagen que ocupe toda la celda, un fondo, varias imágenes, etc. debemos crear un contenedor propio.
Lo primero que debemos hacer es hacer click con el botón derecho de nuestro ratón en cualquier sitio de nuestro grupo de carpetas y archivos, y elegir: «New File…»
A continuación selecciona «Cocoa Touch Class»
Pon nombre a tu celda, indica que es una subclase de UITableViewCell, y esto es muy importante: haz click sobre «Also create XIB file» pues es en esta vista de archivo .XIB dónde vamos a crear nuestra celda personalizada de una forma muy sencilla, por último selecciona el dispositivo para el cual estás creando la celda y el lenguaje de programación en el que estés creando tu proyecto.
xCode te pedirá dónde quieres guardar la clase recién creada, por defecto te aparecerá el proyecto en el que estás trabajando, y ahí debes guardarlo, importante hacer click en el nombre de tu proyecto abajo dónde pone «Targets», dale a «Create»
En el grupo de carpetas y archivos de tu proyecto verás el archivo de clase recién creado.
Si haces click en el archivo .xib, verás que tienes todo un lienzo para colorear, o lo que es lo mismo, aquí es dónde debes crear tu celda personalizada con los objetos que quieras, como ejemplo yo he creado la siguiente celda.
Cuándo tengas la celda terminada, debes crear conexiones, crea una propiedad por cada elemento que hayas incluido dentro de tu celda, después conecta código con objetos.
Bien, pues ya tenemos nuestra propia celda, ahora sólo tenemos que incluir datos en la misma, para ello debemos modificar el método que hemos visto anteriormente tableView: cellForRowAtIndexPath: debe quedar algo como esto:
-(UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//Esto no cambia
static NSString *CustomCellIdentifier = @"CustomCellIdentifier ";
//Aquí es dónde "llamamos" a la celda que hemos creado
MiCeldaPersonalizadaTableViewCell *cell = (MiCeldaPersonalizadaTableViewCell *)[tableView dequeueReusableCellWithIdentifier: CustomCellIdentifier];
if (cell == nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"MiCeldaPersonalizadaTableViewCell" owner:self options:nil];
cell = (MiCeldaPersonalizadaTableViewCell *)[nib objectAtIndex:0];
}
//Añadimos los datos a cada uno de los elementos de nuestra celda
cell.disclosureImage.image = [UIImage imageNamed:@"miImagenDisclosure"];
cell.titulo.text=@"Nombre";
cell.subtitulo.text=@"Descripcion";
cell.imagen.image = [UIImage imageNamed:@"miImagenImagen"];
cell.fondoImagen.image=[UIImage imageNamed:@"miImagenFondo"];
return cell;
}
Y esto es todo, espero que hayas aprendido cómo crear asombrosas celdas para nuestras vistas de tabla, ahora sí se mostrarán escandalosamente sexis 😉
2 Comments