iPhone屏幕适配,等比缩放

App的设计图根据是否可以滚动分成两种设计图,下面我们说说这个不可以滚动的设计,怎么在各种不同尺寸的设备中适配。


image.png

这是以iPhone8的尺寸(750*1334)做的效果图。
类似这种页面,就是不可滚动的效果图。
我们按照标注,在xib或者storyboard用autolayout布局;

为了展示效果图,在布局文件底部添加了一个正方形,居中显示

image.png
image.png
image.png

image.png
image.png

同样的布局文件,因为我们的标注是基于iPhone8的尺寸,结果只有iPhone8的显示效果图是满意的,其他设备的的效果图都无法接受。

设备 宽/缩放比 高/缩放比
效果图 750 1334
iPhone4s 640/0.85 960/ 0.72
iPhone5 640/0.85 1136/0.85
iPhone8 750/1.0 1334/1.0
iPhone8 Plus 1242/1.66 2208/1.66
iPhoneX 1125/1.5 2436/1.82

在ios的布局方式中,有一种自动布局叫做Autoresizing。
说明:这种布局方式不能与autolayout同时使用。


image.png

image.png
image.png

image.png
image.png

在不同设备上的效果,总体感觉还是可以,即使在最小的iPhone4s,也是可以显示完整的;但是,红色的正方形控件,在iPhone4s、iPhoneX上面变形了,如果这个正方形是ImageView的话,显示出来的图片也会变形了,这个肯定是不合格的。
但在Autoresizing这种布局上,没办法去处理这个问题。

设备 宽/缩放比 高/缩放比
效果图 750 1334
iPhone4s 640/0.85 960/ 0.72
iPhone5 640/0.85 1136/0.85
iPhone8 750/1.0 1334/1.0
iPhone8 Plus 1242/1.66 2208/1.66
iPhoneX 1125/1.5 2436/1.82

根据上图,各个设备的屏幕宽高与效果图的宽高的缩放比例是不同,只有iPhone8 Plus是近似相同。这就造成了上面的正方形控件变形的原因。
除此之外,我们还能怎么做呢。

这篇文章 地址://www.greatytc.com/p/eab78d779c7e 给了思路.

image.png

- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect rect = [UIScreen mainScreen].bounds;
    float x = rect.size.width / 375;
    float y = rect.size.height / 667;
    NSLog(@"screen rect === %@",NSStringFromCGRect(rect));
    NSLog(@"y==%@",@(y));
    NSLog(@"x==%@",@(x));
    
//    CGRect rect = [UIScreen mainScreen].nativeBounds;
//    float x = rect.size.width / 750;
//    float y = rect.size.height / 1334;
//    NSLog(@"screen rect === %@",NSStringFromCGRect(rect));
//    NSLog(@"y==%@",@(y));
//    NSLog(@"x==%@",@(x));

    //保证宽高的缩放比一致,才不会出现正方形控件变形的情况。
    //取缩放比小的那个,才不会出现界面超出屏幕
    if(x > y){
        self.view.transform = CGAffineTransformMakeScale(y, y);
    }else{
        self.view.transform = CGAffineTransformMakeScale(x, x);
    }
}

代码已经上传了 DEMO

补充

在xib或者storyboard用百分比布局

1.控件宽高的百分比
image.png

image.png

控件的宽高百分比这个简单
1).设置控件自身的宽高比;
2).设置控件的宽度等于父View的宽度,再设置Multiplier的比值(控件宽度:父View的宽度)
这样控件会随着屏幕的大小而缩放,控件自身也有宽高比,不会发生变形。

2.控件宽高的百分比

image.png

两个红色的控件,
第一个是距离左边距37.5的距离;在不同屏幕,这个值是固定的。
第二个是距离父View中线X坐标的0.2倍;在不同屏幕,这个值是变化的。
计算公式(iPhone8):375(屏幕宽)0.5(中线X坐标)0.2(系数)=37.5。

第一个控件:固定左边距


image.png

第二个控件:百分比左边距


image.png

跟第一个控件的用法,主要区别是
SecondItem:SuperView.Center.X;

Constant:0(固定值)
Multiplier:0.2(比例)

这样可以在不同的屏幕中,对比看到两个控件实际左边距的差别。

代码已经上传了 DEMO

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容