Learn Courses My Dashboard

Ios tutorial (2020) Login Screen Buttons Not Expanding

Hi!

I’m following the iOS Tutorial (2020) video and am finishing Chapter 2. I’ve built the login screen.

I’m using Xcode 13.4.1 and the menus all look slightly diff from the 2020 video. I know I should have started with the updated video from 2021.

Anyway, when I create the login screen, my FB, Google and Email signin buttons do not expand and enlarge. The text for the buttons ends up edge to edge.

Anyone encounter this and know how to make the buttons expand ?

Thanks,

Bobby

Hi!

While I’m asking . . . . When I rotate the virtual phone, the background image does not expand horizontally to fill the screen. Any suggestions as to why?

Thanks,

Bobby

Hi @rdk

Welcome to the community.

When you were adding the Buttons to the View Controller did you combine them in a StackView? If so did you set the Stack View so that the Alignment was set to Fill, the Distribution was set to Fill and the spacing to about 10?

Here is a screenshot of what I am referring to

Realistically the UI design is intended for Portrait mode.
Check the Content Mode setting for that image and change it to Aspect Fill and that will make the background image occupy the entire View.

Thank you for the reply! I guess the default for the background image was not scale to fill. When I enabled that, the background image properly handled rotation. I agree that the UI is not designed for landscape but am learning and tinkering so wanted to find out how to fix. Will check on the button stack.

Completely missed the stack view part in the video. I’m adding it now. Is it easy to drag/drop the existing buttons into the stack view or do I need to re-create the buttons and re-add constraints?

The easiest way is to drag the stack View into the document outline where you see the hierarchy. You should be able to slot in where it needs to be just above the label and then drag the label and buttons into it.

Give the stack View some constraints like center vertically and horizontally and then set the parameters as I suggested.

1 Like