How can I set AutoLayout constraints' constant as a percentage of the superview?

2
votes

I'm working on a project that requires creating a customizable sharing card (understand an image people can export to share on social media later).

I'm building these sharing cards as plain UIView that contains several other UI elements (UIImageViews and UILabels mostly).

Let's call it SharingCardView for simplicity.

Since this visual will be exported and shared, I need to have it look exactly the same on all devices. So my understanding is that I need to have the AutoLayout constraints have responsive constants based on the user's device screen size.

Imagine I display that UIView on an iPhone and then on an iPad, I want to have the aspect ratio of everything inside that SharingCardView maintained so people can't see any difference between a visual exported from an iPhone or an iPad.

### Question:

I would like to be able to pin a label to the top of the SharingCardView **with a constant of 10%**as shown on the screenshot below.

enter image description here

### So far I tried this way

I tried to set the constant to self.bounds.width * 0.1 but when I create my view bounds is apparently equal to zero so the constraint is just pinning everything at the very top without any padding. 

nowUpOnYTLbl.anchor(top: topAnchor,
                            left: leftAnchor,
                            bottom: nil,
                            right: rightAnchor,
                            paddingTop: self.bounds.width * 0.1,
                            paddingLeft: 30,
                            paddingBottom: 0,
                            paddingRight: 30,
                            width: 0,
                            height: 20
        )

Any suggestions would be super helpful. And if you think the approach is completely wrong then I'm all ears for alternative solutions.

3
iosswiftautolayoutconstraints

3 Answers

4
votes

Do not use frame/bounds to set a constraint! Use only constraint relationships to set constraints. So here, you want this top constraint to be 1/10 of the superview's height constraint. That way, the ratio will be live, dependent at runtime upon what the superview's height actually turns out to be.

However, you can't do that because you can only form these sorts of ratio between one height constraint and another height constraint.

Therefore you will have to use an invisible spacer view whose height constraint is 1/10 of the superview's height constraint (i.e. the height constraints are equal, with a multiplier of 0.1). I was easily able to achieve that in Interface Builder with no code at all. In my screen shots, the invisible spacer view is visible so that you can see the man behind the curtain...!

enter image description here

enter image description here

0
votes

You can accomplish this by making the top constraint of the label related to the centerY of the share view

you give the shareView a proportiional size to it's superView so centerY value will be different when running in different devices , suppose you want to make this constant 1/10 from the share view height , then you do

topConstraintOfLabel = (centerYOfShareView * 2) * 1/10

=

topConstraintOfLabel = centerYOfShareView * 1/5

I do this because we cant't constraint top constraint with height , so we use centerY and double the aspect we want as centerY = 0.5 * height , also the same thing applies to leading / trailing with centerX

0
votes

you can use view and give space to the view from super view by using the multiplier.so when your superview size changes the view automatically change his size according to the multiplier.