神刀安全网

previous blog post

I am just getting into the habit of using the new UIStackView on iOS. I find it much easier to use UIStackView to build the majority of the UI, tweaking it when necessary with Auto Layout . Auto Layout is really powerful and flexible, but for simple layouts, it can be tedious.

Recently, one of my co-workers had a layout he wanted to represent with stack views, and the solution wasn’t obvious to us at first. He had a column of UILabels and UITextFields and wanted them to stretch across the screen. There are many ways you can build the layout, but we chose UIStackView because it seemed like the simplest solution and required no code.

previous blog post

Building the UI

I started out by placing the UILabel and UITextFields onto the UIViewController and then wrapping them in stack views. You could also go the other direction and place stack views on the UIViewController first, then place the controls inside of them.

previous blog post

To wrap existing controls in a stack view, highlight the controls you want to include and press the “Stack” button in the lower right corner of the storyboard view.

previous blog post previous blog post

I only selected the first label/textfield pair because I wanted the spacing between my label and textfield to be different from the spacing between the pairs. Putting each pair in separate stack views allows me to control the spacing.

Next, select the other pair of controls and place them in a stack view. At this point, you should have both pairs in stack views. Make sure both stack views have a vertical axis.

previous blog post previous blog post

The last control to put on the scene is wrapping both stack views in another vertical stack view. Your final layout should look like this, with the document outline showing the UI hierarchy:

previous blog post previous blog post

Configure and Constrain the Stack Views

Now that we have the UI in place, we can add Auto Layout where it is needed and configure our stack views to stretch the content. By default, the stack view will only be as big as the intrinsic content size of the controls inside of it, so we need to tell the outer stack view to do something different.

The first step is to add Auto Layout constraints on the outer stack view. This will anchor it within the leading, trailing, and upper edges of the parent view. To do that, select the outer stack view and add the constraints shown below. You do not need to anchor the outer stack view to the bottom layout guide.

previous blog post previous blog post

You can see that the outer stack view is constrained to the leading and trailing edges, but the content inside is not stretching to fill the space. Specifically, the UITextFields are not very wide. To fix this problem, we need to set the alignment property on all stack views to “Fill” (make sure you change all three of them).

previous blog post

Once you have this alignment property set, you should see the content in your stack view stretch and fill the space that is inside. You can also play around with the spacing property on both sets of stack views to get the look you want in your UI.

previous blog post

I know this example was pretty easy, but the situation can easily confuse a beginner to UIStackView. Hopefully, you’ll find it useful.

For more on using Xcode, read my series on unwind segues:

Or my series on switching view in iOS:

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » previous blog post

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址