preface

The big front end is a trend in the future, and the box layout is also a trend in terms of layout. How do we use the box layout in iOS development?

1. Native iOS layout

1.1 iOS Layout

The following two are commonly used in iOS development

  • Frame

Frame layout is a relative layout that sets the coordinates of the view and depends on the parent view

  • Auto Layout

Cassowary is an algorithm developed in the 1990s to solve user interface Layout problems. It abstracted the Layout problems into linear equations or inequality constraints to solve. The Auto Layout we want to know is a realization of Cassowary algorithm. Layout will be carried out by the relationship between view controls, but the syntax itself is very long. We will usually implement it by tripartite framework, such as navigation

1.2 Principle of Auto Layout

We use storyboard to demonstrate, and we determine the layout of a view

Our blue view above can rely on the yellow view below for layout and set equal width and height

The left

Bottom distance from yellow head distance

The same is true according to their dependencies when we rotate the screen

This is automatic layout, depending on our defined view, layout according to dependencies.

Using Frame

UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(20.350.100.60)];

    view1.backgroundColor = [UIColor orangeColor];

    [self.view addSubview:view1];

    

    UIView *view2 = [[UIView alloc]init];

    view2.backgroundColor = [UIColor greenColor];

    CGRect frame = CGRectMake(0.0.0.0);

    frame.size = view1.frame.size;

    frame.origin.x = view1.frame.origin.x;

    frame.origin.y = view1.frame.origin.y - view1.frame.size.height  -40;

    view2.frame = frame;

    [self.view addSubview:view2];
Copy the code

But when we rotate the screen, it doesn’t turn out the way we want it to, and that’s the downside of absolute layout

This is how auto layout works. Controls are dependencies, not absolute relationships

2. YogaKit

2.1 FlexBox

FlexBox is a box layout method, which is widely used in front end and page. The layout method is mainly row, column and stack. the control is similar to a box, flexible layout.

FlexBox treats each view as a rectangular box, with margins inside and outside, arranged along the main axis, and with no dependencies between peer views.

Elements with a Flex layout are called Flex containers, or ‘containers’ for short, and all of their elements automatically become members of the container, called Flex projects. An elastic layout has nothing to do with direction, it’s a one-dimensional layout. The introduction to Flexbox can help me learn about box layout in my Flutter study article. Flutter learning -09- Layout of Flutter learning components

2.2 YogaKit

YogaKit is a facebook open source framework for box layout, which is suitable for the whole big front end. Here we mainly introduce the use of YogaKit on iOS. Check out YogaKit on GitHub

Let’s create a new project pod ‘YogaKit’

Let’s take a look at ctrip’s home page and menu layout

Let’s analyze how to lay out. There are many ways to lay out. We can divide the whole into four sections and lay out from top to bottom. The first two layout styles can be arranged horizontally or vertically. The third block can be divided into two parts. The one on the right can be arranged horizontally or vertically after the horizontal layout

We can also see that there is spacing between components and between itemButtons. Here’s the difference between padding and margin. The padding is similar to UIEdgeInsets in iOS, which constrain the inner margin, and the margin is the outer margin

Red ismarginThe white area is equivalent topadding

We’re going to set

#define paddingNo   3

#define marginNo    .5f

#define columnNo    3

#define btnHeight   62

#define btnWidth    ((UI_SCREEN_WIDTH - paddingNo*2 - columnNo*marginNo*2) / columnNo)
Copy the code

2.3 the use of

The expansion of UIViewContinue to seeYGLayout.YGLayouttheisEnabledThe default isno, to manually open, and at the same timeMain thread layout UI.

2.3.1 Module 1 and Module 2

Let’s pull out the button creation

- (UIButton *)createBtnWithTitle:(NSString *)title BackgroundColor:(UIColor *)color ImageIndex:(int)index {

    UIButton *commonBtn = [[UIButton alloc] init];

    [commonBtn setBackgroundImage:[UIImage imageNamed:[NSString stringWithFormat:@"btnImg_%d", index]] forState:UIControlStateNormal];

    commonBtn.backgroundColor = color;

    [commonBtn setTitle:title forState:UIControlStateNormal];

    [commonBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];

    commonBtn.titleLabel.font = [UIFont systemFontOfSize:15];

    commonBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

    [commonBtn setTitleEdgeInsets:UIEdgeInsetsMake(index==13? -btnHeight:0.10.0.0)];

    [commonBtn addTarget:self action:@selector(commonBtnAction:) forControlEvents:UIControlEventTouchUpInside];

    

    return commonBtn;

}


- (void)commonBtnAction:(UIButton *)sender { sender.selected = ! sender.selected; UIViewAnimationTransition tra = sender.selected? UIViewAnimationTransitionFlipFromLeft:UIViewAnimationTransitionFlipFromRight; [UIView animateWithDuration:35. animations:^{

        [UIView setAnimationTransition:tra forView:sender cache:YES];

    }];

}
Copy the code

Achieve the effect of module 1

We finally set down the main interface of the layout configuration, at the same time take the initiative to call applyLayoutPreservingOrigin: parent view perform calculation results and use the updated layout hierarchy view frame

Let’s change the main axis of the container to Column. If we don’t set the height, the container will fill up automatically

Set the heightCan reach usrowThe default container layout is vertical.

Module two is similar

2.3.2 Modules 3 and 4

For module 3 we have a problem adding it directly

We think of the right-hand side as a module

Module 4 similar

It’s also handy when we adjust the numbers

We can also implement a custom grid type

The code address