1

I enabled "Use Safe Area Layout Guides" in the storyboard to support iPhone X interface. I have few UIButtons at the top that are clipped in portrait mode. What do I need to do to avoid clipping?

I have autolayout constraint set as button.Top = superview.Top. How do I modify the constraint in the storyboard so that the button comes down to the safe area?

The button is a subview of a container UIView which is fullscreen on iPhone X.

Deepak Sharma
  • 5,577
  • 7
  • 55
  • 131

1 Answers1

2

Modify your constraint from button.Top = superview.Top to button.Top = Safe Area.Top.

In the storyboard, select your constraint, and use the dropdown to select "Safe Area".

xcode storyboard set safe area constraint

nathangitter
  • 9,607
  • 3
  • 33
  • 42
  • I do not see the Safe Area option as the button is a subview of another UIView, not Safe Area. – Deepak Sharma Oct 23 '17 at 15:31
  • In that case, modify the constraint of the container `UIView` instead. – nathangitter Oct 23 '17 at 15:42
  • Why? I want the container UIView to be full screen. – Deepak Sharma Oct 23 '17 at 15:45
  • @DeepakSharma You'll probably need to edit your question with more information. Depending on your situation, you might need to refactor your view hierarchy to get the behavior you want. If you post the details of your current layout, I can try to give some suggestions. – nathangitter Oct 23 '17 at 15:47
  • There is no reason to refactor views just because of iPhone X. – Deepak Sharma Oct 23 '17 at 16:02
  • @DeepakSharma One option is to constrain the buttons to the safe area instead of to their superview. To do this, remove the current constraints on the buttons, and create new constraints between the buttons and the safe area. – nathangitter Oct 23 '17 at 16:03