iOS 7.1 Uitableviewcell Content Overlaps with Ones Below

iOS 7.1 UitableviewCell content overlaps with ones below

The issue has to do with the height of your cell. It isn't going to dynamically adjust that for you.

You'll probably notice that as you scroll and the view above goes out of view the overlapping text will disappear with it.

If you are wanting your text to clip at a certain height, then you need to set the number of lines, rather than setting it to 0 since that will let it continue forever.

The lineBreakMode won't take effect since it isn't stopped.

Optionally you could try to set clipping on the contentView to make sure all subviews stay inside.

Depending on the end result you want, you could do dynamic heights and change based on the content. There are a bunch of SO questions related to doing this.

Update - clipping the contentView

I'd have to try it out myself, but in lieu of that, here are a couple links related to clipping the contentView:

  • stop the clipping of contentView - you'd actually want to do the opposite.
  • adding subview - looks similar to what you are trying to do.

Looks like this works:

cell.clipsToBounds = YES;

Custom Cells Overlapping in UITableView

You should make sure that the height of your cell is the RowHeight of your UITableView control.

e.g.,

Cell is designed from XIB, and the height of the view is 30, then make sure:

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 30.0f;
}

Custom Cells Overlapping in UITableView

You should make sure that the height of your cell is the RowHeight of your UITableView control.

e.g.,

Cell is designed from XIB, and the height of the view is 30, then make sure:

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 30.0f;
}

How to stop UITableView from clipping UITableViewCell contents in iOS 7

It looks like the view hierarchy changed slightly in iOS 7 for table view cells.

You can try setting the clips to bounds on the contentView's superview:

[cell.contentView.superview setClipsToBounds:NO];

If you add the following to your sample code and run on ios7 vs ios6, you'll see there's an additional view between the cell view and content view:

[cell.contentView.superview setClipsToBounds:NO];
NSLog(@"%@", cell.contentView.superview);
NSLog(@"%@", cell.contentView.superview.superview);
NSLog(@"%@", cell);

if (self.view.clipsToBounds) {
NSLog(@"Master clips");
} else {
NSLog(@"Master no clip");
}

Adding a subview larger than cellHeight to a UITableViewCell?

I seems that the tableView renders its cell from bottom to top, so the cells above one cell overlap that one cell. To avoid this, you'd have to set the backgroundColor of all cells to +[UIColor clearColor] so that you won't see those overlap problems.

But setting the backgroundColor to clear in -tableView:cellForRowAtIndexPath: does not make any sense. UIKit does a lot of stuff with the cell before it's drawn, so does it reset the backgroundColor property of the cell.

What we need to do is setting the backgroundColor in a later state. Luckily there is this -[UITableViewDelegate tableView:willDisplayCell:forRowAtIndexPath:] which we can implement like this:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
cell.backgroundColor = [UIColor clearColor];
}

Now we're setting the backgroundColor just before the cell is drawn an this turns out to be working.

UITableViewCell don't change layout when iOS larger text is used

Many things have been made for iOS to assist with the Dynamic Type implementation in the table view cells ⟹ automatic cell sizing for instance.

I reproduced the initial problem in a blank project as follows:
Sample Image

With no extra code and only due to the iOS native implementation, notice that:

  • There's a reordering of the labels when the first accessibility step is reached.
  • The system accessory element size changes according to the Dynamic Type using.
  • There's an automatic row height resizing.

[...] is there a way to not allow iOS to change the layout of my UITableViewCells?

A solution may lead to the creation of your own custom table view cell as follows:

class MyTableViewCell: UITableViewCell {

@IBOutlet weak var myTitle: UILabel!
@IBOutlet weak var myDetail: UILabel!

static let reuseIdentifier = "myReuseIdentifier"

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
setUpElementsAndConstraints()
}

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setUpElementsAndConstraints()
}

private func setUpElementsAndConstraints() {
//Custom your labels and their constraints in here.
//For the demo, everything is hard coded within the Interface Builder.
}
}
  1. Add your labels with the property adjustsFontForContentSizeCategory to false in order to keep their initial font size.

  2. Create your own 'chevron image' that won't be resized as the system one:

     override func tableView(_ tableView: UITableView,
    cellForRowAt indexPath: IndexPath) -> MyTableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: MyTableViewCell.reuseIdentifier,
    for: indexPath) as! MyTableViewCell

    let accessoryImageFrame = CGRect(x: 0.0, y: 0.0,
    width: 40.0, height: 40.0)
    let accessoryImageView = UIImageView(frame: accessoryImageFrame)
    accessoryImageView.image = UIImage(named: "MyChevron")

    cell.accessoryView = accessoryImageView

    return cell
    }
  3. Define a static row height in the table view:

     override func tableView(_ tableView: UITableView,
    heightForRowAt indexPath: IndexPath) -> CGFloat { return 50.0 }
  4. Don't forget to set up your constraints that may be updated according to the text sizes settings thanks to the traitCollectiondidChange method... even if you don't want to use the Dynamic Type feature yet. /p>

Finally, I get this result that never changes whatever the text sizes in the settings: br>Sample Image

Following this rationale, your UITableViewCell layout doesn't change when iOS larger text is used. (I know, my custom chevron isn't really nice )

How can the content of a UITableViewCell be updated properly?

The most straightforward approach is to update the data that your UITableView is drawing from (i.e. the array of data that you're populating each cell from has been updated to reflect your text change), then reload the specific cell of the UITableView:

let indexPath = IndexPath(row: 0, section: 0)
tableView.reloadRows(at: [indexPath], with: .automatic)


Related Topics



Leave a reply



Submit