How to scale the layout / size of a UIView subviews container when animating a UIView container?

Question

Purpose: to be able to animate the frame with the container, while it displays their original layout and scale in proportion to their container appearance.

Scenario:

• Elements located through restrictions / autorun; within the green container.
• Green container View physical coordinates (frames / borders) is configured for each animation.
• The compression and hug properties of members are set with low priority.

UIView.animateWithDuration(0, animations: { self.bounds = myBounds }) {(One) in UIView.animateWithDuration(1, animations: { self.frame = myFrame }) {(Two) in UIView.animateWithDuration(0.5, animations: { self.frame = origFrame // self.center = myCenter }) {(Three) in UIView.animateWithDuration(0.2, animations: { self.frame = distantFrame }) } } } 

Here's the original layout:

I would like to have the element size of an element proportional to a container view like this:

But the member elements (one label "Hello World!") Are not adjusted accordingly, as their green container appearance enlivens the square in the upper left corner:

How to preserve the layout of UIView members in proportion to their prevailing dominant container view frame?

Note. This applies to any type of member (UIView, UITextView, ... etc.); for simple animation of position / layout and transformation (rotation).

Answer 1

In your example, you have a green background (BG) and a welcome world view (HW), and you want HW to scale proportionally to BG.
You can achieve this easily: Open the Utilities panel in Xcode (top right icon) and the outline of the document (storyboard icon in the bottom left).
Suppose that HW is already concentrated in BG, i.e. You have already set the alignment restrictions for the HW center horizontally and vertically in the container.
Now select BG as well as HW in the document outline and click on the “Pin” icon in the lower right. He will propose the restrictions “Equal widths” and “Equal heights”. Activate both. After these restrictions have been created, open one of them in the document outline. The Utilities panel will then show an equal-width constraint with two views and a Multiplier field.
In the "Multiplier" field, you can enter the required proportions for the selected dimension, for example. 1: 3. This will determine the proportion for the selected measurement.
Similarly, for another dimension. Of course, you should have updated the HW frame.
Here is an example: