How to design an automatic layout library: Take Sdautolayout as an example

Sdautolayout has been favored and supported by many iOS developers since its release, and has gained 2000+star on GitHub in less than half a year, and has been developed as a preferred automated layout library by many companies and individual developers. Now, take sdautolayout as an example to briefly explain how to design an automatic layout library. Original http://www.cocoachina.com/ios/20160405/15854.html ThemeiOS Development

Sdautolayout has been favored and supported by many iOS developers since its release, and has gained 2000+star on GitHub in less than half a year, and has been developed as a preferred automated layout library by many companies and individual developers. Now, take sdautolayout as an example to briefly explain how to design an automatic layout library.

The so-called automatic layout, in fact, is the manual layout of the calculation process to abstract a set of algorithms, and then use the constraint model to collect the view of the width and height of the data corresponding to each dimension, and finally at the right time to calculate the frame of the view based on constraints.

With this basic rationale in hand, we can design an automated layout library. In the process of designing the automatic layout library, we mainly need to solve the following problems:

1. When do automatic layout-related operations take place?

2. How do I implement an automatic layout algorithm?

3. How to design the constraint Model Management mechanism?

4. How do I design a simple, connected grammar API? (This step is not required, only for interested people to refer to sdautolayout, for example)

5. How do I automatically calculate cell height?

1. When do automatic layout-related operations take place?

First, when is the automatic layout-related operation the most appropriate? We know that when a frame of a view changes or because other circumstances need to adjust the sub-view will trigger the Layoutsubvies method, in manual layout we often override this method to achieve a pair of view adjustments. But when we design the automatic layout library, obviously should not forcibly rewrite the view Layoutsubvies method, this will destroy the developer to the view the independent monitoring and the control, therefore, after the Layoutsubvies method executes completes is I The best time to perform automatic layout-related operations. OK, so how do you monitor this "best time"? At this time I want to be familiar with OC run the classmate has thought, yes, is the use of OC Black Magic "Method swizzling" can be solved perfectly, code as follows (source address):

Exchange Layoutsubvies Method

2. How do I implement an automatic layout algorithm?

When we solve the problem of automatic layout arithmetic, the next problem we face is how to design the automatic layout algorithm, which is the core part of the whole automatic layout library.

Before talking about this layout algorithm, it is necessary to first describe one of the automatic layout algorithm elements I summed up: Calculate the absolute attribute first, then calculate the relative property.

So, what is a "relative property"? A relative property is a property that requires reference to other objects to make sense. For example, we will say "Henan in the south of Hebei", then this "South" is a relative property, with Hebei as a reference, this "South" is meaningful, if you only say "Henan in the South", then this "South" is meaningless. In automatic layout, a view's attributes such as x, Y, CenterX, CenterY, left, and right are part of this relative property.

Compared to "relative attribute", "absolute attribute" is good to understand that the so-called "absolute attribute" is not dependent on the changes in the reference to change the properties. For example, I would say "IPhone6 is a 4.7-inch screen", then this "4.7-inch" is an absolute attribute, and he will not be changed by comparison with other reference. In automatic layout, the width and height property of a view is this absolute property.

In addition, for each "relative attribute" calculation process, "Wide University inspection" is very necessary, if the width is not accurate, then the calculated right, bottom, CenterX, centery and other attribute values are certainly inaccurate. The sample code is as follows (source address):

Automatic layout

Right Automatic Layout method implementation

3. How to design the constraint Model Management mechanism?

Then, we also design the automatic layout constraint management mechanism, that is, each view of the constraints should be managed by whom? Is view yourself? Or the superview of the view? In conjunction with the analysis of the problem one, since it is the parent view that does the automatic layout calculation after calling the Layoutsubvies method, it is reasonable to have the parent view manage all child view constraints. In Sdautolayout, each view has a Autolayoutmodelsarray array to manage the constraints of the child view, which is called Sd_ The Layout method initializes a constraint model and adds it to the Autolayoutmodelsarray array of its parent view, which is why the child view is added to the parent view and then the layout setting when using the Sdautolayout procedure. The sample code is as follows (source address):

Initialize the constraint model

4. How do I design a simple, connected grammar API?

The chain syntax with its concise and clear advantages by many developers, in the Sdautolayout library, the constraint model will be a variety of layout data set the operation encapsulated in a block, each time the constraints of a dimension is actually called the corresponding block of the dimension, the relevant parameters to ( Parameter 1, parameter 2) is passed to the block for the relevant settings, and then the block each time the constraint model itself as a return result is passed, so that you can use the "." To invoke the block corresponding to the other dimension constraints. The sample code is as follows (source address):

Set constraints

Block corresponding to each dimension constraint

Internal implementation

5. How do I automatically calculate cell height?

Sdautolayout provides developers with a simple and efficient way to calculate cell height automatically, and the user simply calls one line of code "[Yourcell Setupautoheightwithbottomview:bottomview BottomMargin : BottomMargin]; " Cell Height auto-meter can be implemented easily.

In order to do this, the Sdautolayout library builds an internal model that is the same as your cell and assigns the model data that you pass over to the module cell, which is set to be called "[Self.modelCell.contentView Layoutsubviews] "method to calculate the true height of the cell and then return to your tableview, and also establish a cell height cache library for TableView scrolling directly back to the cell height without having to calculate again, if necessary, You can also turn on the cell's frame caching mechanism, which will give the cell's internal control a frame without having to always calculate the adjustment, thus greatly increasing the scrolling smoothness. The sample code is as follows (source address):

Turn on the cell's frame cache

return cell height

Returns and caches the cell height

OK, let's start with a brief introduction to this, and later on the above mentioned five points for detailed in-depth introduction, if there are good comments and suggestions welcome to Sdautolayout's GitHub address https://github.com/gsdios/SDAutoLayout Issue me, thanks!.

Sdautolayout's github address: https://github.com/gsdios/SDAutoLayout

Sdautolayout part APPHTTP://WWW.JIANSHU.COM/P/9BC04D3EFFB8 developed by the user

Automatic layout QQ Exchange Group: 497140713 (1 group) 519489682 (full)

Automatic Layout video Tutorial:

Sdautolayout Basic version Video tutorial: http://www.letv.com/ptv/vplay/24038772.html

Sdautolayout Advanced Video Tutorial: http://www.letv.com/ptv/vplay/24381390.html

Introduction to Sdautolayout Principle Video tutorial: http://www.iqiyi.com/w_19rt0tec4p.html

How to design an automatic layout library: Take Sdautolayout as an example