A summary of iOS layout and screen adaptation

A summary of iOS layout and screen adaptation

In the past, there was no need to consider screen adaptation for iOS development because there was only one screen size. Now there are four types of screens, 4, 5, 6, and 6 P. Therefore, screen adaptation has become an issue that must be considered in iOS development. In addition, the aspect ratios of these four screens are all different, so simple proportional scaling cannot solve the problem. A recent APP also handles screen adaptation. This article briefly summarizes

Determine Based on screen type

I don't know if there is any better way. Our approach is to write some if... else or switch statements based on the device type.

The screen height can be used to determine the model (width cannot be used, because the width of 4 and 5 is the same, both of them are 320). You can also use Macros in the API, which are similar. In my personal opinion, if... else seems inevitable. Although there is auto layout, there are some large layout changes or font sizes, which cannot be solved without judgment.

For example, to achieve the best display effect, we use CollectionView on a large screen, and TableView on 4S, there should be no way to use automatic layout. Or switch the font size based on the screen size. It seems that only if... else can be used.

The code is similar to the following:

 

if(screenType == LosScreenType6P){    layout.minimumInteritemSpacing = 30;}else if(screenType == LosScreenType5){    layout.minimumInteritemSpacing = 5;}else{    layout.minimumInteritemSpacing = 15;}

 

Frame Calculation

 

We also use a lot of "Hard computing". For example, we handle the width of each cell in the UICollectionView:

 

CGRect rect = [[UIScreen mainScreen] bounds];screenWidth = rect.size.width;cellWidth = (screenWidth - 30) / 3;cellHeight = cellWidth * 0.8 + 50;

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{    return CGSizeMake(cellWidth, cellHeight);}

In CollectionView, there are three cells in each row. the spacing between the left and right of the entire section is 10, and the column spacing is 5. Therefore, the width (width-30)/3 is the width of each cell, the height of the cell is also calculated and written to death.

 

I'm not sure if this method works, but it is helpful for this page. Similar to this screen size-based calculation method, the APP can be used on several pages

Masonry

Masonry is one of the most important methods for screen adaptation. It is essentially the syntactic sugar of interface constraints. Basically, our practice is to calculate the large page relationship. The relative location relationship in each small block is done using Masonry. In some scenarios, Masonry has great advantages. For example:

1. Set the aspect ratio of a View.

 

[thumbImageView mas_makeConstraints:^(MASConstraintMaker *make) {    make.top.equalTo(@0);    make.left.equalTo(@0);    make.width.equalTo(self);    make.height.equalTo(thumbImageView.mas_width).multipliedBy(0.8);}];

The width of this View is the same as that of the parent View. The height is 0.8 of the width.

 

2. Set center and relative margin

 

[authorName mas_makeConstraints:^(MASConstraintMaker *make) {    make.centerY.equalTo(avatarImageView);    make.left.equalTo(avatarImageView.mas_right).offset(5);    make.right.equalTo(@-5);}];

The vertical direction is aligned with the other View. The left side is 5 to the right of the previous element, and the right side is 5 to the right of the parent View.

 

Similar to this layout, frame writing is much more complicated. If screen adaptation is considered, a lot of code is required. This kind of requirement is called Masonry. However, we found that the View in the Masonry layout usually uses init or initWithFrame: CGRectZero. This View can only be determined by its origin and size after being processed by Masonry. If its origin and size are used before this, there will be problems.

Overall replacement of UIView

For pages that do not change much after adaptation, write if... else in UIView. However, some pages must display different views based on devices. This situation is more suitable for judgment in the Controller, and then load different views