UITableView rendering differences between iOS 6 and iOS 8

Question

I am in the process of updating an old app from XCode 4.6 to 6.3 and have run into a difference in how my custom table view cells are rendered between iOS 6 and iOS 8 (well the change can be seen in iOS 7 as well).

Here are 2 screen shots from Xcode 4.6/iOS 6.1 simulator:

Here are the equivalent Xcode 6.3/iOS 8.1 simulator:

(As background, the Preferences screen is a grouped UITableView with 3 groups and 1 element per group. The Units screen is a single sectioned UITableView with 3 elements. And the "Note" on the Units image is just a plain view)

The difference I didn't expect (and don't like) is that in iOS 8, the custom table cells have expanded horizontally to cover the entire width of the screen, and have also lost their rounded corners.

I have been looking around to see if/how I can make the iOS 8.1 version look more like the 6.1 version, but so far have failed.

Is it possible to easily get back the layout I want? And if so, where should I be looking to make changes?

Answer 1

One possible approach is to set tableView.backgroundColor and your custom cell's contentView.backgroundColor to clearColor (it can be done via the interface builder as well). Then add a background view to your custom cell. You can give it rounded corners and add space around it.

This is what it looks like at runtime (the blue background belongs to the view behind a tableView):

This is more tricky though when we deal with a group of cells on your right screenshot. There the first cell has to have rounded corners at the top, the last one has to have rounded corners at the bottom, and the middle one shouldn't have rounded corners. I guess, it can be done (you could take indexPath into account when configuring the cell), but it takes a bit more work.

P.S. I'm sorry for the size of images. I don't know how to restrict it.