屏幕适配

2017-08-27  本文已影响87人  AlanGe

屏幕适配

本章节主要还是说明如何让应用程序能够适配在苹果不同的屏幕和如何让应用中的内容在不同的屏幕下能够正常的放置。
具体说明了：

  1. 屏幕适配的发展
  2. autoresizing的使用
  3. autolayout的使用
  4. 代码实现autolayout
  5. sizeClass的使用。

在今天的内容里面将来使用大量的实例来说明不同情况下的适配方式。其中重点是autolayout的使用

了解屏幕适配的发展史

前言：现在已经不像以前那样只有一个尺寸，现在最少的iPhone开发需要最少需要适配三个尺寸。因此以前我们可以使用硬坐标去设定各个控件的位置，但是现在的话已经不可以了，我们需要去做适配，也许你说可以使用两套UI或两套以上的UI，但那样不高效也不符合设计。iOS有两大自动布局利器：autoresizing 和 autolayout（autolayout是IOS6以后新增）。autoresizing是UIView的属性，一直存在，使用也比较简单，但是没有autolayout那样强大。如果你的界面比较简单，要求的细节没有那么高，那么你完全可以使用autoresizing去进行自动布局

iphone3/iphone 3GS:没有屏幕适配，直接使用frame固定子控件的大小
iphone4 /4s/ipad:iphone屏幕大小一样，但是如果进行ipad开发，就需要考虑屏幕适配
iphone 5/5c/5s:屏幕大小不一样，需要考虑屏幕适配（使用autoresizing/autolayout实现）

autoresizing的使用

使用autoresizing的前提

  1. 需要去除autolayout选项，因为这两个属性冲突。view的autoresizesSubviews属性为yes时（默认为yes），autoresizing才会生效

  2. 从XCODE6开始，Storyboard&Xib默认是自动布局，因此我们需要手动调整，才能使用autoresizing


设置面板说明
使用storyboard实现autoresizing
使用代码实现autoresizing
typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
    UIViewAutoresizingNone                 = 0,
    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
    UIViewAutoresizingFlexibleWidth        = 1 << 1,
    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
    UIViewAutoresizingFlexibleHeight       = 1 << 4,
    UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};

UIViewAutoresizingNone：不会随父视图的改变而改变
UIViewAutoresizingFlexibleLeftMargin：自动调整view与父视图左边距，以保证右边距不变
UIViewAutoresizingFlexibleWidth：自动调整view的宽度，保证左边距和右边距不变
UIViewAutoresizingFlexibleRightMargin：自动调整view与父视图右边距，以保证左边距不变
UIViewAutoresizingFlexibleTopMargin：自动调整view与父视图上边距，以保证下边距不变
UIViewAutoresizingFlexibleHeight：自动调整view的高度，以保证上边距和下边距不变
UIViewAutoresizingFlexibleBottomMargin：自动调整view与父视图的下边距，以保证上边距不变

说明一下，如果是经常使用Storyboard/Xib设置autoresizing，那么转变使用代码设置autoresizing的话，容易出现理解错误问题。比如说UIViewAutoresizingFlexibleTopMargin，也许会被误认为是顶部距离不变，其实是底部距离不变

- (void)viewDidLoad {
    [super viewDidLoad];
    //1.添加UIView:以320*480为例
    UIView *testView=[[UIView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height-44, self.view.frame.size.width, 44)];

    //2.设置UIView的属性(背景色，frame)
    testView.backgroundColor=[UIColor redColor];

    //3.添加UIView的autoresizing属性
    //testView.autoresizingMask=UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin;
    [testView setAutoresizingMask: UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleTopMargin];

    //4.添加自定义view到界面
    [self.view addSubview:testView];
}

autolayout的使用

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    UIView *redView=[[UIView alloc] init];
    
    redView.backgroundColor=[UIColor redColor];
    
    [self.view addSubview:redView];
    
    //添加子控件
    
    UIView *blueView=[[UIView alloc] init];
    
    blueView.backgroundColor=[UIColor blueColor];
    
    [redView addSubview:blueView];
    
    //1.一定要禁用autoresizing
    
    redView.translatesAutoresizingMaskIntoConstraints=NO;
    
    blueView.translatesAutoresizingMaskIntoConstraints=NO;
    
    //2.创建约束
    
    //添加高度约束
    
    NSLayoutConstraint *constriantH=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:40];
    
    //设置顶部间距约束
    
    NSLayoutConstraint *constriantT=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
    
    //设置左边间距约束
    
    NSLayoutConstraint *constriantL=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0];
    
    //设置右边间距约束
    
    NSLayoutConstraint *constriantR=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
    
    //添加蓝色view的约束
    
    NSLayoutConstraint *blueX=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    
    NSLayoutConstraint *blueH=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    
    NSLayoutConstraint *blueR=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeRight multiplier:1 constant:0];
    
    NSLayoutConstraint *blueT=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:30];
    
    //添加约束到控件，注意添加的规则
    
    [redView addConstraint:constriantH];
    
    [self.view addConstraint:constriantT];
    
    [self.view addConstraint:constriantL];
    
    [self.view addConstraint:constriantR];
    
    [self.view addConstraint:blueX];
    
    [self.view addConstraint:blueH];
    
    [self.view addConstraint:blueR];
    
    [self.view addConstraint:blueT];
    
}
了解VFL语言的简单说明和使用--不需要掌握
UIView *redView=[[UIView alloc] init];
redView.backgroundColor=[UIColor redColor];
[self.view addSubview:redView];

//添加子控件
UIView *blueView=[[UIView alloc] init];
blueView.backgroundColor=[UIColor blueColor];
[self.view addSubview:blueView];
 
//1.一定要禁用autoresizing
redView.translatesAutoresizingMaskIntoConstraints=NO;
blueView.translatesAutoresizingMaskIntoConstraints=NO;

//2.创建约束

//2.1创建redView的顶部间距约束
NSString *redT=@"V:|-paddingT-[redView]-padding-[blueView]";
NSDictionary *redTmetrics=@{@"paddingT":@40,@"padding":@60};
NSDictionary *redTviews=@{@"redView":redView,@"blueView":blueView};
NSArray *redConT=[NSLayoutConstraint constraintsWithVisualFormat:redT options:0 metrics:redTmetrics views:redTviews];

//2.2创建redView的左右间距约束
NSString *redLR=@"H:|-paddingL-[redView]-paddingR-|";
NSDictionary *redLRmetrics=@{@"paddingL":@10,@"paddingR":@10};
//NSDictionary *redLRviews=@{@"redView":redView};
NSArray *redConLR=[NSLayoutConstraint constraintsWithVisualFormat:redLR options:0 metrics:redLRmetrics views:redTviews];

//2.3创建redView的高度约束
NSString *redH=@"V:[redView(44)]";
NSArray *redConH=[NSLayoutConstraint constraintsWithVisualFormat:redH options:0 metrics:nil views:redTviews];

//添加约束
[self.view addConstraints:redConT];
[self.view addConstraints:redConLR];
[redView addConstraints:redConH];

第三方框架实现autolayout

- (void)viewDidLoad {
    [super viewDidLoad];
    //1.创建红色view
    UIView *redView=[[UIView alloc] init];
    redView.backgroundColor=[UIColor redColor];
    [self.view addSubview:redView];
    //2.创建蓝色view
    UIView *blueView=[[UIView alloc] init];
    blueView.backgroundColor=[UIColor blueColor];
    [self.view addSubview:blueView];
    //3.为红色view添加约束
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(30);//离顶部的距离
        make.left.mas_equalTo(10);//离左边的距离
        make.right.mas_equalTo(-10);//离右边的距离
        make.height.mas_equalTo(44);//高度
    }];
    //4.为蓝色view添加约束
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        //蓝色块离红色块的底部有30的距离
        make.top.mas_equalTo(redView.mas_bottom).offset(30);//离顶部的距离
        //蓝色块的左边与红色块的水平中心对齐
        make.left.mas_equalTo(redView.mas_centerX);//离左边的距离
        make.right.mas_equalTo(-10);//离右边的距离
        make.height.mas_equalTo(redView);//高度
    }];
}

if(self.statu.picture)
{
    self.pictureView.hidden=NO;
    self.pictureView.image=[UIImage imageNamed:self.statu.picture];
    self.cellHeight.constant=100;
}
else
{
    self.pictureView.hidden=YES;
    self.cellHeight.constant=0;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.rowHeight=UITableViewAutomaticDimension;
    self.tableView.estimatedRowHeight=44;
}
使用autolayout过程中的注意事项及细节。
autolayout和autoresizing的优势：

sizeClass的使用

* * : 其它8种情况都会继承
* - : 会被- - \ + -继承
+ * : 会被+ - \ + +继承

注意事项：

常见错误

上一篇 下一篇

猜你喜欢

热点阅读