Interface layout tool in iOS-MyLayout Layout Framework, ios-mylayout

Interface layout tool in iOS-MyLayout Layout Framework, ios-mylayout

 

• Swift: TangramKit:Https://github.com/youngsoft/TangramKit
• OC: MyLayout:Https://github.com/youngsoft/MyLinearLayout

Introduction

MyLayoutIs a set of iOS interface view layout framework. Its kernel is implemented based on the overload of the layoutSubviews method of UIView and the setting of the bounds and center attributes of the subview. MyLayout is powerful and easy to use. It integratesIOS Autolayout and Size Classes, 5 layout systems of android, floating Positioning Technology of HTML/CSS, and flex-box and bootstrap frameworksAnd provides a simple and complete multi-screen size adaptation solution. MyLayout also provides the Swift version.TangramKit

Advantages of MyLayout

• The implementation kernel of MyLayout is frame-based, rather than AutoLayout encapsulation. Therefore, it is not restricted by any operating system version.
• Some articles show that the performance of frame layout is higher than that of AutoLayout layout, especially when the number of views in the interface increases, the effect is more obvious.
• The idea of AutoLayout is to use constraints and dependencies between views to complete the layout, but the result of constraints and dependencies is that the coupling between views is high, increasing the cost of interface update. In addition to constraints and dependencies, MyLayout also provides the function of automatically creating constraints based on the order of view addition, which reduces the issue of displaying dependency relationships, the final result is that the layout code volume is simplified and the code modification volume is reduced when the layout is updated.
• AutoLayout is only a relatively Constrained Layout, in addition to providing relative layout with the same capabilities as AutoLayout, MyLayout also provides seven layout systems: Linear layout, framework layout, table layout, stream layout, floating layout, and path layout, you can select a simple layout container based on your interface requirements to implement your functions. At the same time, MyLayout also supports the Size classes mechanism, and provides some methods to perfectly adapt the screen size.
• MyLayout is mainly a solution for code layout, but the framework can also support the combination of XIB and SB layout. It also provides a highly adaptive layout and Layout View (UITableviewCell dynamic height) that is automatically triggered when the view is hidden and displayed) tag Cloud implementation, adaptive left and right content width, proportional distribution of dimensions and spacing, overall Dock control, and other powerful functions.

Performance Comparison of AutoLayout and frame layout s
 
 

Reference Article address: http://floriankugler.com/2013/04/22/auto-layout-performance-on-ios/

Application scenarios

The following is an example of an Application Scenario:

• There is A container view. The width of S is 100, and the height is the sum of the heights of A, B, C, and D arranged from top to bottom.
• The left side of view A occupies 20% of the width of the parent view, while the right side occupies 30% of the width of the parent view, and the height is equal to its own width.
• The left margin of View B is 40, and the width occupies the remaining width of the parent view, and the height is 40.
• The width of view C occupies all the width of the parent view, and the height is 40.
• The right margin of view D is 20, the width is 50% of the width of the parent view, and the height is 40.

The final result is as follows:

 MyLinearLayout *S = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];    S.subviewMargin = 10;    S.myWidth = 100;    UIView *A = UIView.new;    A.leftPos.equalTo(@0.2);    A.rightPos.equalTo(@0.3);    A.heightDime.equalTo(A.widthDime);    [S addSubview:A];    UIView *B = UIView.new;    B.leftPos.equalTo(@40);    B.widthDime.equalTo(@60);    B.heightDime.equalTo(@40);    [S addSubview:B];    UIView *C = UIView.new;    C.widthDime.equalTo(S.widthDime);    C.heightDime.equalTo(@40);    [S addSubview:C];    UIView *D = UIView.new;    D.rightPos.equalTo(@20);    D.widthDime.equalTo(S.widthDime).multiply(0.5);    D.heightDime.equalTo(@40);    [S addSubview:D];

 

System Structure
Layout position class MyLayoutPos

The MyLayoutPos class is used to describe the position of a view. The six variables leftPos, topPos, bottomPos, rightPos, centerXPos, and centerYPos are expanded in the UIView to implement the view positioning operation. You can useequalToMethod To set the margins and spacing between views.equalToYou can set NSNumber, MyLayoutPos, and NSArray <MyLayoutPos *> values for different scenarios. At the same time, the system provides six simple variables myLeftMargin, myTopMargin, myBottomMargin, myRightMargin, myCenterXOffset, and mYCenterYOffset to set NSNumber values, suchA. leftPos. equal to (@ 10); equivalent to A. myLeftMargin = 10;.

Layout size class MyLayoutSize

The MyLayoutSize class is used to describe the size of a view. The widthDime and heightDime variables are expanded in UIView to set the width and height of the view. You can useequalToTo set the width and height of the view.equalToYou can set NSNumber, MyLayoutSize, and NSArray <MyLayoutSize *> values for different scenarios. At the same time, the system provides two simple variables myWidth and myHeight to set the NSNumber type value, suchA. widthDime. Similar to (@ 10); equivalent to A. myWidth = 10;.

Linear layout MyLinearLayout

It is equivalent to iOS's UIStackView and android's LinearLayout layout.

Linear layout is a single column (single row) Layout View in the ascending order of adding or from left to right, therefore, the subview is added to establish constraints and dependencies. The linear Layout View arranged from top to bottom is called the vertical linear Layout View, while the linear Layout View arranged from left to right is called the horizontal linear layout.

Sample Code:

-(void)loadView{    [super loadView];    MyLinearLayout *S = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];    S.myWidth = 120;    S.subviewMargin = 10;    UIView *A = [UIView new];    A.myLeftMargin = A.myRightMargin = 5;    A.myHeight = 40;    [S addSubview:A];    UIView *B = [UIView new];    B.myLeftMargin = 20;    B.myWidth = B.myHeight = 40;    [S addSubview:B];    UIView *C = [UIView new];    C.myRightMargin = 40;    C.myWidth = 50;    C.myHeight = 40;    [S addSubview:C];    UIView *D = [UIView new];    D.myLeftMargin = D.myRightMargin = 10;    D.myHeight = 40;    [S addSubview:D];    [self.view addSubview:S];    S.backgroundColor = [UIColor redColor];    A.backgroundColor = [UIColor greenColor];    B.backgroundColor = [UIColor blueColor];    C.backgroundColor = [UIColor orangeColor];    D.backgroundColor = [UIColor cyanColor]; }

 

Relative layout: MyRelativeLayout

It is equivalent to iOS's AutoLayout and Android's RelativeLayout layout.

Relative layout is a type of Layout View in which child views are laid out and located by mutual constraints and dependencies. The layout position of the Child view in the relative layout is irrelevant to the order of addition. Instead, the Child view is located and laid out by setting the relative dependency relationship.

Sample Code:

-(void)loadView{    [super loadView];    MyRelativeLayout *S = [MyRelativeLayout new];    S.widthDime.equalTo(@170);    S.heightDime.equalTo(@280);    UIView *A = [UIView new];    A.leftPos.equalTo(@20);    A.topPos.equalTo(@20);    A.widthDime.equalTo(@40);    A.heightDime.equalTo(A.widthDime);    [S addSubview:A];    UIView *B = [UIView new];    B.leftPos.equalTo(A.centerXPos);    B.topPos.equalTo(A.bottomPos).offset(10);    B.widthDime.equalTo(@60);    B.heightDime.equalTo(A.heightDime);    [S addSubview:B];    UIView *C = [UIView new];    C.leftPos.equalTo(B.rightPos).offset(10);    C.bottomPos.equalTo(B.bottomPos);    C.widthDime.equalTo(@40);    C.heightDime.equalTo(B.heightDime).multiply(0.5);    [S addSubview:C];    UIView *D = [UIView new];    D.bottomPos.equalTo(C.topPos).offset(10);    D.rightPos.equalTo(@15);    D.heightDime.equalTo(A.heightDime);    D.widthDime.equalTo(D.heightDime);    [S addSubview:D];    UIView *E = [UIView new];    E.centerYPos.equalTo(@0);    E.centerXPos.equalTo(@0);    E.heightDime.equalTo(@40);    E.widthDime.equalTo(S.widthDime).add(-20);    [S addSubview:E];    //.. F, G    [self.view addSubview:S];    S.backgroundColor = [UIColor redColor];    A.backgroundColor = [UIColor greenColor];    B.backgroundColor = [UIColor blueColor];    C.backgroundColor = [UIColor orangeColor];    D.backgroundColor = [UIColor cyanColor];    E.backgroundColor = [UIColor magentaColor];}

 

Frame layout MyFrameLayout

It is equivalent to the FrameLayout layout of Android.

Frame layout is a type of Layout View in which the child views are docked in the specific orientation of the parent view and can overlap. The layout position of the Child view in the framework layout is independent of the order in which the child view is added. It only establishes a layout constraint dependency with the parent view. The frame layout divides the vertical direction into three orientations: Top, middle, and bottom, while the horizontal direction is divided into three orientations: Left, center, and right, any subview can only be located in one vertical or horizontal direction.

Sample Code:

 -(void)loadView{    [super loadView];    MyFrameLayout *S = [MyFrameLayout new];    S.mySize = CGSizeMake(320,500);    UIView *A = [UIView new];    A.mySize = CGSizeMake(40,40);    [S addSubview:A];    UIView *B = [UIView new];    B.mySize = CGSizeMake(40,40);    B.myRightMargin = 0;    [S addSubview:B];    UIView *C = [UIView new];    C.mySize = CGSizeMake(40,40);    C.myCenterYOffset = 0;    [S addSubview:C];    UIView *D = [UIView new];    D.mySize = CGSizeMake(40,40);    D.myCenterOffset = CGPointZero;    [S addSubview:D];    //..E，F,G    [self.view addSubview:S];    S.backgroundColor = [UIColor redColor];    A.backgroundColor = [UIColor greenColor];    B.backgroundColor = [UIColor blueColor];    C.backgroundColor = [UIColor orangeColor];    D.backgroundColor = [UIColor cyanColor];    }

 

Table layout MyTableLayout

It is equivalent to the TableLayout layout of Android and the table element of HTML.

Table layout is a layout view in which sub-views can be arranged in multiple rows and multiple columns like tables. Before adding a child view to a table layout view, you must first create and add a row view, and then add the child View to the row view. If the row view is arranged from top to bottom in the table layout, the table layout is vertical, and the child views in the vertical table layout are arranged from left to right in the row view; if the row view is arranged from left to right in the table layout, the table layout is horizontal, and the child views in the horizontal table layout are arranged from top to bottom in the row view.

Sample Code:

-(void)loadView{    [super loadView];    MyTableLayout *S = [MyTableLayout tableLayoutWithOrientation:MyLayoutViewOrientation_Vert];    S.wrapContentWidth = YES;    S.rowSpacing = 10;    S.colSpacing = 10;    [S addRow:MTLSIZE_WRAPCONTENT colSize:MTLSIZE_WRAPCONTENT];    UIView *A = [UIView new];    A.mySize = CGSizeMake(50,40);    [S addSubview:A];    UIView *B = [UIView new];    B.mySize = CGSizeMake(100,40);    [S addSubview:B];    UIView *C = [UIView new];    C.mySize = CGSizeMake(30,40);    [S addSubview:C];    [S addRow:MTLSIZE_WRAPCONTENT colSize:MTLSIZE_WRAPCONTENT];    UIView *D = [UIView new];    D.mySize = CGSizeMake(200,40);    [S addSubview:D];    //...E,F      [self.view addSubview:S];    S.backgroundColor = [UIColor redColor];    A.backgroundColor = [UIColor greenColor];    B.backgroundColor = [UIColor blueColor];    C.backgroundColor = [UIColor orangeColor];    D.backgroundColor = [UIColor cyanColor];}

 

Stream layout MyFlowLayout

It is equivalent to the flex-box of CSS3.

Streaming layout is a layout view in which the child views are arranged in order of addition. When some constraints are imposed, the child views are displayed in multiple rows in a new row. Here, there are two types of constraints: quantity constraint and content size constraint. The line feed direction is vertical and horizontal, therefore, the streaming layout includes vertical quantity constraints, vertical content constraints, horizontal quantity constraints, and horizontal content constraints. Stream layout is mainly used in scenarios where sub-views are arranged regularly. To some extent, it can be used as a substitute for UICollectionView.

Sample Code:

-(void)loadView{    [super loadView];    MyFlowLayout *S = [MyFlowLayout flowLayoutWithOrientation:MyLayoutViewOrientation_Vert arrangedCount:4];    S.wrapContentHeight = YES;    S.myWidth = 300;    S.padding = UIEdgeInsetsMake(10, 10, 10, 10);    S.gravity = MyMarginGravity_Horz_Fill;    S.subviewMargin = 10;    for (int i = 0; i < 10; i++)    {        UIView *A = [UIView new];        A.heightDime.equalTo(A.widthDime);        [S addSubview:A];        A.backgroundColor = [UIColor greenColor];    }    [self.view addSubview:S];    S.backgroundColor = [UIColor redColor];}

 

Floating layout MyFloatLayout

It is equivalent to float positioning in css.

Floating layout is a kind of Layout View where the child views are floating in the agreed direction. When the size is not enough to be accommodated, the child views are automatically located at the best position for floating parking. The concept of floating layout is derived from the floating Positioning Technology in HTML/CSS, So floating layout can be used to achieve irregular layout or layout surrounded by text and text. Based on the floating direction, the floating layout can be divided into the left-right floating layout and the up-down floating layout.

Sample Code:

-(void)loadView{    [super loadView];    MyFloatLayout *S  = [MyFloatLayout floatLayoutWithOrientation:MyLayoutViewOrientation_Vert];    S.wrapContentHeight = YES;    S.padding = UIEdgeInsetsMake(10, 10, 10, 10);    S.subviewMargin = 10;    S.myWidth = 300;    UIView *A = [UIView new];    A.mySize = CGSizeMake(80,70);    [S addSubview:A];    UIView *B = [UIView new];    B.mySize = CGSizeMake(150,40);    [S addSubview:B];    UIView *C = [UIView new];    C.mySize = CGSizeMake(70,40);    [S addSubview:C];    UIView *D = [UIView new];    D.mySize = CGSizeMake(100,140);    [S addSubview:D];    UIView *E = [UIView new];    E.mySize = CGSizeMake(150,40);    E.reverseFloat = YES;    [S addSubview:E];    UIView *F = [UIView new];    F.mySize = CGSizeMake(120,60);    [S addSubview:F];    [self.view addSubview:S];    S.backgroundColor = [UIColor redColor];    A.backgroundColor = [UIColor greenColor];    B.backgroundColor = [UIColor blueColor];    C.backgroundColor = [UIColor orangeColor];    D.backgroundColor = [UIColor cyanColor];    E.backgroundColor = [UIColor blackColor];    F.backgroundColor = [UIColor whiteColor];}

 

Path layout MyPathLayout

Exclusive layout Library

The path layout is a Layout View Based on the path formed by a specific curve function provided by you. You need to provide a function to implement the curve path, a specific coordinate system, and a specific sub-view distance settings on the curve to achieve the interface layout. After the curve path is formed, the Child view is arranged along the curve at equal distance. The path layout is mainly used for irregular arrangement with specific rules, and the interface layout is very cool.

Sample Code:

 -(void)loadView{    [super loadView];    MyPathLayout *S = [MyPathLayout new];    S.mySize = CGSizeMake(320,320);    S.coordinateSetting.isReverse = YES;    S.coordinateSetting.origin = CGPointMake(0.5, 0.2);    S.polarEquation = ^(CGFloat angle)    {        return 80 * (1 + cos(angle));    };    for (int i = 0; i < 4; i++)    {        UIView *A = [UIView new];        A.mySize = CGSizeMake(40,40);        [S addSubview:A];        A.backgroundColor = [UIColor greenColor];    }    [self.view  addSubview:S];    S.backgroundColor = [UIColor redColor]; }

 

Support for Size Classes

Equivalent to iOS's Size Classes

The MyLayout layout system provides support for Size Classes to adapt devices of different screen sizes. You can use the Size Classes in combination with the preceding six la s to perfectly adapt to various device interfaces. The system provides two extension methods for UIView:

-(instancetype)fetchLayoutSizeClass:(MySizeClass)sizeClass;-(instancetype)fetchLayoutSizeClass:(MySizeClass)sizeClass copyFrom:(MySizeClass)srcSizeClass;

 

To support the Size Classes. For example:

// Default settings for all devices. MyLinearLayout * rootLayout = [MyLinearLayout linearLayoutWithOrientation: MyLayoutViewOrientation_Vert]; rootLayout. padding = UIEdgeInsetsMake (10, 10, 10, 10); rootLayout. wrapContentHeight = NO; rootLayout. gravity = MyMarginGravity_Horz_Fill; // MySizeClass_wAny | MySizeClass_hCompact indicates the horizontal screen of the iPhone. myLinearLayout * lsc = [rootLayout fetchLayoutSizeClass: MySizeClass_wAny | MySizeClass_hCompact copyFrom: MySizeClass_wAny | MySizeClass_hAny]; lsc. orientation = MyLayoutViewOrientation_Horz; lsc. wrapContentWidth = NO; lsc. gravity = MyMarginGravity_Vert_Fill;

 

How to install CocoaPods directly

If you have not installed cocoapods, run the following command:

$ gem install cocoapods

To integrate MyLayout into your Xcode project with CocoaPods, create the following Podfile:

source 'https://github.com/CocoaPods/Specs.git'platform :ios, '7.0'pod 'MyLayout', '~> 1.3.4'

Run the following command:

$ pod install

Demo link:

Welcome to my github site and follow @ Ouyang Ge

• Swift: TangramKit:Https://github.com/youngsoft/TangramKit
• OC: MyLayout:Https://github.com/youngsoft/MyLinearLayout