屏幕适配（控件相对位置不变）

1.屏幕适配---主要是一个屏幕横竖屏。

Snip20160429_2.png

1.1 3gs与4主要用frame。bounds。center进行布局。【frame，bound 都是固定的】
1.2 ipad出现，iphone横屏
- 出现Autoresizing技术
  - 让子控件可以跟随父控件的行为自动发生相应的变化。
  - 关闭Autoloyout功能
只设置宽和高的时候，需要用到水平居中（水平方向上中间），与竖直居中。

Snip20160429_4.png
- 下面通过面板设置。
  
  Snip20160429_3.png
- 如果用代码添加控件用代码来实现autoresing如下

UIView *blueView = [[UIView alloc] init];
blueView .backgroudColor = [UIColor blueColor];
CGFoat wh = 100;
CGFoat x = self.view.frame,size.width -wh;
CGFoat y = self.view.frame.size.heigh - wh;
blueView.frame = CGRectMake(x,y,100,100);
//左边伸缩
blueView.outoresizingMask = UIViewAutoresizingFlexbleLeftMargin |UIViewAutoresizingFlexibleTopMargin |.............
//顶部伸缩
[self.view addSubviews:blueView]

只能解决父子关系，不能解决兄弟关系。子控件可以在父控件里拉伸，或者挨着父控件。

2.在Autoresizing之后出现了Autolayout(功能强大)---参照与约束

先打开use Auto Layout如下图，Alignment对齐的意思，Constraints约束的意思

Snip20160429_6.png

下图就是要设置的约束（只能添约束不能改约束）
其中选择等宽等高要按着cmd键，选择两个控件。然后下图Equal.......

Snip20160429_9.png

主要的警报

Snip20160429_7.png
一般添加约束的思路是在脑海中勾画控件与主控件的关系，然后就是控件的宽度与高度.
有一个比较控件比较特殊，就是UILable,约束的时候只需要约束top,left,以及weight。其中宽度可以小于某一个值，这样就会text,很少也能被包裹。
两个控件的在父控件中，他们两个之间的约束在父控件中。
-约束的修改需要拿到控件然后用，

self.spacingContraint.constant = 50;
self.withContraint.constant = 100;

如果做动画需要加上控件名字 layoutIFNeed。（在动画函数的参数的block中）。换句话就是说控件调用 layoutIFNeed。


[UIView animateWithDuration:1 animations:^{
        [self layoutIfNeeded];
    } completion:^(BOOL finished) {
        //repeat!
        [self animateWithInvertedInsets:!invertedInsets];
    }];

2.代码实现autolayout。

2.1 每个线代表一个约束对象。
2.2 新建约束对象用到的方法是

Snip20160504_1.png

例如


    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    // 不要将AutoresizingMask转为Autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];// 添加宽度约束:100
    
    /************************** 蓝色 **************************/
    // 添加高度约束:40
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];
    [blueView addConstraint:heightConstraint];
    
    // 添加左边约束：blueView的左边距离父控件左边有20的间距
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:leftConstraint];
    
    // 添加右边约束：blueView的右边距离父控件右边有20的间距
    NSLayoutConstraint *rightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:rightConstraint];
    
    // 添加顶部约束：blueView的顶部距离父控件顶部有20的间距
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:topConstraint];
    
    /************************** 红色 **************************/
    // 添加高度约束:蓝色等高
    NSLayoutConstraint *heightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
    [self.view addConstraint:heightConstraint2];
    
    // 添加左边约束：redView的左边 == 父控件的中心x
    NSLayoutConstraint *leftConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    [self.view addConstraint:leftConstraint2];
    
    // 添加顶部约束：redView的顶部距离blueView的底部有20的间距
    NSLayoutConstraint *topConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
    [self.view addConstraint:topConstraint2];
    
    // 添加右边约束：redView的右边 == blueView的右边
    NSLayoutConstraint *rightConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
    [self.view addConstraint:rightConstraint2];
}

核心计算公式

Paste_Image.png
苹果的vfl（旧的项目）


NSNumber *margin = @20;
    
    // 添加水平方向的约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView);//传进去一个对象生成一个字典。
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加竖直方向的间距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:|-margin-[blueView(height)]";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];

两个控件(两种方法结合---VFL与outolayout结合)


 NSNumber *margin = @20;
    
    // 添加水平方向的约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView, redView);
    NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
    [self.view addConstraints:constraints];
    
    // 添加竖直方向的间距
    NSNumber *height = @40;
    NSString *vfl2 = @"V:[blueView(height)]-margin-|";
    NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
    [self.view addConstraints:constraints2];

     //添加红色剩余的约束
    NSLayoutConstraint *redContraint1 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    NSLayoutConstraint *redContraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:redContraint1];
    [self.view addConstraint:redContraint2];

屏幕适配（控件相对位置不变）

1.屏幕适配---主要是一个屏幕横竖屏。

2.在Autoresizing之后出现了Autolayout(功能强大)---参照与约束

2.代码实现autolayout。

你可能感兴趣的:(屏幕适配（控件相对位置不变）)