UILabel alignment and moving one view to other view in different Size Classes

Question

Summary

I'm making a receipt screen in my current project, this screen can be viewed in portrait and landscape. I've finished putting a constraints in portrait and it look like this:

. Now, in landscape it should be like this:

Problem

(1) In portrait, A1-A3 is center aligned but in landscape it should be left aligned (value of A1-A3 is dynamic, can be long or short text). So, can I add a constraints to put the alignment from center to left programmatically or is there any other way to do this?

(2) Notice in landscape that parentView of View A, B, C becomes one, is this doable? UIImageView must be put below View B

What I've tried

(1) Only system font family and size can change when in different size class using IB, if UILabel is center aligned it'll be center in all size classes

(2) I'm getting an error when moving UIImageView from View B to View C. It seems that if you move one view to another, it will be permanently moved in all size classes

Answer 1

For the label alignment, you'll have to update it in code. You can detect when the size class changes by implementing traitCollectionDidChange: on your view controller or a custom view.

For the image, one approach is to not make the image view a subview of B or C. Instead, make it a subview of the root view, but position it over B and C using constraints. Example:

Notice in the document outline that Image is not a subview of Green; it is a subview of the root view. Since Image comes last in the list of subviews, it is “in front of” or “closer to the screen than” the other views.

Image has constraints installed for wAny/hAny to position it with Image.centerY = Green.centerY and Image.trailing = Green.trailing - 20.

Now here is the wAny/hCompact size class:

Now the constraints that put Image on Green are not installed. Instead, I have installed constraints for wAny/hCompact that set Image.centerX = Blue.centerX and Image.top = Blue.top + 20.

Here is a demo in the iPhone 4s simulator: