How to set corner radius for TableView cells in ios

Question

Hi i am new for iOS and in my app i am using TableList and i want to set the tableList cell corner radius as 3.0. Here is my code. It is only applying the corner radius on left corner instead of all corners.

my code:-

- (CGFloat)tableView:(UITableView *)aTableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    return 75;
}

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

        static NSString *simpleTableIdentifier = @"MyCell";

        Cell = (MyTripsCell *)[MaintableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
        if (Cell == nil)
        {
            NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"MyTripsCell" owner:self options:nil];
            Cell = [nib objectAtIndex:0];
        }

        Cell.layer.cornerRadius = 0.0;
        Cell.selectionStyle = UITableViewCellSelectionStyleNone;

        return Cell;
    }


    -(void) tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *) cell forRowAtIndexPath:(NSIndexPath *)indexPath{

        cell.contentView.backgroundColor = [Bg colorWithHexString:@"EEEEEE"];
        UIView * whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(0, 12, MaintableView.frame.size.width, 70)];

        whiteRoundedView.layer.backgroundColor = [Bg colorWithHexString:@"FDFDFD"].CGColor;

        whiteRoundedView.layer.masksToBounds = YES;
        whiteRoundedView.layer.cornerRadius = 3.0;
        whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, -1);
        [cell.contentView addSubview:whiteRoundedView];
        [cell.contentView sendSubviewToBack:whiteRoundedView];

        if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
            [cell setSeparatorInset:UIEdgeInsetsZero];
        }
        if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
            [cell setPreservesSuperviewLayoutMargins:NO];
        }
        if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
            [cell setLayoutMargins:UIEdgeInsetsZero];
        }
    }

Answer 1

Possible reason can be:

Your cell height is 75. and you are writing this:

UIView * whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(0, 12, MaintableView.frame.size.width, 70)];

See the actual CGRectMake

CGRect CGRectMake ( CGFloat x, CGFloat y, CGFloat width, CGFloat height );

In your case y = 12. It's superview's according to cell's coordinate its (0,0,width,height) when you put a subview (your whiteRoundedView ) that is (0, 12, width, height) its lower portion will not be displayed. As its out of cells viewport. Try to understand these coordinate system.

EDIT:

Change your view code to this:

UIView * whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(0, 3, cell.frame.size.width, 69)];

and set corner radius to 10.

whiteRoundedView.layer.cornerRadius = 10.0;

Run the app and see the difference.

Answer 2

Issue

The code is okay as it doing the corner radius at every corner but the problem is that you are actually moving the origin of the view to y=12. The view has the same width as the tableView, and it has the corner radius you are just not seeing this as the view goes out of screen on the right side.

Solution

In order to have your view in the middle of the screen you set its center to the contentView's center. And work with the width to set padding.

Your code solution:

// Using this width and setting the view to the center will give you padding of 12 pixels on left and right
NSInteger width = MaintableView.frame.size.width - 24;
UIView * whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, width, 70)];
whiteRoundedView.center = cell.contentView.center;

whiteRoundedView.layer.backgroundColor = [Bg colorWithHexString:@"FDFDFD"].CGColor;

whiteRoundedView.layer.masksToBounds = YES;
whiteRoundedView.layer.cornerRadius = 3.0;
whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, -1);
[cell.contentView addSubview:whiteRoundedView];
[cell.contentView sendSubviewToBack:whiteRoundedView];

if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
    [cell setSeparatorInset:UIEdgeInsetsZero];
}
if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
    [cell setPreservesSuperviewLayoutMargins:NO];
}
if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
    [cell setLayoutMargins:UIEdgeInsetsZero];
}

Anyway I can provide some improvement to that code by not adding that view everytime that the cell is being dequeued. Also note that setting maskToBounds = YES for this view, will cause your shadow to not be shown (see here)

My Code Solution (Edited)

UIView *roundedView = [cell.contentView viewWithTag:100];
if (roundedView == nil) {
    // Add some padding to the view in order to see the shadow
    NSInteger spacingBothHorizontal = 2;
    CGRect customizedFrame = CGRectMake(spacingBothHorizontal/2, 0, CGRectGetWidth(cell.contentView.frame) - spacingBothHorizontal, CGRectGetHeight(cell.contentView.frame) - 20);
    roundedView = [[UIView alloc] initWithFrame:customizedFrame];
    
    // Layer customizations
    roundedView.layer.cornerRadius = 10.0f;
    roundedView.backgroundColor = [UIColor redColor];
    roundedView.layer.shadowOffset = CGSizeMake(-1, -1);
    roundedView.layer.shadowOpacity = 2.0;
    roundedView.layer.shadowColor = [UIColor blueColor].CGColor;
    roundedView.tag = 100;
    
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
        [cell setSeparatorInset:UIEdgeInsetsZero];
    }
    if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
        [cell setPreservesSuperviewLayoutMargins:NO];
    }
    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
    
    // Add it to view
    [cell.contentView addSubview:roundedView];
    [cell.contentView sendSubviewToBack:roundedView];
    cell.contentView.backgroundColor = [UIColor blackColor];
}

Result

Answer 3

This is the sample code. Is this you are looking for?

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"UITableViewCell"];
    }
    if ([cell viewWithTag:100] == nil)
    {
        UIView* roundedView = [[UIView alloc]initWithFrame:CGRectInset(cell.bounds, 2, 2)];
        roundedView.backgroundColor = [UIColor lightGrayColor];
        roundedView.tag = 100;
        roundedView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [cell insertSubview:roundedView atIndex:0];
        roundedView.layer.cornerRadius = 5;
        roundedView.layer.masksToBounds = true;
    }

    return cell;
}

In your case, use following and remove willdisplaycell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil) {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

    }
    if ([cell viewWithTag:100] == nil)
    {
        UIView* roundedView = [[UIView alloc]initWithFrame:CGRectInset(cell.bounds, 2, 2)];
        roundedView.backgroundColor = [UIColor lightGrayColor];
        roundedView.tag = 100;
        roundedView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [cell insertSubview:roundedView atIndex:0];
        roundedView.layer.cornerRadius = 5;
        roundedView.layer.masksToBounds = true;
    }
    cell.textLabel.text = @"Hello world";

    return cell;
}

- (CGFloat)tableView:(UITableView *)aTableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    return 75;
}