Auyo Layout without restrictions

Stack Views displays the capabilities of Auto Layout in a simple way. A simple Stack View determines the horizontal and vertical elements of the user interface. The Stack View arranges these elements based on attributes

  • axis:(UIStackView only)Determines whether the UIStackViews subViews should rotate vertically or vertically
  • orientation:(NSStackView only)Same as above, but Macos development
  • distribution:Determine the axis against which the page is laid out
  • alignment:Determine the coordinates of the Stack View

Implementation steps:

  1. In the XIB interface. Drag into a StackView
  2. Then drag in the Views of the child
  3. You can set space. Alignment. Axis to layout the child views

Parsing Constraint display

!

The leading edge of Red View must be 8.0 points at the end of Blue View:

  • Item1: This Item must be a View or a Layout guide
  • Attribute 1: Item1The ones that need to be restricted, in this case RedViewleading edge
  • Relationship: This Relationship is on the left and right side. The relationship can be equal, greater or less than
  • Multiplier: (I don't know what that means yet)The value of attribute 2 is multiplied by this floating point number. In this case, the multiplier is 1.0.
  • Item 2: This can be empty
  • Attribute 2:
  • Constant: is the length or width of the limit

Auto Layout parameters

Official document: NSLayoutAttribute

Here are some of the official error-proofing tips.

  • The location needs to be given to a comparison object
  • You cannot constrain a size attribute to a location attribute.
  • You cannot assign constant values to location attributes
  • You cannot use a nonidentity multiplier (a value other than 1.0) with location attributes.
  • For location attributes, you cannot constrain vertical attributes to horizontal attributes.
  • For location attributes, you cannot constrain Leading or Trailing attributes to Left or Right attributes.
// Setting a constant height view. height = 0.0 * NotAnAttribute + 40.0 // Setting a fixed distance between two buttons Button_2.leading = 1.0 * button_1.trailing + 8.0 // Aligning the leading edge of two buttons button_1.leading = 1.0 * trailing + 8.0 // Aligning the leading edge of two buttons button_1.leading = 1.0 * Button_2.leading + 0.0 // Give two buttons the same width button_1.width = 1.0 * button_2.width + 0.0 // Center a view In its superview view.centerX = 1.0 * superview. centerX + 0.0 view.centerY = 1.0 * superview. centerY + 0.0 // Give a View a constant aspect ratio view. height = 2.0 * view. width + 0.0Copy the code
- (UIButton *)button1 {if (! _button1) { _button1 = [UIButton buttonWithType:UIButtonTypeCustom]; [_button1 setTitle: @ "click" forState: UIControlStateNormal]; [_button1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [_button1 setBackgroundColor:[UIColor greenColor]]; [_button1 setTranslatesAutoresizingMaskIntoConstraints:NO]; } return _button1; } - (UIButton *)button2 { if (! _button2) { _button2 = [UIButton buttonWithType:UIButtonTypeCustom]; [_button2 setTitle: @ "click on the 2" forState: UIControlStateNormal]; [_button2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [_button2 setBackgroundColor:[UIColor greenColor]]; [_button2 setTranslatesAutoresizingMaskIntoConstraints:NO]; } return _button2; } - (void)viewDidLoad { [super viewDidLoad]; [self.view addSubview:self.button1]; UILayoutGuide *margin = self.view.layoutMarginsGuide; [self. For the topAnchor constraintEqualToAnchor: margin topAnchor constant: 60.0]. Active = YES; [self. For the widthAnchor constraintEqualToConstant: 100.0]. Active = YES; [self. For the heightAnchor constraintEqualToConstant: 50.0]. Active = YES; [self.button1.centerXAnchor constraintEqualToAnchor:margin.centerXAnchor].active = YES; [self.view addSubview:self.button2]; UILayoutGuide *button1Margin = self.button1.layoutMarginsGuide; [self.button2.topAnchor constraintEqualToAnchor:button1Margin.bottomAnchor constant:80].active = YES; [self.button2.centerXAnchor constraintEqualToAnchor:button1Margin.centerXAnchor].active = YES; [self.button2.heightAnchor constraintEqualToConstant:50].active = YES; [self.button2.widthAnchor constraintEqualToConstant:200].active = YES; }Copy the code