Question 130499 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Why Xcode Storyboard preview and emulator button texts are not compatible?

I am trying to drag and drop buttons to the storyboard. The buttons seem good in my storyboard and preview like the following;
enter image description here

However, when I run the simulator, the button texts seem like the following;

enter image description here

Why the buttons are not shown to fit in the buttons of the simulator and how can I fix this?

Note: Preview and device types are iPhone13 Pro.

Tags:

3

Answers


  1. 0

    I think it’s because of the auto layout constraints. I am not very familiar with storyboards, if you don’t set width of the view component, it seems fine on the storyboard but when compiling the view it actually has default size.

    Try to set some constraints for width. Maybe it would help.

    Login or Signup to reply.
  2. 0

    The first thing you need to do is to create identical buttons with identical size and with identical font size.

    As you can see in your project, the buttons have different sizes, but the text is the same size in all buttons.

    To make it faster – you can create one button and make a copy with option + drag’and’drop…

    Then, you can put them in a Stack View. So, it will be easier for you to work with them in the future.

    Select all buttons and make a Stack View…

    https://i.stack.imgur.com/QLTJP.png

    https://i.stack.imgur.com/OlOia.png

    After that, resize your Stack View like you want.

    Then, tap on a Stack View and clear the constraints.

    https://i.stack.imgur.com/1pMT8.png

    Fix the dimensions like this. But, without “Constrain to mergins”.

    https://i.stack.imgur.com/8HKKF

    After that, make for the Stack View – horizontally and vertically position in your storyboard.

    https://i.stack.imgur.com/a29wL.png

    The result is…

    https://i.stack.imgur.com/mvQjg.png

    Hope it’s break your problem! 🙂

    Login or Signup to reply.
  3. 0

    The iOS 15 / Xcode 13 style buttons are highly dependent on auto-layout.

    Based on your screen-shots, it doesn’t look like you’ve given the buttons any constraints.

    You do NOT need to set widths or heights, but you DO want to set at least horizontal and vertical position constraints.

    So, constrain all 4 of your buttons centered horizontally, and constrain:

    • First button Top to view Top (safe area)
    • Second button Top to First button Bottom
    • Third button Top to Second button Bottom
    • Fourth button Top to Third button Bottom

    enter image description here

    Then you should see them laid-out correctly at run-time.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search