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

 

總結

適配是一項很複雜的工做，即便有了通用的規則，但具體操做是仍是須要配合設計圖的效果來決定到底如何適配，如何作微調，以上的代碼邏輯也能夠根據項目設計圖的需求進行調整，以上只是提出一種適配的思路。