Search code examples
iosswiftconstraintsscreen-size

Swift - Help on Constraints & Frames - Need guidance/resources

i'm new to Swift but experienced with other languages so the coding part isn't really hard.

The difficulty i'm having is understanding constraints and how to use them.

Here is a screen shot of one of my views in PREVIEW. Can anyone explain how constraints work or apply to them to something like this?

Thanks a lot guys.

Following the screen shot below, you can see the buttons & text fields go off the screen depending on the size of the screen. enter image description here

Solution

  • Considering the image posted, after constraining everything, your final result would be something like the following:

    Final result

    To get to that result, you have to put constraints in all you IB elements, so Auto Layout can calculate the frame of every element.

    To add constraints, you can hold control, click and hold on the element you want to apply the constraint and drag to the element you want to use as reference and then release it - I'm creating the constraints inside the Document Outline. A new dialog box will show up, so you can select the constraints you want to apply - if you hold the shift key, you can select more than one, and for more options, hold option. After selecting all constraints you want, click Add Constraints, so they can be applied to your element.

    After applying all necessary constraints, you will see no Auto Layout error or warning, as the following:

    And if you click at the elements, you will see the constraints you applied:

    Although this is a very wide topic, I think a great start would be the book Practical Auto Layout. For sure it can help you out - it helped me a lot! And you could take a look at a tutorial like Auto Layout Tutorial in iOS 9 Part 1: Getting Started, so you can start to understand how Auto Layout works.