0

If a Table View Controller is created using Interface Builder, on iPhone X the lowest visible cell will be obscured by the home screen indicator, and the cell's corners clipped by the curved screen, by default - see screenshot below.

If I use a View Controller and insert a Table View, then set it up by hand, I can use the bottom layout guide with the table view, to ensure this obscuring and clipping behavior doesn't happen, i.e., by not allowing the table view to extend into the curved part of the screen.

I'm upgrading a few legacy apps, and I'd prefer not to have to convert the existing Table View Controllers into View Controllers if possible. How can I make Table View Controllers created with Interface Builder behave?

According to the Apple docs, by using the standard interface elements this shouldn't be a problem.

Inset essential content to prevent clipping. In general, content should be centered and symmetrically inset so it looks great in any orientation and isn't clipped by corners or the device's sensor housing, or obscured by the indicator for accessing the Home screen. For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context.

iPhone X screenshot

nikkumang
  • 1,615
  • 2
  • 17
  • 34
  • 1
    Have you looked at the Safe Area guides? https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area – Kunal Shah Nov 06 '17 at 02:52
  • I have looked, but haven't found anything that seems useful. Can you be more specific? – nikkumang Nov 06 '17 at 03:16

2 Answers2

0

If you enabled automaticallyAdjustsScrollViewInsets, table view will be upon home indicator when you scroll to bottom. I think this is what Apple wants, take advantage of the full screen at the same time every elements can be interacted.
If you want cells never obscured or clipped in UITableViewController. I suggest you use plain style table view, set contentInset to make section footer hovered under home indicator. I tried this, It worked but looked ugly. Like this: enter image description here

Lumialxk
  • 6,239
  • 6
  • 24
  • 47
  • From the doc I linked to, I don't think they want that bottom row clipped. Edited my question and added the relevant quote. – nikkumang Nov 06 '17 at 03:15
  • @NicholasGresham Actually many apps extended under home indicator, for example, iMessage. I think it's a solution for views that only have a list without tab bar. – Lumialxk Nov 06 '17 at 03:24
  • Oh, really? Thanks, I will do some more investigation. I haven't had a chance to see a real device yet. – nikkumang Nov 06 '17 at 03:28
0

In the end, I converted the Table View Controllers into View Controllers and added a bottom alignment constraint to the Table View

nikkumang
  • 1,615
  • 2
  • 17
  • 34