Hero: Label stretches to fill width constraint in transition

[jhhcons]

When adding leading trailing constraints to a label, or when adding a label to a stackview, the width of the label might be wider than the width of the text itself. Currently, a hero transition with a label with a width larger than the intrinsic size of the text creates unexpected graphical errors:

Steps to reproduce:

1. Open Basic.storyboard from HeroExamples
2. Select the "HeroID" label on ViewController 1
3. Add a width equals 200 constraint
4. Run the animation

[lkzhao]

This is because Hero takes a snapshot of the view and animated from/to the other view's frame. The snapshot doesn't have any information about its view type, its intrinsic size, or its contentMode. It is just an snapshot image of the view with the size equal to its frame size.

Currently, Hero only support the contentMode of UIImageView. It checks if both views are UIImageView and create corresponding copies of the UIImageView as the snapshot. We can do something similar to UILabels too.

One quick way to solve this now, is to wrap the label inside a UIView and remove the width constraint.

[Patrik-svobodik]

What do you mean by remove width constraint? Should I not constrain the label at all or pin it to the edges of the view? And should I set the id on the wrapper or on the label itself? (I'm guessing the wrapper but not sure)

[Woollim]

@Patrik-svobodik Hey~ I solved this same issue with below link 😄
https://github.com/HeroTransitions/Hero/issues/414#issuecomment-434672297

[Patrik-svobodik]

Thank you a lot, will try it. Do you know if it has an effect on normal UIViews too?

[Woollim]

I just try UILabel that with layout constraint

[Patrik-svobodik]

From what I’ve tried, it in fact works on any UIView