Ios ui basics 06 and iosui06

Ios ui basics 06 and iosui06

• Autoresizing

  • 1. Functions of the four lines around Autoresizing:

    • As long as you select the previous one, the distance between the current control and the parent control is fixed. What is the current number and what will always be in the future?

  • 2. Autoresizing:

    • As long as you select the line in the upper horizontal direction, the width of the current control scales proportionally with the width of the parent control.
    • As long as the line in the vertical direction is selected, the height of the current control scales out with the height of the parent control.

  • 3. Whether it is to fix the child control at a certain position of the parent control or let the child control change with the height of the parent control's width

  • 4 is a parent-child relationship, so Autoresizing can only constrain the relationship between parent and child controls, not between brother controls

  • Attribute

    @ Property (nonatomic) UIViewAutoresizing autoresizingMask; // simple resize. default is UIViewAutoresizingNone // set the autoresizing of the sub-control. Note: Check the upper left and lower sides of the Code and the opposite Storyboard on the Storyboard, it indicates that the distance to the left of the current control and the parent control is fixed. If FlexibleLeftMargin is written in the code, it indicates that the left of the current control and the parent control is extensible. In other words: if FlexibleLeftMargin is set, it indicates a fixed worker on the right. The worker can be scaled on the left. The worker can be scaled on the right. UIViewAutoresizingFlexibleWidth // The width can be scaled by UIViewAutoresizingFlexibleHeight // The height can be scaled

• Autolayout

  • 1. Constraints

    Each time you add a setting (autolayout setting) to the Storyboard, A constraint is added.

  • 2. Error (Red Arrow)

    If there is a red arrow in the Storyboard, it indicates that the constraint has an error. Note: The constraint has an error, but not the running will be incorrect. If the constraint has an error, you can also run it. Note: The Red Arrow must be solved by the programmer.

    • 3. Why is there a constraint error?
      • 3.1 constraints missing
        • The nature of autolayout is similar to that of frame.
        • If you use frame to set a control, you must set x/y/w/h of the control to display it as needed.
        • If you use autolayout to set a control, you must also set x/y/w/h of the control to display it as needed.
        • That is to say, if x/y/w/h is not set, an error will be reported, which is a lack of constraints.
      • 3.2 constraint conflict
        • Constraints can be added repeatedly
        • For example, if the constraint width is equal to 100 and another constraint is added, and the constraint width is equal to 200, an error is returned.

  • 4. Note

    • 20 = is equivalent to setting Y
    • 20 = is equivalent to setting x

  • 5. Warning

    • Warning If the Storyboard contains a yellow arrow
    • The position or size of the current widget preview is different from the position size we constrain.
    • Note: The Golden warning does not affect our operation.
    • Note: The yellow arrow can be ignored by programmers.

# Warning note: If you use code to set Autolayout constraints, you must first disable Autoresizing redView. translatesAutoresizingMaskIntoConstraints = NO; Item = first item attribute = the constraint type relatedBy to be set for first item = Relatio (equal) toItem = Second item attribute = constraint type of Second item multiplier = multiply by constant = plus? // 2.1 width NSLayoutConstraint * width = [NSLayoutConstraint constraintWithItem: redView attribute: constraint relatedBy: NSLayoutRelationEqual toItem: nil attribute: kNilOptions multiplier: 1.0 constant: 100.0]; // Add constraints to yourself [redView addConstraint: width];

• VFL

  // 1. disable Autgoresizing blueVeiw of The Red View. translatesAutoresizingMaskIntoConstraints = NO; redVeiw. translatesAutoresizingMaskIntoConstraints = NO; // 2. use VFL to add constraints/* variables used in metrics: VFL statements such as visual format: VFL options: Alignment: views: some controls used in the VFL statement * // 3.1 set Blue // 3.1.1 horizontal direction NSArray * blueHCos = [NSLayoutConstraint constraintsWithVisualFormat: @ "H: |-20-[blueVeiw]-20-| "options: kNilOptions metrics: nil views :@{@" blueVeiw ": blueVeiw}]; [self. view addConstraints: blueHCos]; // 3.1.2 NSArray * blueVCos = [NSLayoutConstraint constraintsWithVisualFormat: @ "V: |-20-[blueVeiw (= 50)]" options: kNilOptions metrics: nil views: @ {@ "blueVeiw": blueVeiw}]; [self. view addConstraints: blueVCos];

• Masonry framework

  '''Objc

  // Define this constant if you want to use Masonry without the 'mas _ 'prefixdefine MAS_SHORTHAND // Add this macro, you can remove the mas _ Attribute before the Object Access Object attribute in the Masonry framework, and the mas _ prefix before the method. // For example, make. left. similar to (self. view. mas_left ). with. offset (20); // For example, make. left. similar to (self. view. left ). with. offset (20); // define this constant if you want to enable auto-boxing for default syntaxdefine MAS_SHORTHAND_GLOBALS // when you add this macro and pass the parameter to the consumer, you can directly pass the basic data type, and the system will automatically package it. // if the above macro is not added, when the parameter is passed, the object must be passed // if you want to pass the basic data type, you must use mas_category to // you only need to import Masonry. before h, you can add two macros on the supervisor to simplify the code UIView * blueVeiw = [[UIView alloc] init]; blueVeiw. backgroundColor = [UIColor blueColor]; [self. view addSubview: blueVeiw]; self. blueVeiw = blueVeiw; UIView * redVeiw = [[UIView alloc] init]; redVeiw. backgroundColor = [UIColor redColor]; [self. view addSubview: redVeiw]; // 2. disable Autgoresizing blueVeiw of The Red View. translatesAutoresizingMaskIntoConstraints = NO; redVeiw. translatesAutoresizingMaskIntoConstraints = NO; // 3. add the blue constraint [blueVeiw makeConstraints: ^ (MASConstraintMaker * make) {make. left. similar to (self. view. left ). offset (20); make. right. similar to (self. view. right ). offset (-20); make. top. similar to (self. view. top ). offset (20); make. height. failed to (50);}]; // 4. add the red constraint [redVeiw makeConstraints: ^ (MASConstraintMaker * make) {make. top. similar to (blueVeiw. bottom ). offset (20); make. height. similar to (blueVeiw. height); make. right. similar to (blueVeiw. right); make. width. similar to (blueVeiw. width ). multipliedBy (0.5 );

  }];

  // Note: constraints can be added repeatedly on the Storyboard. You can also add constraints using Masonry. Note the errors and conflicts caused by repeated adding. // use makeConstraints, A new constraint will be added each time, which will lead to repeated addition. // [self. blueVeiw makeConstraints: ^ (MASConstraintMaker * make) {// make. height. failed to (100);}]; // use updateConstraints to update constraints // updateConstraints features: If not set, add a new // if already set, update the previously set [self. blueVeiw updateConstraints: ^ (MASConstraintMaker * make) {make. height. similar to (100);}];

// Clear the constraints remakeConstraints [self. blueVeiw remakeConstraints: ^ (MASConstraintMaker * make) {}];