iOS 屏幕比例适配 – 小飞侠

iOS 屏幕比例适配

Post author:xfxia
Post published:2023年9月20日
Post category:其他

本文主要介绍如何简单快捷的使用屏幕适配，快速按照设计图尺寸布局

简单使用

在最初的地方AppDelegate里面调用 [UIResponder kj_adaptModelType:KJAdaptTypeIPhone6];

然后在需要适配的地方 替换 CGRectMake 为 KJAdaptRectMake
view.frame = CGRectMake(0, 0, 10, 10);
替换为
view.frame = KJAdaptRectMake(0, 0, 10, 10);
即可完成简单的屏幕比例适配

简单描述思路

1.声明设计图手机类型

/// 适配类型 设计图类型
typedef NS_ENUM(NSInteger, KJAdaptModelType) {
    KJAdaptTypeIPhone4 = 0, /// 3.5英寸，320 x 480pt
    KJAdaptTypeIPhone5,     /// 4.0英寸，320 x 568pt
    KJAdaptTypeIPhone6,     /// 4.7英寸，375 x 667pt
    KJAdaptTypeIPhone6P,    /// 5.5英寸，414 x 736pt
    KJAdaptTypeIPhoneX,     /// 5.8英寸，375 x 812pt
    KJAdaptTypeIPhoneXR,    /// 6.1英寸，414 x 896pt
    KJAdaptTypeIPhoneXSMax, /// 6.5英寸，414 x 896pt
//    KJAdaptTypeIPhone12Mini,/// 5.4英寸，
//    KJAdaptTypeIPhone12ProMax,/// 6.7英寸，
};

2.委托确定设计图的类型

@protocol KJResponderAdaptProtocol <NSObject>
/// 设计图机型，只需要在最初的地方调用一次即可
+ (void)kj_adaptModelType:(KJAdaptModelType)type;
@end

+ (KJAdaptModelType)adaptType{
    return (KJAdaptModelType)[objc_getAssociatedObject(self, @selector(adaptType)) intValue];
}
+ (void)setAdaptType:(KJAdaptModelType)adaptType{
    objc_setAssociatedObject(self, @selector(adaptType), @(adaptType), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
+ (void)kj_adaptModelType:(KJAdaptModelType)type{
    self.adaptType = type;
}

3.按比例确定宽高

CGFloat KJAdaptScaleLevel(CGFloat level){
    if (level == 0) return 0.0;
    CGFloat width;
    switch (UIResponder.adaptType) {
        case KJAdaptTypeIPhone4:width = 320;break;
        case KJAdaptTypeIPhone5:width = 320;break;
        case KJAdaptTypeIPhone6:width = 375;break;
        case KJAdaptTypeIPhone6P:width = 414;break;
        case KJAdaptTypeIPhoneX:width = 375;break;
        case KJAdaptTypeIPhoneXR:width = 414;break;
        case KJAdaptTypeIPhoneXSMax:width = 414;break;
        default:break;
    }
    return level*([[UIScreen mainScreen]bounds].size.width/width);
}
CGFloat KJAdaptScaleVertical(CGFloat vertical){
    return KJAdaptScaleLevel(vertical);
}

4.替换方法

CGFloat KJAdaptScaleVertical(CGFloat vertical){
    return KJAdaptScaleLevel(vertical);
}
CGPoint KJAdaptPointMake(CGFloat x, CGFloat y){
    return CGPointMake(KJAdaptScaleLevel(x), KJAdaptScaleVertical(y));
}
CGSize KJAdaptSizeMake(CGFloat width, CGFloat height){
    return CGSizeMake(KJAdaptScaleLevel(width), KJAdaptScaleVertical(height));
}
CGRect KJAdaptRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height){
    return CGRectMake(KJAdaptScaleLevel(x), KJAdaptScaleVertical(y), KJAdaptScaleLevel(width), KJAdaptScaleVertical(height));
}
UIEdgeInsets KJAdaptEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right){
    return UIEdgeInsetsMake(KJAdaptScaleVertical(top), KJAdaptScaleLevel(left), KJAdaptScaleVertical(bottom), KJAdaptScaleLevel(right));
}

最后附上完整分类

//  简单的屏幕比例适配
/*
 在最初的地方AppDelegate里面调用 [UIResponder kj_adaptModelType:KJAdaptTypeIPhone6];
 
 然后在需要适配的地方 替换 CGRectMake 为 KJAdaptRectMake
 view.frame = CGRectMake(0, 0, 10, 10);
 view.frame = KJAdaptRectMake(0, 0, 10, 10);
 即可完成简单的屏幕比例适配
*/
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN
/// 适配类型 设计图类型
typedef NS_ENUM(NSInteger, KJAdaptModelType) {
    KJAdaptTypeIPhone4 = 0, /// 3.5英寸，320 x 480pt
    KJAdaptTypeIPhone5,     /// 4.0英寸，320 x 568pt
    KJAdaptTypeIPhone6,     /// 4.7英寸，375 x 667pt
    KJAdaptTypeIPhone6P,    /// 5.5英寸，414 x 736pt
    KJAdaptTypeIPhoneX,     /// 5.8英寸，375 x 812pt
    KJAdaptTypeIPhoneXR,    /// 6.1英寸，414 x 896pt
    KJAdaptTypeIPhoneXSMax, /// 6.5英寸，414 x 896pt
//    KJAdaptTypeIPhone12Mini,/// 5.4英寸，
//    KJAdaptTypeIPhone12ProMax,/// 6.7英寸，
};
@protocol KJResponderAdaptProtocol <NSObject>
/// 设计图机型，只需要在最初的地方调用一次即可
+ (void)kj_adaptModelType:(KJAdaptModelType)type;
@end
@interface UIResponder (KJAdapt)<KJResponderAdaptProtocol>
/// 水平比例适配
CGFloat KJAdaptScaleLevel(CGFloat level);
/// 竖直比例适配，取值为水平比例适配
CGFloat KJAdaptScaleVertical(CGFloat vertical);
/// 适配CGpoint
CGPoint KJAdaptPointMake(CGFloat x, CGFloat y);
/// 适配CGSize
CGSize KJAdaptSizeMake(CGFloat width, CGFloat height);
/// 适配CGRect
CGRect KJAdaptRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height);
/// 适配UIEdgeInsets
UIEdgeInsets KJAdaptEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);

@end

NS_ASSUME_NONNULL_END

#import "UIResponder+KJAdapt.h"

@implementation UIResponder (KJAdapt)
+ (KJAdaptModelType)adaptType{
    return (KJAdaptModelType)[objc_getAssociatedObject(self, @selector(adaptType)) intValue];
}
+ (void)setAdaptType:(KJAdaptModelType)adaptType{
    objc_setAssociatedObject(self, @selector(adaptType), @(adaptType), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
+ (void)kj_adaptModelType:(KJAdaptModelType)type{
    self.adaptType = type;
}
CGFloat KJAdaptScaleLevel(CGFloat level){
    if (level == 0) return 0.0;
    CGFloat width;
    switch (UIResponder.adaptType) {
        case KJAdaptTypeIPhone4:width = 320;break;
        case KJAdaptTypeIPhone5:width = 320;break;
        case KJAdaptTypeIPhone6:width = 375;break;
        case KJAdaptTypeIPhone6P:width = 414;break;
        case KJAdaptTypeIPhoneX:width = 375;break;
        case KJAdaptTypeIPhoneXR:width = 414;break;
        case KJAdaptTypeIPhoneXSMax:width = 414;break;
        default:break;
    }
    return level*([[UIScreen mainScreen]bounds].size.width/width);
}
CGFloat KJAdaptScaleVertical(CGFloat vertical){
    return KJAdaptScaleLevel(vertical);
}
CGPoint KJAdaptPointMake(CGFloat x, CGFloat y){
    return CGPointMake(KJAdaptScaleLevel(x), KJAdaptScaleVertical(y));
}
CGSize KJAdaptSizeMake(CGFloat width, CGFloat height){
    return CGSizeMake(KJAdaptScaleLevel(width), KJAdaptScaleVertical(height));
}
CGRect KJAdaptRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height){
    return CGRectMake(KJAdaptScaleLevel(x), KJAdaptScaleVertical(y), KJAdaptScaleLevel(width), KJAdaptScaleVertical(height));
}
UIEdgeInsets KJAdaptEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right){
    return UIEdgeInsetsMake(KJAdaptScaleVertical(top), KJAdaptScaleLevel(left), KJAdaptScaleVertical(bottom), KJAdaptScaleLevel(right));
}

@end

备注：本文用到的部分函数方法和Demo，均来自三方库

KJExtensionHandler

，如有需要的朋友可自行
`pod 'KJExtensionHandler'`
引入即可

简单快捷的使用屏幕适配，快速按照设计图尺寸布局介绍就到此完毕，后面有相关再补充，写文章不容易，还请点个

小星星

传送门

版权声明：本文为qq_34534179原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_34534179/article/details/109180528