Adding Margin to UITableViewCell

Question

I am trying to achieve a view I mocked out on sketch. I've replicated it on Android cause I'm really good on that platform. I'm good on iOS, but the UI is kind of my weak point.

I extended a UIViewController and on my StoryBoard have the top to be a view and the bottom a tableview. The problem I'm having is centering the UITableViewCell to look like that in the app itself. Below is the solution I've tried. But, it just squeeze it all to the top. NB. I use UIView to draw those Tiny Lines in the UITableViewCell

func configureTableView() {
    //First One I tried then later commented it out
    loanStateTable.rowHeight = UITableViewAutomaticDimension
    loanStateTable.scrollToNearestSelectedRowAtScrollPosition(UITableViewScrollPosition.Middle, animated: true)

    //Second One I tried
    var edgeInset = UIEdgeInsets(top: 16, left: 16, bottom: 0, right: 16)
    loanStateTable.contentInset = edgeInset
}

And the storyboard view

Any help would be appreciated. Thanks

Output:

can you please add a screen shot of the output you are getting. on simulator running cmd+s it will save screen shot to desktop. — hasan, Aug 02 '15 at 07:59
I've added the output. And yes, I want them to be centered vertically — Tonespy, Aug 02 '15 at 08:03
@hasan83 I've updated the question. I think my constraints are making it bad and shift — Tonespy, Aug 02 '15 at 08:12
Have you created the cell in a syoryboard? Show that. Also, explain what sections and cells you have — Wain, Aug 02 '15 at 08:15
I'd look at simply making the table view smaller to create the edge insets and adding space into the cell content — Wain, Aug 02 '15 at 08:26

ezcoding · Accepted Answer · 2015-08-02T09:49:56.310

Leave everything as it is. Don't try to inset your whole TableView. Create a container View inside your TableViewCell instead:

Set the row height:

Also in code:

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 160.0
}

Specify the right distance to the edges:

Now add the elements and specify the constraints as well:

Don't forget to set the cellIdentifier:

The result in the simulator:

If you want to look at it under the hood: I've uploaded it as github project

hasan · Answer 2 · 2015-08-02T08:54:24.693

I don't know if I understood your question. I thought that your question was to centre vertically those two rows on screen. my code do that.

Approach:

I usually play this by adding extra cell(s) at the start and/or end of the UITableView

#define cell_height 100

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return array.count + 1;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.row > 0)
        return cell_height;
    else
    {
        CGFloat tableHeight = tableview.frame.size.height;
        CGFloat contentHeight = array.count * cell_height;
        CGFloat whiteAreaHeight = tableHeight - contentHeight;
        if (whiteAreaHeight > 0)
            return whiteAreaHeight/2.0;
        else
            return 0;
    }
}

- (UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
    if (indexPath.row > 0)
    {
       NSInteger realArrayIndex = indexPath.row - 1;
       // your existing code here
       return cell;
    }
    else
    {
       //return empty cell. add it to the storyboard with different identifier and get it.
    }
}

I hope that helps!

I tried your answer out and it did worked out too...Thanks – Tonespy Aug 02 '15 at 09:47 — Tonespy, Aug 02 '15 at 09:47

LuckyStarr · Answer 3 · 2018-02-08T18:01:40.787

From your screenshots it seems that you have a problem with the auto layout system and dynamic cell. For this is suggest to read this very good answer on stack overflow that explain how to build dynamic cells with auto layout. An important thing to consider is that creating views with auto layout is very fast and intuitive but it expensive from a performance point of view. This problem is accentuated for the UITableView where the scroll can result not smoothly. If you have simple cell (only few views and a view hierarchy with few levels) it can be ok but to the auto layout manager I suggest to:

specify a value for the property estimatedRowHeight if all the cells have the same height
implement the method tableView(_:estimatedHeightForRowAtIndexPath:) of the UITableViewDelegate if the cells have different heights.

Regarding the problem with margins I suggest to nest a UIView inside the contentView of the cell and use it as container for all the other views of the cell. In this way you can add left and right margins between this view container and the contentView so that you can center it.

Adding Margin to UITableViewCell

3 Answers3

Linked