在iPhone之初,4s的屏幕邏輯分辨率只有320*480,我們是不需要做屏幕適配的,但是到了如今,iPhone5,iPhone6s,iPhone 6s plus ,屏幕的邏輯分辨率已經(jīng)大大的有所改變了.所以,作為程序猿的我們做的就是屏幕的適配工作.今天,我就重可視化和純代碼來說一下屏幕適配的問題.
| iPhone機(jī)型 | 屏幕分辨率 |
|---|---|
| iPhone4(s) | 320x480 |
| iPhone5c | 320x568 |
| iPhone5(s) | 320x568 |
| iPhone6 | 375x667 |
| iPhone6s(plus) | 375x667 |
可視化編程
可視化編程是適合獨(dú)立開發(fā),快速開發(fā)的一種形式,但是不利于后期的維護(hù),可視化編程的屏幕適配主要是用到了AutoLayout的,當(dāng)然了還有SizeClasses,今天我只談一下我對(duì)AutoLayout的理解和認(rèn)識(shí).AutoLayout加起來比較簡單,但是對(duì)于初學(xué)者而言,可能加約束加著加著就加錯(cuò)了,那么我們?cè)诩蛹s束的期間要遵循什么的原則呢? 其實(shí)很簡單,就是大小和位置,大小就是寬和高,位置就是x和y.下面我們看一個(gè)范例,看AutoLayout是如何實(shí)現(xiàn)屏幕適配的.
首先我們現(xiàn)在創(chuàng)建一個(gè)新的工程,然后在main.storyboard里面ViewController上面添加一View,并給它添加顏色
然后我們就選中這個(gè)View,我們用右下角的倒數(shù)第三個(gè)圖標(biāo)按鈕給他添加約束.添加約束的工具欄如下.
添加約束的原則就是如何固定一個(gè)對(duì)象!(從位置和大小入手)
當(dāng)我們添加完成約束之后,我們就要調(diào)整約束對(duì)象的位置.如下圖使用右下角第四個(gè)圖標(biāo)把我們的約束添加到對(duì)象身上去.
那么當(dāng)我們不需要某個(gè)約束,或者想修改某個(gè)約束的時(shí)候,我們應(yīng)該從哪里找到我們的約束條件呢?這里,我們要先選中要修改的對(duì)象.然后點(diǎn)擊右邊的菜單欄中的第五個(gè)圖標(biāo)按鈕.
純代碼屏幕適配
對(duì)于純代碼的屏幕適配,一種方法就是計(jì)算相對(duì)距離.一種是AutoLayer + UIView ,還有一種是重量級(jí)的Masonry.
在一開始的時(shí)候,程序員做屏幕適配的時(shí)候,就是純粹的和屏幕的大小做相對(duì)距離的計(jì)算.直到iOS6的時(shí)候出現(xiàn)了AutoLayer +UIView.再到后來的Masonry.
對(duì)呀我來說,可視化的時(shí)候我喜歡使用AutoLayer ,但是純代碼我更傾向于Masonry自動(dòng)布局.我們先看一下使用AutoLayer +UIView是如何定義兩個(gè)視圖的.
- (void)viewDidLoad {
[super viewDidLoad];
UIView *myview = [[UIView alloc] init];
myview.backgroundColor = [UIColor greenColor];
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[myview addSubview:redView];
[myview addSubview:blueView];
[myview setTranslatesAutoresizingMaskIntoConstraints:NO];
[redView setTranslatesAutoresizingMaskIntoConstraints:NO];
[blueView setTranslatesAutoresizingMaskIntoConstraints:NO];
NSMutableArray *tmpConstraints = [NSMutableArray array];
//約束條件
[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"|-50-[redView(==100)]-30-[blueView(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView,blueView)]];
[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]];
[tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[blueView(==redView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView,redView)]];
[myview addConstraints:tmpConstraints];
self.view = myview;
}
Masonry
看到AutoLayer +UIView這么麻煩,那么對(duì)比Masonry就簡單了許多.Masonry其實(shí)就是對(duì)AutoLayer +UIView的封裝.
首先我們先導(dǎo)入我們的Masonry的庫.
#import <Masonry/Masonry.h>
然后,我們分情況寫一下,當(dāng)是一個(gè)視圖扥時(shí)候,并且我們的視圖要求是居中,并且視圖大小是200 * 200,
MASConstraintMaker 就是我們的假約束的對(duì)象,是有如下屬性的,我們可以根據(jù)這些屬性給我們的目對(duì)象添加對(duì)應(yīng)的約束.
@property (nonatomic, strong, readonly) MASConstraint *left;//左側(cè)
@property (nonatomic, strong, readonly) MASConstraint *top;//上側(cè)
@property (nonatomic, strong, readonly) MASConstraint *right;//右側(cè)
@property (nonatomic, strong, readonly) MASConstraint *bottom;//下側(cè)
@property (nonatomic, strong, readonly) MASConstraint *leading;//首部
@property (nonatomic, strong, readonly) MASConstraint *trailing;//尾部
@property (nonatomic, strong, readonly) MASConstraint *width;//寬
@property (nonatomic, strong, readonly) MASConstraint *height;//高
@property (nonatomic, strong, readonly) MASConstraint *centerX;//橫向居中
@property (nonatomic, strong, readonly) MASConstraint *centerY;//縱向居中
@property (nonatomic, strong, readonly) MASConstraint *baseline;//文本基線
那么具體代碼設(shè)置如下.
// 防止block中的循環(huán)引用
__weak typeof (self) weakSelf = self;
// 初始化一個(gè)View
UIView *bgView = [[UIView alloc]init];
bgView.backgroundColor = [UIColor redColor];
[self.view addSubview:bgView];
// 使用mas_makeConstraints添加約束
[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
//設(shè)置視圖中心在父視圖的中心上
make.center.equalTo(weakSelf.view);
//設(shè)置視圖的大小
make.size.mas_equalTo(CGSizeMake(200, 200));
}];
當(dāng)是兩個(gè)視圖,我們需要做的是 2個(gè)view橫向居中掸宛，第二個(gè)view距離第一個(gè)view間距為10
UIView *view1 = [[UIButton alloc]init];
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(90, 90));
make.centerX.equalTo(weakSelf.view);
make.top.width.offset(90);
}];
UIView *view2 = [[UILabel alloc]init];
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view2];
[view2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(100, 100));
make.centerX.equalTo(view1);
make.top.equalTo(view1.mas_bottom).with.offset(20);
}];
注意: 添加約束之前必須把約束對(duì)象添加到父視圖上!!!
