1

I am writing a simple iOS app in swift with xcode and have a navigation view in which I have a text view (to contain a sentence or two for a question) with two buttons below to go forward and back.

I want the two buttons to fill the width of the screen with a small space between and for the text view to fill the remaining space. At the moment I've tried putting the buttons in a horizontal stack view but the buttons get squashed together. Moreover, when I then incorporate the horizontal stack (containing the buttons) then put that and the text view into a vertical stack the text cannot be seen at all when the app is run (?).

Also currently when rotating the view the buttons drop off the bottom of the screen. What is the best way of setting this to correctly display across devices/orientations using stack views and constraints? enter image description here

laurie
  • 965
  • 1
  • 11
  • 21

2 Answers2

0

You are on the right track using a stack view. What you need to do is set your Stack View's Distribution option to "Fill Equally". This is done very easily in the storyboard. To add spacing, change the spacing to the specific amount of spacing you are looking for (I set it to 15). I have attached a screenshot of the settings here. See "Distribution"

Nevin Jethmalani
  • 2,726
  • 4
  • 23
  • 58
0

As pointed out in one of the answers you need to set set "Fill Equally" distribution type.

After setting up the 'buttons stack view' you can either use another stack view to hold the 'buttons stack view' and 'text view',

Or

You can use simple constraints to setup your 'text view' along the 'buttons stack view'

In this storyboard I have replicated both the cases.

enter image description here

You can always refer https://developer.apple.com/reference/uikit/uistackview. Or one of my post on other distribution types here https://stackoverflow.com/a/34059843/1790683

UPDATE: As I see in your storyboard, your outer stack view is missing constraints. To add proper constraints, select the outer stack view and 'add new constraint' button in bottom bar. Refer screenshot

enter image description here

Community
  • 1
  • 1
BangOperator
  • 4,377
  • 2
  • 24
  • 38
  • I like the stack view best, that makes the most sense to me. Problem is that when I do this the text view isn't visible in my view when I run the app. Do I need to re attach the outlet? I select the two buttons then go editor > embed in > stack view. Then select that stack view and the text view and go through the same steps. This is the storyboard I have currently: https://www.dropbox.com/sh/885e9rcklg5m7sv/AAB1zhQ-tGeOCVhGHgVfoHExa?dl=0 – laurie May 18 '17 at 18:20
  • Thanks. I have added those constraints. The view looks more like its the correct proportions, however the text isn't loading into the text view or else it isn't being displayed for some reason. The buttons are at the foot and there is a white space where the text should load. However, if I drag the text view out of the stack. It does display, more or less in the right place. I can, I guess, just use constraints for it but I'm curious why it isn't loading when embedded in the stack. Does the code need changing maybe? I assumed the outlet would remain the same... – laurie May 18 '17 at 19:30
  • The strangest thing, is I can drag the text view into the same text view as the buttons then the text displays (next to the buttons as you would expect. But, if I put it into the vertical stack (containing both the text view and the horizontal stack (which in turn holds the buttons) the text doesn't display. :/ – laurie May 18 '17 at 19:50
  • Here is an example project which shows the issue: https://www.dropbox.com/sh/yg3theu523m88oz/AADSLKXQkrXAwXne54Z7aP3Ea?dl=0 if you run it you will see that the buttons are shown but no text. If I move the text view out of the stack... it shows... ? – laurie May 18 '17 at 20:32
  • Not sure if the last link is going to give you the access you need, if not, try this one: https://www.dropbox.com/sh/3vxs1l8us9ltnkw/AAAuZRJDkqChKhyBKtw5V7Uta?dl=0 – laurie May 18 '17 at 20:42
  • @laurie, "The view looks more like its the correct proportions, however the text isn't loading into the text view or else it isn't being displayed for some reason" , I think my answer has solved your problem of layout. If you are facing some other issue(might be even related), you should ask another question. I would be happy to help you there. Thanks. – BangOperator May 19 '17 at 08:56