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];
        }
    }

call your function in cellforrowat indexpath, it suely works — Anbu.Karthik, Mar 02 '16 at 07:50
No no i am telling you currently you getting on left side top or leftside bottom? — jogshardik, Mar 02 '16 at 07:51
UIView * whiteRoundedView = [[UIView alloc]initWithFrame:cell.bounds]; have you try this? — jogshardik, Mar 02 '16 at 07:57
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105098/discussion-between-abhiram-and-jogshardik). — AbhiRam, Mar 02 '16 at 07:57

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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

You can add a view for that which will reside on the bottom of each cell. And you can set the center of the roundedView only horizontally and vertically at origin, so it will create the idea of a cell space — E-Riddie, Mar 02 '16 at 09:55
i am very new for this technology please provide some code for those — AbhiRam, Mar 02 '16 at 09:56
@AbhiRam I edited the answer to match your requirements, but since you are new here, I did it for you, but you must try something out yourself and ask another question if you don't succeed. Hope this helps, and you can upvote and accept it. — E-Riddie, Mar 02 '16 at 10:11
ok but except cell remaining all color must be black but ur screen not seemms like that and i hope u understand — AbhiRam, Mar 02 '16 at 10:12
except cell remaining every empty space color must be black please do like that then everything fine — AbhiRam, Mar 02 '16 at 10:14
Then you just set the contentView background color and remove spaceView — E-Riddie, Mar 02 '16 at 10:17
no not working if u don't mind may i send my sample project file,it just small one — AbhiRam, Mar 02 '16 at 10:21
really there is small problem is coming in my app with update ur code — AbhiRam, Mar 02 '16 at 10:25
please just see https://drive.google.com/file/d/0B05NQoG9RAmwaHhweVYxbXNEbk0/view?usp=sharing — AbhiRam, Mar 02 '16 at 10:26
in ViewController5 ur code i updated please see once and i ma not understand why problem is coming — AbhiRam, Mar 02 '16 at 10:26
Yeah because you have very much different things there, which are totally another matter. Check the implementation file [here](https://codeshare.io/woj4l) — E-Riddie, Mar 02 '16 at 10:34

score 0 · Answer 2 · edited Apr 01 '18 at 11:34

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.

Amit Tandel · Answer 3 · 2016-03-02T08:24:15.230

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;
}

Why do you need that method?. try this sample code in separate project and see id this is what you are looking for. I dont think willdisplay method is required here. — Amit Tandel, Mar 02 '16 at 08:16
this is my sample project here i want to set space b/w each cell and want to set corner radius please see this once — AbhiRam, Mar 02 '16 at 08:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105099/discussion-between-abhiram-and-amit-tandel). — AbhiRam, Mar 02 '16 at 08:40