iOS知识点之屏幕适配

1.为什么要进行屏幕适配
我们都知道现在市场上苹果手机已经有了很多款式例如:iPhone4,iPhone4s,iPhone5,iPhone5s,iPhone5c,iPhone6,iPhone6p,iPhone6s,iPhone6sp等。他们的尺寸也各有不同这里就不一一细说了,我们看下两张图就知道为什么要屏幕适配了。


![Simulator Screen Shot 2016年5月12日 下午3.37.17.png](http://upload-images.jianshu.io/upload_images/1400051-6283e928eda18de9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这两张图就可以看出同是一个开始按钮,左边的(iPhone4s)按钮在靠右下角,右边的(iPhone6)按钮却在中间。
那么怎么才能让它们都在中间而不出现上述情况呢?这就是我要说的第二点怎么进行屏幕适配。
2.怎样进行屏幕适配
1)直接用storyboard和xib进行可视化开发
这种方法的优点是:所见即所得。意思就是直接将需要的UI控件放进自己的controller或者view中然后拖线建立约束。
我们还是以上图的开始按钮为例来进行适配,由于该是配方法属于直接拖线所以不存在写代码那么我就直接用图说明吧!!!
1.将按钮拖入controller:

![Uploading 311637BB-71C ![Uploading 311637BB-71C4-4EAE-A5AC-1A64D07A4DAE_909434.jpg . . .] 4-4EAE-A5AC-1A64D07A4DAE_886283.jpg . . .]

2.建立约束:

311637BB-71C4-4EAE-A5AC-1A64D07A4DAE.jpg

这样我们就将这个开始按钮放在了屏幕中央,就不会存在上图iPhone4s和iPhone6在不同的地方了。如图:


Simulator Screen Shot 2016年5月12日 下午3.37.17.png
Simulator Screen Shot 2016年5月12日 下午3.38.22.png

左图为iPhone4s,右图为iPhone6。
有利必有弊,这种方法的缺点就是:如果界面的东西一旦多了那么拖的约束条件也就越多了,看的让人眼花缭乱,而且一旦多了过后代码维护起来就相当麻烦了。怎么解决这种情况?当然还有别的方法,下面我们来看第二种用代码进行屏幕适配。
2)代码进行屏幕适配
代码适配又几种常用的方法:
1.是苹果原生的Auto Layout(自动布局)。
2.还有就是Auto Layout问世之前所有的iOS开发所用的每个UI控件都有一个属性- (instancetype)initWithFrame:(CGRect)frame 来约束控件的位置,这种方法的缺点是并不能实现自动的布局,意思是如上图的开始按钮他的长宽都是被固定死的,不能根据上面的字数,字体自动适应大小。
3.masonry这是一些大神在有了Auto Layout后觉得代码量过大,书写很不方便。因此对Auto Layout进行了二次封装,masonry的出现很大程度上简化了iOS开发中的屏幕适配问题。
现在我就将masonry和Auto Layout进行下对比吧!!!
这里我们创建一个button然后给他进行屏幕适配(也就是建立约束):
UIButton *button = [[UIButton alloc] init];
button.translatesAutoresizingMaskIntoConstraints = NO;
button.backgroundColor = [UIColor greenColor];
[self.view addSubview:button];
//这样我们就创建了一个button但是他的位置和尺寸并没有确定。现在用Auto Layout建立约束。
[self.view addConstraints:@[[NSLayoutConstraint constraintWithItem:button
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10],
//上面这段代码大体意思是建立self.view和button之间的顶部约束,距离顶端为10,放大倍数为1。(没搞懂放大倍数是什么意思)下面代码依次是左边,下边,右边的约束条件。

[NSLayoutConstraint constraintWithItem:button
attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:10],

 [NSLayoutConstraint constraintWithItem:button
  attribute:NSLayoutAttributeBottom
  relatedBy:NSLayoutRelationEqual
 toItem:self.view

attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-10],

  [NSLayoutConstraint constraintWithItem:button
    attribute:NSLayoutAttributeRight
    relatedBy:NSLayoutRelationEqual
   toItem:self.view
  attribute:NSLayoutAttributeRight
  multiplier:1
   constant:-10],
    ]];

看过Auto Layout建立的约束我们在来看下用masonry建立的约束:
与上述一样我们先创建一个button
UIButton *button = [[UIButton alloc] init];
button.translatesAutoresizingMaskIntoConstraints = NO;
button.backgroundColor = [UIColor greenColor];
[self.view addSubview:button];
//然后建立约束:
[button mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view.mas_top).with.offset(10);
make.left.equalTo(self.view.mas_left).with.offset(10);
make.bottom.equalTo(self.view.mas_bottom).with.offset(-10);
make.right.equalTo(self.view.mas_right).with.offset(-10);
}];

以上两段代码都达到同样的效果,然而我们不难看出下面这段用masonry简洁了很多。
那么我们再来说一下- (instancetype)initWithFrame:(CGRect)frame:
这里我们直接创建lable直接给出它的位置大小。
UILable *lable = [[UILable alloc] initWithFrame:CGRectMake(50, 50, 50, 50)];
[self.view addaddSubview:lable];
这样一个控件lable就创建好了,位置也进行了固定。小括号内的数字前两个是代表lable的左上角距离self.view左上角的宽和高,后面的两个数是lable的长和宽。这样的缺点是每一个UI控件都需要计算出它距离self.view左上角的宽和高,太过麻烦。
这些都是适配中的一些简单的基础的东西。更多复杂的需要在深度研究了。
3)可视化开发和代码结合
其实现在最主流的屏幕适配就是可视化开发和代码结合了,这里说下我在适配屏幕中是怎么做的吧!
当界面太过复杂时或者在controller里面的时候那么我们就可使用代码适配,当然如果controller中的东西可以分离出来例如:cell(单元格)那么cell就可以采用可视化适配。

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

推荐阅读更多精彩内容