iOS-屏幕适配

前言

项目开发过程常用Masonry进行UI布局，虽然是自适应布局，可是高度差异太大的设备之间仅仅是设置约束是不可能搭建合理的界面，所以屏幕适配的通常原则：文字流式，弹性控件，图片等比缩放。一些特殊的界面须要作特殊的处理（按比例微调）。

 

须要作特殊处理的UI适配的思路：设计图的尺寸基于iPhone6的尺寸，再根据目前全部设备的尺寸，除了iPhone4的宽高比之外，其余设备的宽高比基本上相同，所以iPhone4余iPhone5使用一套适配规则，其余的等比缩放；字体适配原则，Plus机型的字体放大1.5倍。

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

@interface CalculateLayoutManager : NSObject

+ (instancetype)sharedManager;

- (CGFloat)calculateXForDeviceWithOriginX:(CGFloat)originX;
- (CGFloat)calculateYForDeviceWithOriginY:(CGFloat)originY;

- (CGFloat)calculateHeightForDeviceWithHeight:(CGFloat)aHeight;
- (CGFloat)calculateWidthForDeviceWithWidth:(CGFloat)aWidth;

- (CGFloat)calculateFontForDeviceWithFont:(CGFloat)aFont;

@end


#import "CalculateLayoutManager.h"

#define kScreenWidth CGRectGetWidth([UIScreen mainScreen].bounds)
#define kScreenHeight CGRectGetHeight([UIScreen mainScreen].bounds)

// 机型标识
typedef NS_ENUM(NSInteger, DYLDeviceType) {
    DYLDeviceTypeIPhone4 = 0,
    DYLDeviceTypeIPhone5,
    DYLDeviceTypeIPhone6And7,
    DYLDeviceTypeIPhone6And7Plus,
    DYLDeviceTypeUnkowned
};


CGFloat const iPhone4Height = 480.f;
CGFloat const iPhone4Width = 320.f;

CGFloat const iPhone5Height = 568.f;
CGFloat const iPhone5Width = 320.f;

CGFloat const iPhone6And7Height = 667.f;
CGFloat const iPhone6And7Width = 375.f;

CGFloat const iPhone6And7PlusHeight = 736.f;
CGFloat const iPhone6And7PlusWidth = 414.f;

CGFloat const scaleFont = 1.5f;


@interface CalculateLayoutManager ()

@property (assign, nonatomic) DYLDeviceType currentDeviceType;

@end

@implementation CalculateLayoutManager

+ (instancetype)sharedManager
{
    static dispatch_once_t onceLayoutToken;
    static CalculateLayoutManager *calculateLayoutManager;
    
    dispatch_once(&onceLayoutToken, ^{
        calculateLayoutManager = [[CalculateLayoutManager alloc] init];
    });
    return calculateLayoutManager;
}


- (CGFloat)calculateXForDeviceWithOriginX:(CGFloat)originX
{
    CGFloat fitOriginX = 0.f;
    if (originX > 0.f) {
        
    }
    
    return fitOriginX;
}

- (CGFloat)calculateYForDeviceWithOriginY:(CGFloat)originY
{
    CGFloat fitOriginY = 0.f;
    if (originY > 0.f) {
        
    }
    
    return fitOriginY;
}


/**
 适配高度，iPHone4和5用同一套适配规则，iPhone6，7一套规则，iPhone6，7Plus一套适配规则；
 */
- (CGFloat)calculateHeightForDeviceWithHeight:(CGFloat)aHeight
{
    CGFloat adjustHeight = 0.f;
    if (aHeight > 0.f) {
        switch (self.currentDeviceType) {
            case DYLDeviceTypeIPhone4:
            case DYLDeviceTypeIPhone5: {
                adjustHeight = (aHeight / iPhone6And7Height) * iPhone5Height;
                break;
            }
            case DYLDeviceTypeIPhone6And7: {
                adjustHeight = (aHeight / iPhone6And7Height) * iPhone6And7Height;
                break;
            }
            case DYLDeviceTypeIPhone6And7Plus: {
                adjustHeight = (aHeight / iPhone6And7Height) * iPhone6And7PlusHeight;
                break;
            }
            case DYLDeviceTypeUnkowned: {
                adjustHeight = aHeight;
                break;
            }
            default:
                break;
        }
    }
    
    return adjustHeight;
}


/**
 适配宽度，iPHone4和5用同一套适配规则，iPhone6，7一套规则，iPhone6，7Plus一套适配规则；
 */
- (CGFloat)calculateWidthForDeviceWithWidth:(CGFloat)aWidth
{
    CGFloat adjustWidth = 0.f;
    if (aWidth > 0.f) {
        switch (self.currentDeviceType) {
            case DYLDeviceTypeIPhone4:
            case DYLDeviceTypeIPhone5: {
                adjustWidth = (aWidth / iPhone6And7Width) * iPhone5Width;
                break;
            }
            case DYLDeviceTypeIPhone6And7: {
                adjustWidth = (aWidth / iPhone6And7Width) * iPhone6And7Width;
                break;
            }
            case DYLDeviceTypeIPhone6And7Plus: {
                adjustWidth = (aWidth / iPhone6And7Width) * iPhone6And7PlusWidth;
                break;
            }
            case DYLDeviceTypeUnkowned: {
                adjustWidth = aWidth;
                break;
            }
            default:
                break;
        }
    }
    
    return adjustWidth;
}


/**
 适配字体（iPhone6，7Plus机型字体放大1.5倍）
 */
- (CGFloat)calculateFontForDeviceWithFont:(CGFloat)aFont
{
    CGFloat adjustFont = aFont;
    if (self.currentDeviceType == DYLDeviceTypeIPhone6And7Plus) {
        adjustFont = adjustFont * scaleFont;
    }
    return adjustFont;
}


- (DYLDeviceType)currentDeviceType
{
    DYLDeviceType currentDeviceType = DYLDeviceTypeIPhone6And7;
    
    if (kScreenHeight == iPhone4Height || kScreenHeight == iPhone5Height) {
        currentDeviceType = DYLDeviceTypeIPhone5;
    }
    else if (kScreenHeight == iPhone6And7Height) {
        currentDeviceType = DYLDeviceTypeIPhone6And7;
    }
    else if (kScreenHeight == iPhone6And7PlusHeight) {
        currentDeviceType = DYLDeviceTypeIPhone6And7Plus;
    }
    else {
        currentDeviceType = DYLDeviceTypeUnkowned;
    }
    
    return currentDeviceType;
}

@end

 

总结

适配是一项很复杂的工做，即便有了通用的规则，但具体操做是仍是须要配合设计图的效果来决定到底如何适配，如何作微调，以上的代码逻辑也能够根据项目设计图的需求进行调整，以上只是提出一种适配的思路。