CODEWITHSUNDEEP
iosswiftautolayout
LampPost
LampPost

Reputation: 866

Auto layout issue for devices in the same family and orientation

I'm working on my beginner app and checked on the preview option for my app. I've noticed that across the iPhone X, 8+, 8 and SE the spacing of my objects are off. I've learned about the custom size class for various devices for different orientations but nothing what said about the same device family in the same orientations (ex: iPhones in portrait mode). This is what I am seeing.

enter image description here

The iPhone X looks fine but the others, not so much. I'm guessing that instead of using hard numbers for auto layout I should be using a ratio based on the height and width relative to the screen. Is that right?

Upvotes: 2

Views: 100

Answers (2)

McDonal_11
McDonal_11

Reputation: 4075

Try to take Base ViewController as iPhone4S. Drag UIView called as HolderView, which should hold that UILabel and Two UIViews.

As per Design, give HolderView's width and height be same. Like Square shape.

Give Constraints as, left and right as 20px, CenterHorizontally and CenterVertically, and finally give AspectRatio to itself.

HolderView

enter image description here

Add UIView for UILabel to HolderView called as LabelHolderView.

Give constraints for LabelHolderView as left and right 20px, CenterVertically and Height as 90px (approx - Two lines for UILabel)

Click CenterVertically constraints and decrease Multiplier value to 0.4. You can get answer from here that how to change multiplier value.

LabelHolderView

enter image description here

Add UIView for Two Action to HolderView called as ActionHolderView.

Give constraints for ActionHolderView as left and right 20px, CenterVertically and Height as 160px (approx)

Click CenterVertically constraints and increase Multiplier value to 1.3.

Inside that ActionHolderView, drag Two UIView called as PhotoView and NoteView and Embed in UIStackView as Horizontal axis, Fill Equally and 8 as Spacing.

Give constraints for UIStackView as top, left, right and bottom as 0.

ActionHolderView

enter image description here

Change all UIView's BGColor as per your design. Then, add UILabel and UIButton and UIImageView to respective UIViews.

For UILabel, top, right, left and bottom as 0. (number Of lines as 2)

For Two UIButtons ,right, left and bottom as 8 and height as 30

For UImageView, Width and Height be 50px (Change width and height from Size Inspector - Square shape). Give Constraints as CenterHorizontally, CenterVertically and AspectRatio to its SuperView and AspectRatio to itself

ViewController

enter image description here

Upvotes: 1

Nol4635
Nol4635

Reputation: 631

You need to set height/width constraints for your items. I would also put your add photo/add note buttons in a view to make it easier for constraints. Don't be afraid to mess around with it, you can always to command z to restore the previous version.

Upvotes: 0

Related Questions