UITableViewCell behave differently in iOS7 and iOS8 simulator using xcode6 beta6 interface builder

Question

Please see below 3 table view cells in the same app, the height of the cell is 54 in interface builder, the border is created using CAShapeLayer in code with a height of 44. Since I switched from xcode5 to xcode6 during the project development, so part of the uitableviewcell is created in xcode5 and part in xcode6, and there are cells that are created in xcode5 and later changed in xcode6.

image1. created using xcode5, the desired style

image2. created using xcode6 beta6, displayed in iOS8 simulator, disclosure indicator misplaced, and text are offseted

image3. the same cell of image2 using xcode6 beta6, but running in iOS7.1 device, disclosure indicator misplaced

I compared all the settings of the uitableviewcell in interface builder, and find NO differences.

And I compared the source file of xxx.storyboard, and finally got the different point:

case1: the 'tableViewCell' tag, the xcode5 version is:

<tableViewCell contentMode="scaleToFill" selectionStyle="none" accessoryType="disclosureIndicator" indentationWidth="10" reuseIdentifier="xxCell" rowHeight="54" id="far-Kn-fRP" customClass="xxCell">
  <rect key="frame" x="0.0" y="119" width="320" height="54"/>

case2: the 'tableViewCell' tag, the xcode6 beta6 version is below, NOTICE, the < rect key="frame" ...> is missing when creating a new uitableviewcell

<tableViewCell contentMode="scaleToFill" selectionStyle="none" accessoryType="disclosureIndicator" indentationWidth="10" reuseIdentifier="xxxCell" rowHeight="54" id="eav-sl-Yrd" customClass="xxxCell">

case3: the scenario in image2 and image3 is a uitableviewcell created in xcode5 with default height of 44, and modified in xcode6 beta6 to change the height to 54, and the source is:

<tableViewCell contentMode="scaleToFill" selectionStyle="none" accessoryType="disclosureIndicator" indentationWidth="10" reuseIdentifier="xxxCell" rowHeight="54" id="eav-sl-Yrd" customClass="xxxCell">
  <rect key="frame" x="0.0" y="119" width="320" height="44"/>

As a conclusion, it seems that xcode6 beta6 is not handling the < rect key="frame" ...> tag in the .storyboard file, and will cause misplace of uitableviewcell.

Added: In all of the above scenarios, the code has implemented heightForRowAtIndexPath, and returned 54.

My Questions are:

1. I didn't find how to place disclosure indicator at the same place as xcode5

2. Is the missing of < rect key="frame" ...> a bug or replaced by other tags in xcode6? Possible related to the cell auto sizing feature in iOS8?

3. Is there other solutions to make uitableviewcell right? I'm currently manually modifying .storyboard file to add < rect key="frame" ...> tag for each newly created uitableviewcell using xcode6 beta6, and it is error prone.

Thanks.

Alexis

How is the content of the cell constructed? Is everything inside the contentView? Are there constraints? Are those constraints connected to the cell or to the contentView (that's very important)? Also, are you aware of the new iOS 8 automatic row height feature? It might be affecting the vertical layout of the cell. – Spang

"I'm currently manually modifying .storyboard file, and it is error prone." It sounds to me like you're constructing the cell in a faulty way. – Spang

@Spang Thanks for your quick comment. The 2 labels are placed as subview of 'contentView', and the constraints are set relative to 'superView' (the contentView in this case) for leading and centerY, with fixed width and height. My last word "I'm currently manually modifying .storyboard file" means that I had to manually add < rect key="frame" ...> for the uitableviewcell created using xcode6 beta6 interface builder. The 'new iOS 8 automatic row height feature' is new to me, I'll check that. Thanks. – Alexis

@Spang thanks for the information of 'new iOS 8 automatic row height feature', I checked it just now, and it is awesome. But my project needs to support iOS7, so I had implemented heightForRowAtIndexPath for all uitableview already. And the examples in my questions return 54 in funciton: heightForRowAtIndexPath – Alexis

Answer 1

About misplacing your border CAShapeLayer - you need to override layoutSubviews function of your custom cell class and update frame of layer accordingly.

Also don't use cell's bounds property, because it is a different than frame size:

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.borderLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
}

About offset for the disclosure indicator - I can't reproduce issue from your screenshot...

Disintegrate

Thanks for your comment, but the issue here is the misplace of the text and disclosure indicator, not the CAShapeLayer. BTW, I never see this issue after I use xcode6.1 – Alexis