iOS 适配

字体设配

  • 1.iPhone4和iPhone5宽度一样,5只是比4高176像素,所以5和4一套规范即可;
  • 2.iPhone6的放大模式分辨率是640 x 1136,和iPhone5正好相同;
  • 3.iPhone6的标准模式分辨率为750 x 1334,整体放大1.5倍正好是iPhone6 Plus的放大模式1125*2001。
    总结:我们可以看出iPhone 4、5、6共用一套字体大小规范。iPhone6 plus在放大模式下的字体正好是在此基础上放大了1.5倍:

UI适配

各版本iPhone的尺寸规格.png

手动

可以根据UIDevice 或直接使用屏幕宽度 判断设配的手机型号,并作适配,一般用于接口适配;UI适配不推荐使用!

Frame

简单的中点设置可以通过frame的设置方法,Autolayout出来之后还是推荐使用Autolayout,一句话:丢掉Frame,拥抱Autolayout!

Autoresizing

Autolayout之前的版本,使用相当方便,但只能控制当前子控件对于其父控件的排版。

  • sb,xib中直接设置


    Autoresizing.jpg

    正方形外 上下左右线:选中对应线代表子控件和父控件某个边缘的间距是固定的
    正方形内 上下左右线: 选中对应线代表:对应的子控件的的长或宽自动跟随父控件改变

  • 代码设置:通过属性:autoresizingMask直接设置。
    注意:位置设置方式与连线方式相反,是设置某边可伸缩,反之就是对应边角固定,伸缩方式一致。例如需要设置底部边固定,则需要设置top。
- UIViewAutoresizingFlexible`Left`Margin   = 1 << 0,
    - 距离父控件`左边`的间距是伸缩的
- UIViewAutoresizingFlexible`Right`Margin  = 1 << 2,
    - 距离父控件`右边`的间距是伸缩的
- UIViewAutoresizingFlexible`Top`Margin    = 1 << 3,
    - 距离父控件`上边`的间距是伸缩的
- UIViewAutoresizingFlexible`Bottom`Margin = 1 << 5
    - 距离父控件`下边`的间距是伸缩的
- UIViewAutoresizingFlexible`Width`        = 1 << 1,
    - `宽度`跟随父控件`宽度`进行伸缩
- UIViewAutoresizingFlexible`Height`       = 1 << 4,
    - `高度`跟随父控件`高度`进行伸缩

Autolayout

最常用的适配方法,在iOS6/Xcode4的时候被苹果引入两个核心概念:参照,约束.即参照其他控件的位置添加约束,来确定需要适配的控件的唯一大小和位置。核心公式为:
obj1.property1 =(obj2.property2 * multiplier)+ constant value

注意:
- 要先禁止autoresizing功能,view.translatesAutoresizingMaskIntoConstraints = NO;
- 添加约束之前,一定要保证相关控件都已经在各自的父控件上
- 不用再给view设置frame
- 各种适配方法不能混用
- 动画 :用强制更新约束方法(layoutIfNeeded),

  • NSLayoutConstraint
    直接是公式的代码化,添加代码相当繁琐,一般不适用!
/**
view1 :要约束的控件
attr1 :约束的类型(做怎样的约束)
relation :与参照控件之间的关系
view2 :参照的控件
attr2 :约束的类型(做怎样的约束)
multiplier :乘数
c :常量
*/
----创建约束
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
----添加约束
- (void)addConstraint:(NSLayoutConstraint *)constraint; 
- (void)addConstraints:(NSArray *)constraints;
  • VFL
    VFL全称是Visual Format Language,翻译过来是“可视化格式语言” VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言,是常用的约束添加方式。

// 水平方向 
NSString *vlf = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|"; 
NSDictionary *views = @{ @"blueView" : blueView,  @"redView" : redView }; 
NSDictionary *metrics = @{@"margin" : @20}; 

// 所有控件的顶部\底部对齐 
NSLayoutFormatOptions opts = NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom; 
NSArray *lcs = [NSLayoutConstraint constraintsWithVisualFormat:vlf options:opts metrics:metrics views:views]; 
[self.view addConstraints:lcs]; 

// 垂直方向 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(40)]-margin-|" options:kNilOptions metrics:metrics views:views]];
  • masonry
    一个非常不错的第三方库,基于块的方式来添加约束,使用非常简单
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); 
[view1 mas_makeConstraints:^(MASConstraintMaker *make) { 
make.top.equalTo(superview.mas_top).with.offset(padding.top); 
make.left.equalTo(superview.mas_left).with.offset(padding.left); 
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom); 
make.right.equalTo(superview.mas_right).with.offset(-padding.right); 
}];

Size Classes

iOS8之后,苹果推出的适配的新技术。


Size Classes.png
  • 它仅仅是对屏幕进行了分类, 真正排布UI元素还得使用autolayout
  • 不再有横竖屏的概念, 只有屏幕尺寸概念
  • 不再有具体尺寸的概念, 只有抽象尺寸的概念: 把宽度和高度各分为3种情况
  1. Compact : 紧凑(小)
  2. Any : 任意
  3. Regular : 宽松(大)
  • 各屏幕适配
    • iPhone4S,iPhone5/5s,iPhone6
      竖屏:(w:Compact h:Regular) 横屏:(w:Compact h:Compact) i
    • Phone6 Plus:
      竖屏:(w:Compact h:Regular) 横屏:(w:Regular h:Compact)
  • iPad
    竖屏:(w:Regular h:Regular) 横屏:(w:Regular h:Regular)
  • Apple Watch(猜测)
    竖屏:(w:Compact h:Compact) 横屏:(w:Compact h:Compact)

所以,正确的使用姿势应该是通过sizeclass对屏幕进行分类,再通过autolayout:对屏幕中各种元素进行约束(位置\尺寸)。

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

推荐阅读更多精彩内容

  • 1.尺寸适配1.原因 iOS7中所有导航栏都为半透明,导航栏(height=44)和状态栏(height=20)不...
    LZM轮回阅读 6,091评论 1 4
  • 什么是适配:适应、兼容不同版本不同尺寸的移动智能设备iPhone尺寸:3.5、4.0、4.7、5.5 inch(英...
    冰J冰阅读 1,159评论 1 14
  • 分为两个部分:VFL代码适配和Masonry框架适配 1.VFL代码适配 一、VFL介绍 1、VFL全称是Visu...
    IIronMan阅读 697评论 0 5
  • 前言 iPhone自诞生以来,随着其屏幕尺寸不断的多样化,屏幕适配的技术一直在发展更新。目前,iOS系统版本已经更...
    VV木公子阅读 15,354评论 24 170
  • 一、机型的适配; 1.机型的变化: 坐标:表示屏幕物理尺寸大小,坐标变大了,表示机器屏幕尺寸变大了; 像素:表示屏...
    mingxinnian阅读 1,066评论 0 0