Align Custom UITableViewCell content with Header

Question

I am creating a Table View with Static Cells. Some of the cells need a Custom Style because the contain a label on the left and a text field on the right.

I want to align the label on the left with the header of the section like the Basic cell style does but I can not find a way to do this.

Here is what my app currently looks:

My App

Here ist what the aligned labels in the Basic style look like:

System Preferences

I am using Auto Layout with Size Classes and Constraints.

Yah, I guess. Its not a best way to solve it. But once I have done this kind of thing as I didn't find any solution. Also only setting frame will not work in Autolayout mode, It may not change the frame of view sometimes. try setting `cell.titleLabel.translatesAutoresizingMaskIntoConstraints = YES;` for the view you want to change position. Alternatively also try to find it using autolayout, if there is any way? And tell me if you found it.:) — Samir, Apr 02 '15 at 09:23

score 1 · Answer 1 · answered Apr 02 '15 at 09:22

I also faced the similar issue once.

My requirement were,

1) To create a tableview which has a header and cells.

2) The header will have 3 labels, under those labels the cell will hold the corresponding data for the respective labels in the header.

To achieve above requirement I framed my labels in header and based on the labels position and size in the header I reframed the cell's labels according to header labels.

I implemented the above thing in TableView's delegate method - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

and reframed each cell's labels based on the header's position and size inside it.

For example -

-(void) tableView:(UITableView *) tableView willDisplayCell:(UITableViewCell *) cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
         // customize the cell just before it will be displayed

         // access section header
         UIView *sectionHeader = [tableView headerViewForSection:indexPath.section];

         // access section header label
         UILabel *headerLeftLabel = (UILabel *)[sectionHeader viewWithTag:HEADER_LABEL_TAG];

         // access cell's corresponding label which is to be aligned as the header's above label 
         UILabel *leftCellLabel = (UILabel *)[cell.contentView viewWithTag:CELL_LABEL_TAG];

         // align/ reframe the cells label with the corresponding label in the header
         [leftCellLabel setFrame: headerLeftLabel.frame];

         // similar for other labels

}

score 0 · Accepted Answer · answered Apr 10 '15 at 12:10

0

Thanks for you help, it seems like this has been resolved automatically by Xcode 6.3

answered Apr 10 '15 at 12:10

Thomas Einwaller

8,873
4
40
55

I found another good post about that topic: http://coffee-coding.com/ios7-vs-ios8-margin-constraints-differ/ – Thomas Einwaller Sep 21 '15 at 13:13

score 0 · Answer 3 · edited May 23 '17 at 11:55

0

You'll likely be able to use a basic / default UITableViewCell style, then set a Text Field as the cell's accessoryView.

Using the basic style will automatically line up the section header and the text in each cell.

Put a UITextField inside a UITableViewCell's AccessoryView

edited May 23 '17 at 11:55

Community

1
1

answered Sep 20 '15 at 19:45

pkamb

33,281
23
160
191

score 0 · Answer 4 · edited May 23 '17 at 11:55

The leading space of section header or system defined Right Detail style cell, is different under different screen orientations. It's 16 points under portraint mode, and 20 points under landscape mode. While the trailing space of the Detail label, is constantly 15 points.

Currently what I did is to create outlets for the leading anchor constraints of each views in the custom cells, and change their constants in the following method:

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews();
    // 16 in portrait mode, and 20 in landscape mode, act as the baseline
    let spacing = titleLabelOfRightDetailCell.frame.origin.x; 
    // leadingAnchorConstraints is an array of views within custom table view cells that need to be left aligned
    for constraint in leadingAnchorConstraints {
        constraint.constant = spacing;
    }
}

This way I can make sure all table view cells are left aligned, either in portrait mode or landscape mode.

EDIT:

Found a more elegant solution: Matching left alignment of custom & standard UITableViewCell types

score 0 · Answer 5 · edited May 23 '17 at 10:29

0

please look at the following post. Matching left alignment of custom & standard UITableViewCell types The problem and solution is outlined

edited May 23 '17 at 10:29

Community

1
1

answered Jun 23 '16 at 23:09

Dmitry Miller

224
2
5

score 0 · Answer 6 · answered Sep 28 '22 at 17:36

To resolve this, I did the follows:

In my custom UITableViewCell I added the layoutSubviews function as follows:

override func layoutSubviews() {
  super.layoutSubviews()
  contentView.frame = CGRect(x: CGFloat(self.indentationLevel), y: 0, width: (self.frame.width - 2 * CGFloat(self.indentationLevel)), height: self.frame.height)
}

And in cellForRowAt I did it like this:

cell.indentationLevel = 20

Align Custom UITableViewCell content with Header

6 Answers6