Painted levels: being fostered fostered fostered

For iOS navigation, I would like to retrieve all the navigation I’d like to retrieve

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. I’ll tell you about navigation.

In the Constraint article on common layout methods for iOS, I introduced the power of NSLayoutConstraint when it comes to layout the interface, but also experienced how long and hard to read the NSLayoutConstraint code syntax. The navigation framework I’ll introduce you to is a lightweight layout framework that wraps AutoLayout in a better syntax and provides a linkable way to describe the NSLayoutConstraint, making the layout code simpler and easier to read.

Navigation is a third-party framework based on the NSLayoutConstraint, which you’ll find on GitHub. Here, the author will only show you the code to implement the four pictures using navigation.

@implementation QiMasonryViewController - (void)viewDidLoad { [super viewDidLoad]; _contentView = [[QiMasonryContentView alloc] initWithFrame:CGRectZero]; _contentView.backgroundColor = [UIColor lightGrayColor]; [self.view addSubview:_contentView]; [_contentView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view.mas_top); make.left.equalTo(self.view.mas_left); make.right.equalTo(self.view.mas_right); Make. Bottom. EqualTo (self. View. Mas_bottom). With the offset (20.0);}]; } @endCopy the code
@implementation QiMasonryContentView

- (instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    
    if (self) {
        
        _subView1 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView1];
        
        _subView2 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView2];
        
        _subView3 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView3];
        
        _subView4 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView4];
        
        [_subView1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(20);
            make.left.mas_equalTo(10);
            make.width.equalTo(self.subView2);
            make.height.equalTo(self.subView3);
            make.right.equalTo(self.subView2.mas_left).offset(-20);
        }];
        [_subView2 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.subView1.mas_top);
            make.right.equalTo(self).offset(-10);
            make.width.equalTo(self.subView1);
            make.height.equalTo(self.subView4);
        }];
        
        [_subView3 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(self.subView1.mas_bottom).offset(20);
            make.left.mas_equalTo(10);
            make.width.mas_equalTo(self.subView4);
            make.height.mas_equalTo(self.subView1);
            make.bottom.mas_equalTo(self).offset(-20);
        }];
        [_subView4 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(self.subView3);
            make.left.mas_equalTo(self.subView3.mas_right).offset(20);
            make.right.mas_equalTo(self).offset(-10);
            make.width.mas_equalTo(self.subView3);
            make.height.mas_equalTo(self.subView2);
            make.bottom.mas_equalTo(self).offset(-20);
        }];
    }
    
    return self;
}

@end
Copy the code

The effect of the above code is shown below.

The code in this article can be obtained from QiLayoutDemo.

Summary of common iOS layout methods

By the end of this article, I’ve taken a look at Frame, Autoresizing, Constraint, StackView, and navigation. The author’s goal is to give some readers a comprehensive understanding of iOS layout by introducing these layout methods. As for which layout method is often asked, it is really difficult to answer, but you can share the use of these layout methods in the project, as well as the problems encountered, for readers and students reference.

  • 1. Frame+Autoresizing

Thanks to the programming flexibility of Frame and the simplicity of Autoresizing, the combined layout of Frame+Autoresizing accounted for the highest proportion in QiShare project. But in cases where you only need to manipulate a frame property (for example, if you only want to change the width), the code becomes redundant. Therefore, the introduction of UIView+QiAddition can be improved to a certain extent. As follows.

_subView. Qi_top = 10.0; _subView. Qi_left = 20.0; _subView. Qi_width = 300.0; _subView. Qi_height = 40.0;Copy the code
  • 2. Storyboard-based Constraint

Storyboard is a handy tool that is much more efficient than Frame coding for building simple interfaces. With AutoLayout’s Constraint, you can quickly build interfaces with layout constraints. However, when the AutoLayout concepts and constraints are not clearly understood, constraints often conflict, and troubleshooting is difficult. In addition, opening Storyboard files requires more computer power, and the author’s iMac is often stuttering.

  • 3. Constraint+ Navigation based on pure code

The tripartit navigation library is based on the NSLayoutConstraint layout, which makes control constraints easier to read in pure code. However, NSLayoutConstraint is rarely used in collaborative projects due to its incompatibility with frames.

  • 4. The Frame + + StackView StackView or Constraint

StackView depends on whether the interface needs to be arranged in a way that is not limited to Frame or Constraint. However, since UIStackView is only available in iOS9+, it will not be used in projects with minimum iOS9- support. UIStackView will be used more and more in future projects as the current minimum supported version of the project is gradually upgraded to iOS10+.

Recommended articles:

IOS UIButton automatically layouts based on content iOS specified initialization method hitTest method in UIView