UITextView Slants in the DesignView and at RunTime

Question

:

Situation:

As shown in the Image above, I have designed the layout using Xcode 9 and soon after the design was complete, I noticed a weird layout issue.

If you look closely, you can observe the UILabels are being "slant" or "tilted" towards the right.

Question:

Any idea why is this happening? I observed this first time after developing half of the application. It has never happened before.

Note: There is no Swift code written for designing, everything is aligned using AutoLayout, StackView and UILabel. If you want me to provide any code, I will post it on request.

Any help will be appreciated. Thanks.

Answer 1

I used an image editor to add some perfectly horizontal red lines to your storyboard screen shot. The red lines make it easier to see why it looks “slanted”:

All of your labels have perfectly horizontal baselines, and all of your grey labels are correctly aligned (vertically) with each other.

The “slant” appears because your black “---” labels are not aligned vertically with each other.

You didn't post enough information for me to explain why your dash labels aren't aligned vertically, but perhaps you now have enough information to track down the problem yourself. If not, edit your question to include more information about how the dash labels are configured and constrained.

UPDATE

I have uploaded a storyboard to this gist that shows how I would lay out this view.

Here's what I did in my storyboard:

Everywhere that you have a row of two labels side by side, put them in a horizontal stack view with alignment set to “First Baseline” and distribution set to “Fill Equally”. If you need padding around the row, change the stack view's Layout Margins (in the Size inspector) to “Fixed” and set the margins to get the padding you want. Thus:

Here's my document outline:

All labels are configured with horizontal content hugging priority 251, vertical content hugging priority 1000, and both axes' content compression resistance priorities set to 1000:

All of the horizontal row stack views are configured with “Fixed” layout margins with left and right set to 8, and top and bottom set according to what is needed. For example, the stack view containing the “Available Credits” and “Used Credits” labels has these margins: