iOS develops all model adaptation solutions

  • 2021-01-19 22:27:13
  • OfStack

Recently, I have been working on a project, and I have a headache about the IPhone mobile phone model adaptation. Therefore, I need to sort out the online information and record it, which may help you who are reading the article.

Today I'm going to talk to you about the recent research on all-machine adaptation.

Currently, there are 4 types of iPhone models that we need to adapt: 4s, 5s, 6s and 6Plus. They have dimensions

iphone4s {320, 480} 960*640
iphone5 5s {320, 568} 1136*640
iphone6 6s {375, 667} 1334*750
iphone6Plus 6sPlus {414, 736} 1920*1080

In the actual project development, I am used to using Masonary to build the UI interface. Although in Masonary we can easily set the constraints between various controls, but for the large height difference between 4s and 6s Plus models, sometimes it is not possible to build a very reasonable interface just by the constraints of one-time molding.

Therefore, in the process of building UI this time, one of my ideas is to fine-tune each model according to the proportion. The idea is as follows:

The renderings provided by the artist are based on iPhone6 renderings

I only need to compare each size on the label with iPhone6 to convert the proportion, so that some spacing can be different according to the proportion of different model sizes.

For controls that consider interactive experience, fine-tune the details while keeping the size unchanged.
In the specific code, I encapsulated a class and defined two class methods specifically to fit the height and width of all models. The idea is that the above models are adapted according to the proportion of iPhone6.

I'll also post the code in section 1.

The definition of the header file


#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, IPhoneType) {
  iPhone4Type = 0,
  iPhone5Type,
  iPhone6Type,
  iPhone6PlusType
};

@interface CalculateLayout : NSObject

/**
 *  Based on the UI The design of the iPhone6 The design drawing is highly suitable for all models 
 *
 * @param height View highly 
 *
 * @return  Height after adaptation 
 */

+ (CGFloat)neu_layoutForAlliPhoneHeight:(CGFloat)height;
/**
 *  Based on the UI The design of the iPhone6 Width adaptation of all models in the design drawing 
 *
 * @param width  The width of the 
 *
 * @return  Width after adaptation 
 */
+ (CGFloat)neu_layoutForAlliPhoneWidth:(CGFloat)width;

The.m file is as follows:


#define iPhone4Height (480.f)
#define iPhone4Width (320.f)

#define iPhone5Height (568.f)
#define iPhone5Width (320.f)

#define iPhone6Height (667.f)
#define iPhone6Width (375.f)

#define iPhone6PlusHeight (736.f)
#define iPhone6PlusWidth (414.f)

#pragma mark -  Adapts to all types of height 
+ (CGFloat)neu_layoutForAlliPhoneHeight:(CGFloat)height {
  CGFloat layoutHeight = 0.0f;
  if (iPhone4) {
    layoutHeight = ( height / iPhone6Height ) * iPhone4Height;
  } else if (iPhone5) {
    layoutHeight = ( height / iPhone6Height ) * iPhone5Height;
  } else if (iPhone6) {
    layoutHeight = ( height / iPhone6Height ) * iPhone6Height;
  } else if (iPhone6P) {
    layoutHeight = ( height / iPhone6Height ) * iPhone6PlusHeight;
  } else {
    layoutHeight = height;
  }
  return layoutHeight;
}

+ (CGFloat)neu_layoutForAlliPhoneWidth:(CGFloat)width {
  CGFloat layoutWidth = 0.0f;
  if (iPhone4) {
    layoutWidth = ( width / iPhone6Width ) * iPhone4Width;
  } else if (iPhone5) {
    layoutWidth = ( width / iPhone6Width ) * iPhone5Width;
  } else if (iPhone6) {
    layoutWidth = ( width / iPhone6Width ) * iPhone6Width;
  } else if (iPhone6P) {
    layoutWidth = ( width / iPhone6Width ) * iPhone6PlusWidth;
  }
  return layoutWidth;
}

I have also put the codes on Github. If these are helpful to you, could you please give me an star in addition to the codes of clone?

Thanks for reading, I hope to help you, thank you for your support on this site!


Related articles: