如何在Xcode中成功使用AutoLayout和Constraints？

Question

This is going to be difficult without the rep needed to post images... however...

I currently have a storyboard layout in Xcode.

I have a UIViewController which is split in two sections, the upper UIView, and the lower UITableView (For now, we can ignore this, however the same issue applies to the table view, and advice is also appreciated)

In the UIView, I have a ProgressView, which spans the entire width of the UIView, and is snapped to the padding distance from the edge of the view. The ProgressView is set to 50% and falls in the middle of the layout in the storyboard designer.

When this is simulated, the progress bar appears to be sitting well above 90%. Issue is, when the progress bar is shrunk (or the width changed in the storyboard layout editor) to about half the 'visible layout', the progress bar takes up 'most' of the simulated screen, and correctly displays the 50% progress.

I'm assuming this has something to do with the AutoLayout or Size Classes. I'd like to learn the use of this autolayout and constraints properly - as such, disabling either of these will not be acceptable. The suggested constraints are not returning my expected results.

Edit: I've figured out something that seems to work satisfactorily, see the given answer. But still keen to see some actual layout advice.

Edit: Applying the same principle to the UITableView in the lower half of the UIViewController and it also fixes the problems with Separator Insets.

Answer 1

I have found one solution.

In storyboard editor, open the document outline. Hold rightclick and select the ProgressView and drag to the Parent UIView, release and select:

• Leading Space to Container
• Trailing Space to Container
• Center Horizontally in Container

(Finishing here still has issues because the UIView exceeds the width of its parent still.... so do the same to the UIView)

In the document outline, hold right click on the UIView and drag to the Parent View, release and select: - Leading Space to Container - Trailing Space to Container

Now, I have a perfectly centered ProgressView with it sitting between the two edges and with the 'padding' on either end. Exactly what was required.

This issue seems to have spanned from utilising nested UIViews.