Bordes redondos TableViewCell IOS

IOS cuenta con un componente llamado TableView el cual es similar al ListView de Android y Windows Phone, por defecto los items de éste tienen los bordes cuadrados y en algunas ocasiones puede que los necesites redondos como se muestra en la siguiente imagen

Screen Shot 2015-12-26 at 17.04.07.png

Este efecto lo podemos lograr agregando unas cuantas líneas de código, antes que todo se recomienda tener un conocimiento previo del uso del TableView.

En su proyecto deben tener una clase que herede de TableViewCell en mi caso se llama OptionTableViewCell

OptionTableViewCell.h

Acá tendremos los IBOutlet vinculados a nuestra celda del TableView


@interface OptionTableViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *imgIcono;
@property (weak, nonatomic) IBOutlet UILabel *lblTitle;

@end

OptionTableViewCell.m

En la implementación vamos a agregar un método llamado “setFrame” de manera que se va sobre escribir y le indicaremos lo siguiente:

  1. En la primera línea la posición en x donde debe ubicarse.
  2. En la segunda línea el largo que debe tener.
  3. En la tercera línea pasamos al padre el objeto CGRect con los nuevos valores.

@implementation OptionTableViewCell

- (void)awakeFromNib {
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

- (void)setFrame:(CGRect)frame {
    frame.origin.x += 15;
    frame.size.width -= 2 * 15;
    [super setFrame:frame];
}

@end

Una vez que se ha agregado debemos de indicar que la celda de nuestro TableView será de la clase que hemos creado; para ello vamos al Storyboard, seleccionamos el TableViewCell y elegimos el tipo de clase que será.

Screen Shot 2015-12-26 at 17.19.21

Ahora vamos abrir la implementación del TableViewController y en la función ” – (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath” vamos a agregar lo siguiente antes de [return cell] de manera que quede así


- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ...
    [cell.layer setCornerRadius:35.0f];

    return cell;
}

Como se puede observar estamos indicando que el layer de la celda debe tener un cornerRadius de un determinado valor, en este caso le enviamos 35.0f sin embargo ustedes pueden enviar el que deseen para ajustarlo a sus necesidades.

Ahora si ejecutan la aplicación van a observar que las bordes de las celdas del TableView están redondas, en Github pueden encontrar un ejemplo, 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