CODEWITHSUNDEEP
iosuitableview
Thomas Einwaller
Thomas Einwaller

Reputation: 9063

Align Custom UITableViewCell content with Header

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.

Upvotes: 3

Views: 2430

Answers (6)

Maykon Meneghel
Maykon Meneghel

Reputation: 375

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

Upvotes: 0

Dmitry Miller
Dmitry Miller

Reputation: 224

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

Upvotes: 0

Papillon
Papillon

Reputation: 327

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

Upvotes: 0

pkamb
pkamb

Reputation: 34983

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

Upvotes: 0

Thomas Einwaller
Thomas Einwaller

Reputation: 9063

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

Upvotes: 0

Sanjay Mohnani
Sanjay Mohnani

Reputation: 5967

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

}

Upvotes: 1

Related Questions