“IOS UIStackView” “iOS automatic layout” “StackView” by Xs·H

When I shared the automatic layout of iOS UIButton according to the content in Mulinlo offline, I discussed the common layout mode of iOS with my front-end classmates. The discussion process is very lively and not easy to record, but the author thinks it is necessary to record the results of the discussion, hoping to help some students. The author classifies the most popular iOS layouts into Frame, Autoresizing, Constraint, StackView, and navigation, and explains them one by one. This article introduces StackView.

UIStackView is a new view class for UIKit in iOS9. It can be thought of as a container that can lay out views added to the container in rows or columns. The author uses the four-point diagram mentioned in the previous article as an example, which can be implemented very quickly in combination with storyboards. The diagram below.

As shown above, the author used UIStackView to quickly build a 4-point layout without coding, without even adding constraints to the 4-point layout. It can be seen that UIStackView has a powerful ability and efficiency in automatic layout. Of course, UIStackView also allows developers to code and use properties to achieve desired effects. The code for using UIStackView to achieve the 4-point graph effect is as follows.

- (void)viewDidLoad { [super viewDidLoad]; UIView *subView1 = [[UIView alloc] initWithFrame:CGRectZero]; subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6]; UIView *subView2 = [[UIView alloc] initWithFrame:CGRectZero]; subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6]; UIView *subView3 = [[UIView alloc] initWithFrame:CGRectZero]; subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6]; UIView *subView4 = [[UIView alloc] initWithFrame:CGRectZero]; subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6]; UIStackView *subStackView1 = [[UIStackView alloc] initWithFrame:CGRectZero]; SubStackView1. Spacing = 10.0; subStackView1.alignment = UIStackViewAlignmentFill; subStackView1.axis = UILayoutConstraintAxisHorizontal; subStackView1.distribution = UIStackViewDistributionFillEqually; [subStackView1 addArrangedSubview:subView1]; [subStackView1 addArrangedSubview:subView2]; UIStackView *subStackView2 = [[UIStackView alloc] initWithFrame:CGRectZero]; SubStackView2. Spacing = 10.0; subStackView2.alignment = UIStackViewAlignmentFill; subStackView2.axis = UILayoutConstraintAxisHorizontal; subStackView2.distribution = UIStackViewDistributionFillEqually; [subStackView2 addArrangedSubview:subView3]; [subStackView2 addArrangedSubview:subView4]; UIStackView *stackView = [[UIStackView alloc] initWithFrame:self.view.bounds]; stackView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; StackView. Spacing = 10.0; stackView.alignment = UIStackViewAlignmentFill; stackView.axis = UILayoutConstraintAxisVertical; stackView.distribution = UIStackViewDistributionFillEqually; [stackView addArrangedSubview:subStackView1]; [stackView addArrangedSubview:subStackView2]; [self.view addSubview:stackView]; }Copy the code

In the above code, the author put four subviews into two SubstackViews, and realized the subviews in the subStackView horizontal and equal width, and then put two SubstackViews into the stackView. And realize subStackView vertical contour arrangement in stackView. Here, I’ll focus on the properties that enable these effects.

  • axis

Axis is an enumeration variable of type UILayoutConstraintAxis that sets the orientation of the stackView alignment.

/* A stack with a horizontal axis is a row of arrangedSubviews,
and a stack with a vertical axis is a column of arrangedSubviews.
 */
@property(nonatomic) UILayoutConstraintAxis axis;
Copy the code
typedef NS_ENUM(NSInteger, UILayoutConstraintAxis) {
    UILayoutConstraintAxisHorizontal = 0,
    UILayoutConstraintAxisVertical = 1
};
Copy the code
  • alignment

Alignment is an enumeration variable of type UIStackViewAlignment that sets the alignment of stackView child views.

/* The layout of the arrangedSubviews transverse to the axis;
 e.g., leading/trailing edges in a vertical stack
 */
@property(nonatomic) UIStackViewAlignment alignment;
Copy the code
/* transverse to the stacking axis. */ typedef NS_ENUM(NSInteger, UIStackViewAlignment) { /* Align the leading and trailing edges of vertically stacked items or the top and bottom edges of horizontally stacked items tightly to the container. */ UIStackViewAlignmentFill,//! Align the leading edges of stacked items or the top edges of horizontally stacked items tightly to  the relevant edge of the container */ UIStackViewAlignmentLeading,//! < vertical array, the child views left-aligned UIStackViewAlignmentTop = UIStackViewAlignmentLeading, / /! < aligned on a horizontal arrangement, the child views UIStackViewAlignmentFirstBaseline, / / Validforhorizontal axis only //! When arranged horizontally, subviews align with the first line of text of the first subviewin a vertical stack horizontally
     or the items ina horizontal stack vertically */ UIStackViewAlignmentCenter,//! < center alignment /* Align the trailing edges of vertically stacked items or the bottom edges of horizontally stacked items tightly  to the relevant edge of the container */ UIStackViewAlignmentTrailing,//! < vertical array, the child views right-aligned UIStackViewAlignmentBottom = UIStackViewAlignmentTrailing, / /! < align horizontal arrangement, child views the UIStackViewAlignmentLastBaseline, / / Validforhorizontal axis only //! < in horizontal order, subviews are aligned with the last line of text of the last subview} NS_ENUM_AVAILABLE_IOS(9_0);Copy the code
  • distribution

Distribution is an enumeration variable of type UIStackViewDistribution that sets the width or height layout of stackView child views.

/* The layout of the arrangedSubviews along the axis
 */
@property(nonatomic) UIStackViewDistribution distribution;
Copy the code
/* Distribution - The layout along the stacking axis. All UIStackViewDistribution enum values fit first and last arranged subviews tightly to the container, and exceptfor UIStackViewDistributionFillEqually, fit all items to intrinsicContentSize when possible.
 */
typedef NS_ENUM(NSInteger, UIStackViewDistribution) {
    
    /* When items donot fit (overflow) or fill (underflow) the space available adjustments occur according to compressionResistance or hugging priorities of items, or when that is ambiguous, according to arrangement order. */ UIStackViewDistributionFill = 0, //! < subview fill, /* Items are all the same size. When space allows, this will be the size of the item with the largest intrinsicContentSize (along the axis of the stack). Overflow or underflow adjustments are distributed equally among the items. */ UIStackViewDistributionFillEqually,//! Overflow or underflow adjustments are distributed among the items proportional to their intrinsicContentSizes. */ UIStackViewDistributionFillProportionally,//! < subviews are proportionally filled /* Additional underflow spacing is divided equallyinthe spaces between the items. Overflow squeezing is controlled by compressionResistance priorities followed by arrangement order. */ UIStackViewDistributionEqualSpacing,//! < subview spacing /* Equal center-to-center spacing of the items is maintained as much as possiblewhile still maintaining a minimum edge-to-edge spacing within the
     allowed area.
        Additional underflow spacing is divided equally in the spacing. Overflow 
     squeezing is distributed first according to compressionResistance priorities 
     of items, then according to subview order whilemaintaining the configured (edge-to-edge) spacing as a minimum. */ UIStackViewDistributionEqualCentering,//! < subview, etc. midpoint padding} NS_ENUM_AVAILABLE_IOS(9_0);Copy the code
  • spacing

Spacing is a variable of type CGFloat that sets the spacing between stackView child views.

/* Spacing between adjacent edges of arrangedSubviews.
 Used as a strict spacing for the Fill distributions, and
 as a minimum spacing forMark the equalpress and Equalpressing. Use negative values to allow overlap. On iOS 11.0 or later, use UIStackViewSpacingUseSystem (Swift: UIStackView.spacingUseSystem) to get a system standard spacing value. Setting spacing to UIStackViewSpacingUseDefault (Swift: UIStackView.spacingUseDefault) will resultin a spacing of 0.
 
 System spacing between views depends on the views involved, and may vary across the 
 stack view.
 
 In vertical stack views with baselineRelativeArrangement == YES, the spacing between 
 text-containing views (such as UILabels) will depend on the fonts involved.
 */
@property(nonatomic) CGFloat spacing;
Copy the code

To sum up, UIStackView is a magic tool for iOS layout, which can play an important role in cell and other scenarios with common layout requirements. For the code portion of this article, you can get it from QiLayoutDemo.

Xiaobian wechat: You can add and pull into “QiShare Technical Exchange Group”.

QiShare(Simple book) QiShare(digging gold) QiShare(Zhihu) QiShare(GitHub) QiShare(CocoaChina) QiShare(StackOverflow) QiShare(wechat public account)

IOS UIButton automatic layout based on content iOS specified initialization method in UIView hitTest method