CODEWITHSUNDEEP
iosxcodeios-autolayout
ZNApps
ZNApps

Reputation: 55

iOS auto layout 3 blocks in the center screen

I have a layout like picture. This is design in 4s, when I run in 7 or 7s+, I want 3 white blocks is center as 4s and increase size to match with new screen. Any help? I use Xcode 8.1. Thanks

4s

iPhone 4s

7 or 7s+ (Fail)

enter image description here

7 or 7s+ (I hope this)

7 or 7s+ (I hope this)

Upvotes: 0

Views: 122

Answers (1)

Duncan C
Duncan C

Reputation: 131408

Place your 3 blocks into a horizontal stack view (UIStackView) with the desired spacing, and then center the stack view into your content view.

EDIT:

If you need to support iOS versions older than iOS 9 then you can't use stack views. In that case your job is a lot more complicated.

What I've done is to place the views I want to center inside another view, which I center horizontally on the screen. I'll call that the container view.

I'll call the views you want to space evenly "white views."

I add constraints to set my white views to a fixed width, and insert "spacer views" between each white view. I create a constraint on each spacer view that sets its width equal to the widths of all the other spacer views, and lock the leading and trailing space of each view to it's nearest neighbors. (were the outermost spacer views are locked to their superviews.

If you set your spacer views to a fixed width, and make your container view's height match the height of a white view, tie it's leading edge to the leading edge of the left-most spacer view, and tie it's trailing edge to the trailing edge of the right-most spacer view, then the container view sizes automatically to contain all the white views and spacer views, and stays centered, so the views within it stay centered.

EDIT #2:

See this thread, that illustrates both the spacer approach and another technique that uses proportional centering constraints:

Evenly space multiple views within a container view

Upvotes: 1

Related Questions