# RWDevCon 2016 Session 103: Beginning UIStackView

**URL:** <https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572>\
**Category:** 🎓 Courses & Articles\
**Created:** [April 18, 2016, 7:32pm UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572 "2016-04-18T19:32:08Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [April 18, 2016, 7:32pm UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/1 "2016-04-18T19:32:08Z")

</div>

In this session you’ll build your first stack view and learn the true power of easily constructing realistic layouts without Auto Layout constraints.

* * *
 This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/1304-rwdevcon-2016-session-103-beginning-uistackview](https://www.raywenderlich.com/1304-rwdevcon-2016-session-103-beginning-uistackview)

---

<div class="post-metadata">

**Author:** ![jstheoriginal](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jstheoriginal/32/95376_2.png) [@jstheoriginal](https://forums.kodeco.com/u/jstheoriginal)\
**Post date:** [May 1, 2016, 3:12am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/3 "2016-05-01T03:12:05Z")

</div>

Really excellent, Sam! Thank you. I picked up a lot of little tricks. 👌

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [May 2, 2016, 7:51am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/4 "2016-05-02T07:51:18Z")

</div>

Great - glad you appreciated it!

sam

---

<div class="post-metadata">

**Author:** ![wsg](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@wsg](https://forums.kodeco.com/u/wsg)\
**Post date:** [October 11, 2016, 6:37pm UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/5 "2016-10-11T18:37:53Z")

</div>

In Xcode 8.0 (8A218a) for the first part where you add the stack view in the cell when you rotate the device the view also shows the detail view on the right side of the screen.

---

<div class="post-metadata">

**Author:** ![wsg](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@wsg](https://forums.kodeco.com/u/wsg)\
**Post date:** [October 12, 2016, 8:10pm UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/6 "2016-10-12T20:10:02Z")

</div>

Ok it was the Split Screen Contrioller that was causing the split screen on the later ( bigger screens) simulators.

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [October 14, 2016, 1:38am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/7 "2016-10-14T01:38:30Z")

</div>

Glad you got it sorted… sorry for my late reply 😕

---

<div class="post-metadata">

**Author:** ![theapapp](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/theapapp/32/93558_2.png) [@theapapp](https://forums.kodeco.com/u/theapapp)\
**Post date:** [November 23, 2016, 10:52pm UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/8 "2016-11-23T22:52:01Z")

</div>

This is an awesome lesson. I have enjoyed your style of explanation,in the video. One big question that comes up for me is, I have a screen that has the following structure  
Top Section  
Label  
Label Value  
Label Value  
Middle Section  
Label  
Label Value  
Label Value  
Bottom Section  
Label  
Label Value  
Label Value  
Centered Button.

I am trying to make the Label Value pairs fill the entire horizontal of any iOS device with text Left justified on the Label and Right Justified on the Value. I have tried Fill, Fill Equally, and Fill Proportionality. (no Luck), I have tried pinning them to the left and right with constraints, no luck I must be missing something very obvious here.

Can you point me toward the right direction? I’d be glad to post the XML of the Storyboard if that would help.

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [November 28, 2016, 3:05am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/9 "2016-11-28T03:05:16Z")

</div>

Hi @theapapp

I think to get the effect you desire you should be able to do the following:

1. Create a horizontal stack view containing 2 labels.
2. Set the **Distribution** to **Fill**.
3. Select the **Label** label (i.e. the leftmost label).
4. Set the **Horizontal Content Hugging Priority** to **249** and the **Horizontal Content Compression Resistance Priority** to **749**.
5. Ensure that the width of the stack view fills the width of the containing view. If it’s a child of vertical stack view (which in your case I think it is), set the **Alignment** property on the parent stack view to **Fill**. If not, pin the stack view to the edges of the containing view.

I’ve not tried it, but I think that will give you the effect you are after. You might need to change the alignment of the **Value** label to right aligned, but I don’t think you’ll need to.

Hope that a) works and b) helps 🙂

sam

---

<div class="post-metadata">

**Author:** ![theapapp](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/theapapp/32/93558_2.png) [@theapapp](https://forums.kodeco.com/u/theapapp)\
**Post date:** [November 30, 2016, 2:20am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/10 "2016-11-30T02:20:09Z")

</div>

Thank you for responding… for some reason it is not working… Maybe this will be more clear  
I have  
Main Stack View (vertical) (Centered Horizontal and Vertical within the overall view)  
Then Stack View Vertical 1  
Stack View A Horizontal  
Stack View B horizontal  
Stack View C Horizontal  
Then Stack View Vertical 2  
Stack View D Horizontal  
Stack View E horizontal  
Stack View F Horizontal  
Then Stack View Vertical 3  
Stack View G Horizontal  
Stack View H horizontal  
Stack View I Horizontal

I can’t stretch the Main Stack View to fill the space, even thought the View Content Mode is Scale to Fit. Within Interface Builder the Width and Height are not able to modified.

I have updated all of the hugging as described above and it still just shows the entire set of stacks in the center of the main view. Any suggestions?

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [November 30, 2016, 2:49am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/11 "2016-11-30T02:49:01Z")

</div>

@theapapp

In order to get the stack views to correctly stretch, you need to define the dimensions of the outer stack view. In your situation it’s not enough to centre the outer stack view horizontally and vertically - that just defines its position. You also need to specify its size.

You can do this with auto layout - either providing width and height constraints, or pinning it to some other aspects of the layout. More often than not, you’ll want to pin the leading, trailing, top and bottom edges to the edges of the containing view. Or if you want to keep the horizontally centred constraints, specify the width and height to be the same of the containing view.

If I’ve understood your situation correctly, then that might be enough to solve the problem.

sam

---

<div class="post-metadata">

**Author:** ![theapapp](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/theapapp/32/93558_2.png) [@theapapp](https://forums.kodeco.com/u/theapapp)\
**Post date:** [December 2, 2016, 1:11am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/12 "2016-12-02T01:11:02Z")

</div>

Thanks… That worked, now I need to do more design work 🙂

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [December 2, 2016, 1:31am UTC](https://forums.kodeco.com/t/rwdevcon-2016-session-103-beginning-uistackview/13572/13 "2016-12-02T01:31:42Z")

</div>

Yay! Good luck 🙂

sam
