iOS知识点之屏幕适配

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


iOS知识点之屏幕适配_第1张图片
![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:

iOS知识点之屏幕适配_第2张图片
![Uploading 311637BB-71C ![Uploading 311637BB-71C4-4EAE-A5AC-1A64D07A4DAE_909434.jpg . . .] 4-4EAE-A5AC-1A64D07A4DAE_886283.jpg . . .]

2.建立约束:

iOS知识点之屏幕适配_第3张图片
311637BB-71C4-4EAE-A5AC-1A64D07A4DAE.jpg

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


iOS知识点之屏幕适配_第4张图片
Simulator Screen Shot 2016年5月12日 下午3.37.17.png
iOS知识点之屏幕适配_第5张图片
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就可以采用可视化适配。

你可能感兴趣的:(iOS知识点之屏幕适配)