Flexible horizontal spacing between ui labels

2019-09-06 09:38发布

I am using auto layout in storyboard with all resolution support,but I am stuck on one thing that.I want flexible horizontal spacing between my labels using constraints.Please see screenshot for more details. This is a 4.7inch screen.This screen is correct as I designed for particularly this screen[This is a 4.7inch screen.This screen is correct as I designed for particularly this screen

4 inch screenthis is a 4inch screen

5.5 inch this is a 5.5inch screen

IPad screenthis is iPad screen

Please help to manage my labels spacing equally in all supported resolutions with auto layout and constraints.

Edit

This is my view hierarchy and it is also a subview of some view controller's view. This is my view hierarchy

1条回答
Ridiculous、
2楼-- · 2019-09-06 10:30

You have 5 views containing labels. Let's call those view1 through view5 and let's call their super view orangeView.

  1. Start by laying out the orangeView. Constrain its leading edge to the leading edge of its super view. Constrain its trailing edge to the trailing edge of its super view. Constrain its height to 50.

  2. Add 5 more views as subviews of orangeView. Lay them out visually approximately as you want them to be.

  3. Starting with the leftmost view, which we'll call view1, constrain its top edge to be 8 points from the top edge of it nearest neighbor (which is the orangeView's top). Constrain its bottom edge to 8 points from the bottom edge of orangeView. Constrain its left edge to be 8 points from its nearest neighbor. Repeat this for views 2 through 4, always constraining their top, left, and bottom edges to be 8 points from the nearest neighbor. For view5, constrain all 4 edges to be 8 points from the nearest neighbor.

  4. Constrain view2's width to be equal to view1's width. Constrain view3's width to be equal to view2's width. Constrain view4's width to be equal to view3's width. Constrain view5's width to be equal to view4's width. This is what enables all of the views to grow together in size.

  5. Add a label as a subview to each of views view1 through view5. Constrain their widths and heights to be big enough to hold your text. Add 2 constraints to each label to center it vertically and horizontally in its containing view.

查看更多
登录 后发表回答