Language is not unfamiliar to everyone, each region has its own unique language, a language will certainly have grammar. Computers have their own language, which means the same thing, but expresses it in different ways. At present, many iOS development pages have used InterFace Builder for UI development. As iPhone and iPad screens get bigger and bigger, it’s hard for developers to develop, so it’s all about automatic layout. For example:
UIViewAutoresizing, Auto Layout, Size Classes
The layout framework that Auto uses most often has both advantages and disadvantages. When using NSLayoutConstraint, the code is so heavy and often repetitive that many people don’t want to use it. Later, a third-party layout framework encapsulated by NSLayoutConstraint appeared on Github. It is very convenient to use it. This article will explain how to use it in detail.
This article mainly introduces the navigation
The main brief introduction to its use, there is no internal implementation, next time to share a principle of internal implementation, and the chained syntax
What is a Masonry
It is a third-party automatic layout framework that encapsulates the system NSLayoutConstraint and provides developers with API in a chaining programming way. All operations supported by AutoLayout of the system will be supported by the navigation system. Compared to the API function of the system, it will be better than it. Masnory adopts the chaining programming method, which makes the code easy to understand and the amount of code seems to be very small. It takes a lot of code to write NSLayoutConstraint before to realize the layout, and it can be done in at least one line of code using the navigation. If you look at the code for the navigation, you’ll find that it’s too simple to understand. It supports both Mac and iOS platforms. We can see the following definition in the MASUtilities. H file. Most of the pages have begun to use Interface Builder for UI development, but in some of the more complex changes in the page, or need to use the code to develop the UI. And many older projects are still being developed in a pure code way. Now the iPhone and iPad screen sizes are increasing, even though developers only need to develop the UI based on the dots on the screen, not the pixels. But if you make all sorts of decisions in a project based on different screen sizes and write all sorts of coordinates, it can be very difficult to develop. So the general use of pure code to develop the UI, generally with some automated layout framework for screen adaptation. The adaptation framework provided by Apple includes: VFL, UIViewAutoresizing, Auto Layout, Size Classes, etc. Auto Layout is the most frequently used Layout framework, but it has drawbacks. It was when you used NSLayoutConstraint that you found that the amount of code was so large and so much of it was repetitive that many people didn’t want to use the framework. Later, a third-party layout framework encapsulated by NSLayoutConstraint appeared on Github. It is very convenient to use it. This article will explain how to use it in detail.
Portal (URL)
** For more information or videos go to my Bilibili, above is the portal
1. #if TARGET_OS_IPHONE
1. #import <UIKit/UIKit.h>
1. #define MAS_VIEW UIView
1. #define MASEdgeInsets UIEdgeInsets
1. #elif TARGET_OS_MAC
1. #import <AppKit/AppKit.h>
1. #define MAS_VIEW NSView
1. #define MASEdgeInsets NSEdgeInsets
1. #endif |
|js
Copy the codeIntegrated way
You’ll need to add the following code to CocoaPods:
pod 'Masonry'
Use the basic NAVIGATION API
- Mas_makeConstraints () adds the constraint
- Mas_remakeConstraints () removes the previous constraint and adds the new one
- Mas_updateConstraints () updates the constraints, updating each one as you write it, leaving the other constraints unchanged
- The equalTo() argument is an object type, typically a view object or a coordinate system object such as mas_width
- Mas_equalTo () does the same thing as above, and the argument can be passed to an object of the underlying data type, which can be interpreted as more powerful than the API above
- Width () is used to indicate the width, such as the width of a view
- Mas_width () is used to get the width value. The difference is that one represents some frame object, and one is used to get the value of the frame object
Auto Boxing
The above, such as equalTo or width, sometimes involve the use of the mas_ prefix, which needs to be distinguished in development. If you declare the following two macro definitions before the current class introduces #import “crop.h”, you do not need to distinguish the prefix mas_.
- // Define this constant so that you don’t have to use the “mas_” prefix during development.
- #define MAS_SHORTHAND
- / / define the constants, can let the Masonry help us the basic data types of data automatically, automatic packing for the object type.
- #define MAS_SHORTHAND_GLOBALS
Modification statements
To make the code for navigation easier to use and read, we can invoke it directly by clicking the grammar. We also add two methods: and and with. These methods don’t actually do anything internally, they just internally return self directly, and the functionality is meant to be easy to read and has no real effect on code execution. Take the following example:
make.top.and.bottom.equalTo(self.containerView).with.offset(padding); Its internal code implementation, in fact, just returns self directly.
-
- (MASConstraint *)with {
- return self;
- }
Update constraints and layouts
To update constraint layout related apis, the following four apis are used:
-
- (void) updateConstraintsIfNeeded this method is called, if there is a marked need to layout constraints, then immediately to layout, internal will call updateConstraints method
-
- This method is overridden by (void)updateConstraints to implement the custom layout process internally
-
- (BOOL)needsUpdateConstraints whether or not they currently need to be relaid, internally determining whether or not there are currently marked constraints
-
- (void) setNeedsUpdateConstraints tags need to be
Sample code for navigation
- The essence of the navigation is to encapsulate the system AutoLayout, including many apis in it, which are packaged once and twice for system apis.
1. typedef NS_OPTIONS(NSInteger, MASAttribute) {
1. MASAttributeLeft = 1 << NSLayoutAttributeLeft,
1. MASAttributeRight = 1 << NSLayoutAttributeRight,
1. MASAttributeTop = 1 << NSLayoutAttributeTop,
1. MASAttributeBottom = 1 << NSLayoutAttributeBottom,
1. MASAttributeLeading = 1 << NSLayoutAttributeLeading,
1. MASAttributeTrailing = 1 << NSLayoutAttributeTrailing,
1. MASAttributeWidth = 1 << NSLayoutAttributeWidth,
1. MASAttributeHeight = 1 << NSLayoutAttributeHeight,
1. MASAttributeCenterX = 1 << NSLayoutAttributeCenterX,
1. MASAttributeCenterY = 1 << NSLayoutAttributeCenterY,
1. MASAttributeBaseline = 1 << NSLayoutAttributeBaseline,
1.}; * \ *Copy the code/** 1. Set the size of the yellow view and self.view and have a margin of 10. 1. Notice that right and bottom are reversed according to the UIView coordinate system. So you can't write it like this, otherwise you're going to have problems in the right and bottom directions. 1. make.edges.equalTo(self.view).with.offset(10); 1. In addition to the offset() method in the following example, there are other methods such as centerOffset(), sizeOffset(), valueOffset() and so on for different coordinate systems. 1. */ 1. [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) { 1. make.left.equalTo(self.view).with.offset(10); 1. make.top.equalTo(self.view).with.offset(10); 1. make.right.equalTo(self.view).with.offset(-10); 1. make.bottom.equalTo(self.view).with.offset(-10); 1. }]; jsCopy the codeLittle practice
Subview contour exercises
- The following example sets the height between the array’s view and the current make view by passing an array to the equalTo() method.
- Note that the margins in the following block should be set using insets, not offsets.
- Because when you use offset to set the right and bottom margins, these two values are supposed to be negative, it’s problematic to use offset to set the same values.
` ` 1. / * *
- * /
- CGFloat padding = LXZViewPadding;
- [self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
- make.left.right.top.equalTo(self.view).insets(UIEdgeInsetsMake(padding, padding, 0, padding));
- make.bottom.equalTo(self.blueView.mas_top).offset(-padding);
- }];
- [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {
- make.left.right.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, 0, padding));
- make.bottom.equalTo(self.yellowView.mas_top).offset(-padding);
- }];
- / * *
- The key is to set the make.height array, which allows you to set the three views to equal height. Other things, like width, are similar.
- * /
- [self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
- make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(0, padding, padding, padding));
- make.height.equalTo(@[self.blueView, self.redView]);
- }]; `js
Subview vertical center exercise '1. /** 1. The two views are vertically centered relative to the superview, and the margin between the two views and the superview is 10, the height is 150, and the two views are equally wide. 1. */ 1. CGFloat padding = 10.f; 1. [self.blueView mas_makeConstraints:^(MASConstraintMaker *make) { 1. make.centerY.equalTo(self.view); 1. make.left.equalTo(self.view).mas_offset(padding); 1. make.right.equalTo(self.redView.mas_left).mas_offset(-padding); 1. make.width.equalTo(self.redView); 1. make.height.mas_equalTo(150); 1. }]; 1. 1. [self.redView mas_makeConstraints:^(MASConstraintMaker *make) { 1. make.centerY.equalTo(self.view); 1. make.right.equalTo(self.view).mas_offset(-padding); 1. make.width.equalTo(self.blueView); 1. make.height.mas_equalTo(150); 1. }]; The dynamic Cell height of UITableView has always been a problem during iOS UI development. There are many ways to implement such a requirement, but they vary in complexity and performance. In the case of performance, tableView dynamic Cell height, can be taken to estimate the height of the way. If the height estimation method is implemented, both pure code and Interface Builder only need two lines of code to complete the Cell automatic height adaptation. **\ need to set the tableView rowHeight attribute, here set as automatic height, tell the system Cell height is not fixed, need the system to help us calculate. Then set the estimatedRowHeight property of the tableView to set an estimated height. In this case, after the tableView is created, the system will set an estimated value for the tableView based on the value set by the estimatedRowHeight attribute. Then get the height of the Cell when it is displayed and refresh the tableView's contentSize. ** Implementation code: - (void)tableViewConstraints {1. [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) { 1. make.edges.equalTo(self.view); 1. }]; 1. } 1. 1. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 1. return self.dataList.count; 1. } 1. 1. - (MasonryTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 1. MasonryTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:LXZTableViewCellIdentifier]; 1. [cell reloadViewWithText:self.dataList[indexPath.row]]; 1. return cell; 1. // It is important to note that this proxy method is not the same as the proxy method which returns the current Cell height directly. 1. // This proxy method will estimate the current height of all cells, rather than counting only the displayed cells, so this method is very costly. 1. // The estimatedRowHeight attribute is set in the same way as the proxy method. 1. - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath { 1. return 50.f; 1. } 1. 1. - (UITableView *)tableView { 1. if (! _tableView) { 1. _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain]; 1. _tableView.delegate = self; 1. _tableView.dataSource = self; 1. / / set the tableView automatic height 1. _tableView. RowHeight = UITableViewAutomaticDimension; 1. [_tableView registerClass:[MasonryTableViewCell class] forCellReuseIdentifier:LXZTableViewCellIdentifier]; 1. [self.view addSubview:_tableView]; 1. } 1. return _tableView; I've heard a lot of people say that UIScrollView is a hassle, but I don't think it's a hassle (not a fake one). I have a feeling that the person who said it was troublesome probably didn't try it at all, just thought it was troublesome. I'm going to show you two ways to do the UIScrollView automatic layout, and I'm going to show you the techniques of automatic layout, but it's really easy to layout once you've mastered the techniques. > Layout tip: \ > The constraint added to UIScrollView is to define its frame, and the contentSize is to define its internal size. UIScrollView does addSubview, both by adding its children to the contentView. So, all subviews added to UIScrollView, and all constraints added to UIScrollView, apply to contentView. Just follow this line of thinking to set constraints for UIScrollView, and you can master the skill of setting constraints. Bottom line: Want to try it right now? Too much advertising does not say, much attention, welcome to comment. cheer upCopy the code