美文网首页iOS学习集－－网上转载shmily－iOS／MaciOS UI
iOS 比masonry更简单的适配（比例适配）

iOS 比masonry更简单的适配（比例适配）

作者: Peak_One | 来源:发表于2016-03-20 23:11 被阅读4043次
前言

众所周知，masonry是基于autolayout的适配，使用起来还是相对来说比较简单的。但是由于本人更倾向于比例适配（因为之间学过一段时间Android，对Android中的比例适配比较喜欢)所以一直以来都用比例适配,最近几天朋友给我了一个自己写的demo，正好借着前几天刚学习的UIResponder给大家讲解一下这个demo,希望对大家有帮助。在此也对我这个朋友，表示崇高的敬意。

iOS中的CGRectmake(……)方法讲解

首先我们可以根据CGRectmake（……）方法跳转至CGGeometry.h可以看到我们平时所用的一些常用方法，例如：

CGPoint CGPointMake(CGFloat x, CGFloat y);
CGSize  CGSizeMake(CGFloat width, CGFloat height);
CGRect  CGRectMake(CGFloat x, CGFloat y, CGFloat width,CGFloat height);

对于这些方法，不做太多解释，相信只要爬一下文档，就可以简单的使用。这里呢，借图简单的说明一下。

CGGeometry.png
思考

那么看到这里，如何写一个适配文件，供全局调用呢?
其实写一个category去扩展这个类，然后去添加一个pch文件，在pch文件中#import就可以实现调用。其实这样子的思维就比较局限了，大家可以试想，一般去设置坐标的绝对是一个UIView，那么是不是只要去扩展UIView的父类，就可以让所有的UIView去按照category中的方法进行布局？答案是肯定的。所以前几天介绍的UIResponder便派上了用场。我们可以去扩展UIResponder去实现布局。废话不多说，上代码：
UIResponder+Adapt.h

/**

  需要适配的地方 替换 CGRectMake => CGRectMakeAdapt  \
  e.g.   button.frame = CGRectMake(100, 100, 100, 100);
  =>  button.frame = CGRectMakeAdapt(100, 100, 100, 100)

 */

#import <UIKit/UIKit.h>

/** 适配 与设计图物理宽度比较 */
@interface UIResponder (Adapt)

#pragma mark - 默认模式为iPhone5的设计图

/*!
 @brief  水平比例适配
 @param level 原值
 @return 适配后的值
 */
CGFloat Adapt_scaleL(CGFloat level);

/*!
 @brief  竖直比例适配 取值为水平比例适配
 @param level 原值
 @return 适配后的值
 */
CGFloat Adapt_scaleV(CGFloat vertical);

/** 适配CGpoint */
CGPoint CGPointMakeAdapt(CGFloat x, CGFloat y);

/** 适配CGSize */
CGSize CGSizeMakeAdapt(CGFloat width, CGFloat height);

/** 适配CGRect */
CGRect CGRectMakeAdapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height);

/** 适配UIEdgeInsets */
UIEdgeInsets UIEdgeInsetsMakeAdapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);

#pragma mark - 选择适配方式

#pragma mark 设计图为IPHONE4

CGFloat Adapt_IPHONE4_scaleL(CGFloat level);

CGFloat Adapt_IPHONE4_scaleV(CGFloat vertical);

CGPoint CGPointMakeIPHONE4Adapt(CGFloat x, CGFloat y);

CGSize  CGSizeMakeIPHONE4Adapt(CGFloat width, CGFloat height);

CGRect  CGRectMakeIPHONE4Adapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height);

UIEdgeInsets UIEdgeInsetsMakeIPHONE4Adapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);

#pragma mark 设计图为IPHONE5/5s

CGFloat Adapt_IPHONE5_scaleL(CGFloat level);

CGFloat Adapt_IPHONE5_scaleV(CGFloat vertical);

CGPoint CGPointMakeIPHONE5Adapt(CGFloat x, CGFloat y);

CGSize  CGSizeMakeIPHONE5Adapt(CGFloat width, CGFloat height);

CGRect  CGRectMakeIPHONE5Adapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height);

UIEdgeInsets UIEdgeInsetsMakeIPHONE5Adapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);

#pragma mark 设计图为IPHONE6

CGFloat Adapt_IPHONE6_scaleL(CGFloat level);

CGFloat Adapt_IPHONE6_scaleV(CGFloat vertical);

CGPoint CGPointMakeIPHONE6Adapt(CGFloat x, CGFloat y);

CGSize  CGSizeMakeIPHONE6Adapt(CGFloat width, CGFloat height);

CGRect  CGRectMakeIPHONE6Adapt(CGFloat x, CGFloat y,CGFloat width, CGFloat height);

UIEdgeInsets UIEdgeInsetsMakeIPHONE6Adapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);

#pragma mark 设计图为IPHONE6P

CGFloat Adapt_IPHONE6P_scaleL(CGFloat level);

CGFloat Adapt_IPHONE6P_scaleV(CGFloat vertical);

CGPoint CGPointMakeIPHONE6PAdapt(CGFloat x, CGFloat y);

CGSize  CGSizeMakeIPHONE6PAdapt(CGFloat width, CGFloat height);

CGRect  CGRectMakeIPHONE6PAdapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height);

UIEdgeInsets UIEdgeInsetsMakeIPHONE6PAdapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);

@end

UIResponder+Adapt.m
#import <Foundation/Foundation.h>

#pragma mark - 枚举 设计图类型
/**  适配类型 设计图类型 */
typedef NS_ENUM(NSInteger, kAdaptModelType) {
 /**  5/5s设计图适配 */
kAdaptTypeIPHONE5   = 0 ,
/**  6设计图适配 */
kAdaptTypeIPHONE6   = 1,
/**  6+设计图适配 */
kAdaptTypeIPHONE6P  = 2,
/**  4设计图适配 */
kAdaptTypeIPHONE4   = 3
};

#define IPHONE6_P_Height 736
#define IPHONE6_P_Wideth 414

#define IPHONE6_Height 667
#define IPHONE6_Wideth 375

#define IPHONE5_Height 568
#define IPHONE5_Wideth 320

#define IPHONE4_Height 480
#define IPHONE4_Wideth 320

/** 
 比例数据    供参考

 6p/6 width: 736/667 = 1.103448  height:414/375 = 1.104

 6/5  width: 667/568 = 1.174296  height:375/320 = 1.171875

 6p/5 width: 736/568 = 1.295775  height:414/320 = 1.29

 5/4  width: 568/480 = 1.183333  height:320/320 = 1.0

 // 选择适配方法为 : 比例尺 =  设备屏幕物理尺寸宽/设计图物理尺寸宽 (pt/pt)
 */

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

/** 获取分辨率尺寸 */
#define SCREEN_SCALE_WIDTH [[UIScreen mainScreen] currentMode].size.width;
#define SCREEN_SCALE_HEIGHT [[UIScreen mainScreen] currentMode].size.height;

/** 获取物理屏尺寸 */
#define ZM_SCREENWIDTH [[UIScreen mainScreen]bounds].size.width
#define ZM_SCREENHEIGHT [[UIScreen mainScreen]bounds].size.height

// 比例
#define Adapt_PROPORTION_IPHONE_4_WIDTH ZM_SCREENWIDTH / IPHONE4_Wideth
#define Adapt_PROPORTION_IPHONE_4_HEIGHT ZM_SCREENHEIGHT / IPHONE4_Height

#define Adapt_PROPORTION_IPHONE_5_WIDTH ZM_SCREENWIDTH /IPHONE5_Wideth
#define Adapt_PROPORTION_IPHONE_5_HEIGHT ZM_SCREENHEIGHT /IPHONE5_Height

#define Adapt_PROPORTION_IPHONE_6_WIDTH ZM_SCREENWIDTH / IPHONE6_Wideth
#define Adapt_PROPORTION_IPHONE_6_HEIGHT ZM_SCREENHEIGHT / IPHONE6_Height

#define Adapt_PROPORTION_IPHONE_6_PLUS_WIDTH ZM_SCREENWIDTH / IPHONE6_P_Wideth
#define Adapt_PROPORTION_IPHONE_6_PLUS_HEIGHT ZM_SCREENHEIGHT / IPHONE6_P_Height

#import "UIResponder+Adapt.h"

@implementation UIResponder (Adapt)

// 比例尺
kAdaptModelType kAdaptType = kAdaptTypeIPHONE5;

#pragma mark - 默认选择iPhone5设计图模板

CGPoint CGPointMakeAdapt(CGFloat x, CGFloat y)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptCGPointMake(x,y);
}

CGSize CGSizeMakeAdapt(CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptCGSizeMake( width , height );
}

CGRect CGRectMakeAdapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptCGRectMake(x, y, width, height);
}

UIEdgeInsets UIEdgeInsetsMakeAdapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptUIEdgeInsetsMake( top, left, bottom, right);
}

#pragma mark - 选择适配方式

#pragma mark 设计图为IPHONE4

CGFloat Adapt_IPHONE4_scaleL(CGFloat level){

    kAdaptType = kAdaptTypeIPHONE4;

    return  Adapt_scaleL(level);
}

CGFloat Adapt_IPHONE4_scaleV(CGFloat vertical){

    kAdaptType = kAdaptTypeIPHONE4;

    return Adapt_scaleV(vertical);
}

CGPoint CGPointMakeIPHONE4Adapt(CGFloat x, CGFloat y)
{
    kAdaptType = kAdaptTypeIPHONE4;

    return AdaptCGPointMake(x,y);
}

CGSize CGSizeMakeIPHONE4Adapt(CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE4;

    return AdaptCGSizeMake( width , height );
}

CGRect CGRectMakeIPHONE4Adapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE4;

    return AdaptCGRectMake(x, y, width, height);
}

UIEdgeInsets UIEdgeInsetsMakeIPHONE4Adapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
{
    kAdaptType = kAdaptTypeIPHONE4;

    return AdaptUIEdgeInsetsMake( top, left, bottom, right);
}

#pragma mark 设计图为IPHONE5/5s

CGFloat Adapt_IPHONE5_scaleL(CGFloat level){

    kAdaptType = kAdaptTypeIPHONE5;

    return  Adapt_scaleL(level);
}

CGFloat Adapt_IPHONE5_scaleV(CGFloat vertical){

    kAdaptType = kAdaptTypeIPHONE5;

    return Adapt_scaleV(vertical);
}

CGPoint CGPointMakeIPHONE5Adapt(CGFloat x, CGFloat y)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptCGPointMake(x,y);
 }

CGSize CGSizeMakeIPHONE5Adapt(CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptCGSizeMake( width , height );
}

CGRect CGRectMakeIPHONE5Adapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptCGRectMake(x, y, width, height);
}

UIEdgeInsets UIEdgeInsetsMakeIPHONE5Adapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
{
    kAdaptType = kAdaptTypeIPHONE5;

    return AdaptUIEdgeInsetsMake( top, left, bottom, right);
}

#pragma mark 设计图为IPHONE6

CGFloat Adapt_IIPHONE6_scaleL(CGFloat level){

    kAdaptType = kAdaptTypeIPHONE6;

    return  Adapt_scaleL(level);
}

CGFloat Adapt_IPHONE6_scaleV(CGFloat vertical){

    kAdaptType = kAdaptTypeIPHONE6;

    return Adapt_scaleV(vertical);
}

CGPoint CGPointMakeIPHONE6Adapt(CGFloat x, CGFloat y)
{
    kAdaptType = kAdaptTypeIPHONE6;

    return AdaptCGPointMake(x,y);
}

CGSize CGSizeMakeIPHONE6Adapt(CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE6;

    return AdaptCGSizeMake( width , height );
}

CGRect CGRectMakeIPHONE6Adapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE6;

    return AdaptCGRectMake(x, y, width, height);
}

UIEdgeInsets UIEdgeInsetsMakeIPHONE6Adapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
{
    kAdaptType = kAdaptTypeIPHONE6;

    return AdaptUIEdgeInsetsMake( top, left, bottom, right);
}

#pragma mark 设计图为IPHONE6P

CGFloat Adapt_IPHONE6P_scaleL(CGFloat level){

    kAdaptType = kAdaptTypeIPHONE6P;

    return  Adapt_scaleL(level);
}

CGFloat Adapt_IPHONE6P_scaleV(CGFloat vertical){

    kAdaptType = kAdaptTypeIPHONE6P;

    return Adapt_scaleV(vertical);
}

CGPoint CGPointMakeIPHONE6PAdapt(CGFloat x, CGFloat y)
{
    kAdaptType = kAdaptTypeIPHONE6P;

    return AdaptCGPointMake(x,y);
}

CGSize CGSizeMakeIPHONE6PAdapt(CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE6P;

    return AdaptCGSizeMake( width , height );
}

CGRect CGRectMakeIPHONE6PAdapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    kAdaptType = kAdaptTypeIPHONE6P;

    return AdaptCGRectMake(x, y, width, height);
}

UIEdgeInsets UIEdgeInsetsMakeIPHONE6PAdapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
{
    kAdaptType = kAdaptTypeIPHONE6P;

    return AdaptUIEdgeInsetsMake( top, left, bottom, right);
}

#pragma mark - 适配

#pragma mark scale

//CGFloat scale_L(CGFloat level)      {return Adapt_scaleL(level);}
//CGFloat scale_V(CGFloat vertical)   {return Adapt_scaleV(vertical);}

CGFloat Adapt_scaleL(CGFloat level){

CGFloat scale_L = Adapt_PROPORTION_IPHONE_5_WIDTH;

switch (kAdaptType) {
    case kAdaptTypeIPHONE4:
        scale_L = Adapt_PROPORTION_IPHONE_4_WIDTH;
        break;
    case kAdaptTypeIPHONE6:
        scale_L = Adapt_PROPORTION_IPHONE_6_WIDTH;
        break;
    case kAdaptTypeIPHONE6P:
        scale_L = Adapt_PROPORTION_IPHONE_6_PLUS_WIDTH;
        break;
    default:
        break;
}

    return level*scale_L;
}

CGFloat Adapt_scaleV(CGFloat vertical){

    return Adapt_scaleL(vertical);
}

#pragma mark adapt

CGPoint AdaptCGPointMake(CGFloat x, CGFloat y)
{
    return CGPointMake(Adapt_scaleL(x), Adapt_scaleV(y));
}

CGSize AdaptCGSizeMake(CGFloat width, CGFloat height)
{
    return CGSizeMake( Adapt_scaleL(width) , Adapt_scaleV(height));
}

CGRect AdaptCGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    return CGRectMake(Adapt_scaleL(x), Adapt_scaleV(y), Adapt_scaleL(width), Adapt_scaleV(height));
}

UIEdgeInsets AdaptUIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
{
    return UIEdgeInsetsMake(Adapt_scaleV(top), Adapt_scaleL(left), Adapt_scaleV(bottom), Adapt_scaleL(right));
}

@end

这些代码其实不难，但是整理出来还是需要一番功夫的，所以应该向我的那位朋友致敬：曾墨
引用很简单，首先得导入头文件，在这里呢，建议建立pch文件一次性导入，然后呢，你会发现，你可以通过绝对布局，实现所有屏幕的适配，最主要的是：方法还跟以前超级类似：主要调用这几个方法：
CGPoint CGPointMakeAdapt(CGFloat x, CGFloat y)；
CGSize CGSizeMakeAdapt(CGFloat width, CGFloat height)；
CGRect CGRectMakeAdapt(CGFloat x, CGFloat y, CGFloat width, CGFloat height)；
UIEdgeInsets UIEdgeInsetsMakeAdapt(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)；

相关文章

网友评论

  • 蜗牛1992:#define GetAdaptW(inch) SCREENWIDTH/375 * inch 这种吗？
  • IMKel:也能适配iPhone X吗？
    Peak_One:@IMKel 不能，适配X很简单的
    Peak_One:@IMKel 不能适配，你可以自己改写一部分，添加关于X的一些适配
    Peak_One:@IMKel 不可以
  • 嘞似彩笔:终于看见有人写了这个方法了，。我当初也是自己琢磨出了类似的。 但是我就无语了，我记得有次面试，我说我适配用的这种方法，然后那人居然一脸鄙视的样子。为什么会觉得masonry就是最好的呢？更何况我也没说我不会masonry不会layout之类的啊。
    嘞似彩笔:看到你这个想起了以前面试被鄙视的时候- - 我有空转你这篇 把后续和Xib配合的写了。。想着那人表情都是气。。。
    嘞似彩笔:另外 用这种比例+Xib 还有更简单的写法，基本适配最后都是一句代码，唯一缺点是4S短一截有缺陷，但是如果是滑动的界面，毫无影响。比例适配和约束出来的效果是不一样的，比例适配的局限性会比较大，但对目前大部分需求都是没问题的，最后还是要看公司的需求。虽然比例适配有局限，但是我感觉这是最能还原出UI设计图的一种适配方式了。
  • 出招吧:#pragma mark 设计图为IPHONE6

    CGFloat Adapt_IIPHONE6_scaleL(CGFloat level){

    kAdaptType = kAdaptTypeIPHONE6;

    return Adapt_scaleL(level);
    }
    你CGFloat Adapt_IIPHONE6_scaleL这里多写了一个I。
  • footSInRoad:看了很久还是不知道怎么用的,能给个例子么?
  • 超_iOS:大神.我发现都是按照宽的比例来适配,那么对UI的高貌似会发生不正确的适配,我说的对么
    Peak_One:@李二超 其实是这样子的，如果完全按照比例适配，毕竟iOS的屏幕的比例不是完全按照一比一来进行的，可能会导致有些图片看着不协调，这个时候你可以适当的微调一下
  • 超_iOS:请问这个 设计图为IPHONE4 这个说的是UI的图片依据4来画的么?我的理解没错吧?
    Peak_One:@李二超 这个东西的核心就是按照比例去进行适配的，而不是固定值
    超_iOS:@Peak_One 想请教,如果UI给一个view 标注100 *100pt,那么iOS端需要适配么?在每个设备上都是100 *100会不会不太好??6s 和 5 的view 都是100 *100 是不是不太好,在6s上是否应该适度的变大
    Peak_One:如果UI设计的比例是完全按照4来设计的，你可以直接用UI的尺寸
  • hanyongwei:请问这种方式支持ipad吗？？
    Peak_One:@hanyongwei 不支持
  • iOS_小绅士:总结的很棒，明天学习一下！
  • niuxinghua:masonry里面也可以写比例的啊。。。
    Peak_One:@niuxinghua 没有说masonry不好
  • 心中的信念:能否讲下原理可好
    Peak_One:@心中的信念 这个就是按照比例适配来写的
  • 心中的信念:你好，写个案例可否
    Peak_One:自己看看就可以知道了
    心中的信念:@Peak_One 嗯那里的注视比例数据表达什么意思
    Peak_One:@心中的信念 像平常一样用绝对值布局就可以了
  • 1f0f77826518:怎么使用每个屏幕都要赋一次值？写一个代码示例吧
    1f0f77826518:@Peak_One :+1: 好使
    Peak_One:@riseup 每次都是绝对布局
  • 井湾村夫:有demo吗？跪求给一份吧
    ttdiOS:@井湾村夫 是的，发demo吧
    井湾村夫:@Peak_One 759275499@qq.com，新手。还是给发个吧。拜托拜托
    Peak_One:@申浩栋 把那两段代码给拷贝下来，就是这个类文件

本文标题：iOS 比masonry更简单的适配（比例适配）

本文链接：https://www.haomeiwen.com/subject/wzkklttx.html

延伸阅读

深度阅读

  • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

栏目导航

热点阅读

iOS学习集－－网上转载

shmily－iOS／Mac

iOS UI

ios积累

适配

666

屏幕适配

适配

关于我们|服务条款|联系我们|iOS 比masonry更简单的适配（比例适配）|投稿指南|网站地图|RSS订阅|排版工具|手机版

提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！