Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
351 views
in Technique[技术] by (71.8m points)

ios - Creating a 3x3 grid with auto layout constraints

Xcode has said there are no layout issues but as you can see there is. I have tried everything. Apple docs, YouTube, Google, etc. It seems I am doing it right however maybe the order I'm doing things in or something else is causing these issues. After trying everything I finally let Xcode add missing constraints and it's the best result so far. I have 9 buttons onto of 9 UIImages so I have to do the same thing I do to the buttons as I do with the UIImages. I have temporarily placed the UIImages on top of the buttons so I can see what I'm doing more easily. I've got 2 screenshots. Please advise.

Beginning

Beginning

This is after using Xcode's add missing constraints option. Sorta what I want but no cigar.

enter image description here

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

iOS 9 or later

If your deployment target is iOS 9 or later, there is a simpler solution using UIStackView. Please see my other answer.

iOS 8 or earlier

There are a number of ways you could create this layout with constraints. Here's one.

First, a tip: you can name your views in the document outline. This makes it much easier to understand which views are which and what your constraints are connected to. To name a view, click it in the outline, press return, and type the name. Then the outline can look like this:

outline with names

If you change the names, you may need to close the file (menu bar > File > Close “Main.storyboard”) and reopen it to make everything update properly.

(Note that these names are only used when editing the storyboard. There is no way to get these names at runtime.)

OK, now to create the constraints. Start by constraining all the left-right edges to nearest neighbor with constant value zero:

left-right constraints

Next, constrain the top and bottom edges of the top row to nearest neighbor with constant value zero. If you want to constrain to the top edge of the superview, rather than to the top layout guide, you have to do them one by one. Here's how to do the first one:

top-bottom constraints of top-left

Repeat for the other two views in the top row.

Next, constrain the top and bottom edges of the bottom row to nearest neighbor with constant value zero. Again, if you want to constrain to the bottom edge of the superview, you have to do them one at a time. Example:

top-bottom constraints of bottom-left

Repeat for the other two views in the bottom row.

Note that you don't have to create top-bottom constraints for the middle row, because the top and bottom rows are now constrained to the middle row.

Finally, select all your views and create equal-width and equal-height constraints:

equal width and height constraints

Check out the result using Preview in the Assistant editor:

preview

If you forget any constraints, the document outline will show a red arrow at the top right. Click it for some help identifying what's missing. For example, if you forget to add the top and bottom constraints to the top-center view, you get an error like this:

missing constraints error


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...