Search code examples
iosswiftautolayoutios-universal-app

Universal layout constraints

I have an app which I've designed in the width:any height:any universal size template in XCode (Swift). Basically, I have a custom cell, with its own uitableviewcell class too, and two labels inside of it which display array data. Anyway, I am struggling to add the correct restraints etc, so that the labels and text inside them display properly on all iOS devices. Even though I have changed the font to be able to go to 0.2 scale, there's still sometimes overlap or text clipped in the label on smaller iOS screens. It's probably a simple thing to resolve. So can anyone help me make this layout look the same, or the equivalent, on all iOS devices and all orientations too please? Here is my design:

my app design w/ labels

Solution

  • The fact that your labels are overlapping each other is probably that you don't have the proper width constraints.

    This is what I will do, taking the left label as an example:

    • add constraints to the left, top, bottom margin
    • add a width constraint to the parent view and making it 50% of the parent width

    enter image description here

    enter image description here

    You will need to do the similar for the right label replacing the left margin constraint with a right margin one.

    Now both the labels only take 50% of the width, then they will not overlap any more guaranteed.