This article records how to make percentage layout in UIStoryboard or xib, including
- View.Width as a percentage of its Superview.Width
- The distance between View.Leading and Superview.Leading as a percentage of Superview.Width
- The distance between View.Trailing and Superview.Trailing as a percentage of Superview.Width
- The distance between View.Leading and Superview.CenterX as a percentage of the superview.Width of the superview
- Limit the aspect ratio of the View
- The interval between Views is a percentage of the width of Superview.Width
Multiplier is mentioned in the article iOS NSLayoutConstraint priority . The above-mentioned percentage layouts are all implemented based on multiplier. Let's take a look at its implementation one by one.
View.Width as a percentage of its Superview.Width
The implementation of this function is very simple. Taking a centered button Button as an example, first add the button relative to Equal Width the constraint of the parent container, and then set its multiplier to 0.2, so that the width of Button1 can be 0.2 times the width of the parent container. The operation steps are as follows:
View width as a percentage of parent view width
The distance between View.Leading and Superview.Leading as a percentage of Superview.Width
The implementation of this function is actually to make the View.Leading layout relative to Superview.Trailing, and then adjust the multiplier parameter. The following steps realize the distance between the left side of the Button and the left border of the parent view is 0.2 times the width of the parent view, as follows:
Percentage of Superview.Width between View.Leading and Superview.Leading
The distance between View.Trailing and Superview.Trailing as a percentage of Superview.Width
The requirement is to make View.Trailing layout relative to Superview.Trailing, and then adjust the multiplier parameter. It should be noted that Reverse First And Second Item the position of item1 and item2 in the following expression is adjusted on both sides of the equation.
item1.attribute1 = multiplier × item2.attribute2 + constant
The following steps realize that the right margin of Button's Trailing distance from the parent view is 0.2 times the width of the parent view. It should be noted that the multiplier at this time is (1-0.2=0.8). When modifying the Button constraint value, you can view it from the top navigation Changes to constraint expressions:
The distance between View.Trailing and Superview.Trailing as a percentage of Superview.Width
The distance between View.Leading and Superview.CenterX as a percentage of the superview.Width of the superview
Sometimes it is necessary to lay out UI components relative to the center line of the parent view, for example, set the distance between View.Leading and the center line of the parent view to 20% of the width of the parent view, that is, the multiplier value relative to the parent view CenterX is 1.4
The distance between View.Leading and Superview.CenterX as a percentage of the superview.Width of the superview
Limit the aspect ratio of the View
Sometimes we need to keep the aspect ratio of the view unchanged for zooming. In this case, we can set its Aspect Ratio to keep the aspect ratio fixed when zooming.
The interval between Views is a percentage of the width of Superview.Width
To achieve this requirement is not as simple as before, which requires adding a spacing view, setting edge spacing constraints between each view and adjacent spacing views, and then adding equal width constraints to all spacing views relative to their parent views, set A suitable ratio is sufficient. Here is a picture from the article Designing an Adaptive Layout for the iPhone 6 :
The interval between Views is a percentage of the width of Superview.Width
For the methods involved in this article, you can view them in the AutoLayoutMultiplier project.
refer to:
Reprinted from: http://liumh.com/2015/09/27/ios-autolayout-multiplier/#disqus_thread