屏幕適配（控件相對位置不變）

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];
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前言 iPhone自誕生以來，隨著其屏幕尺寸不斷的多樣化，屏幕適配的技術一直在發展更新。目前，iOS系統版本已經更...
    VV木公子閱讀 15,460評論 24贊 170
  • 屏幕適配 本章節主要還是說明如何讓應用程序能夠適配在蘋果不同的屏幕和如何讓應用中的內容在不同的屏幕下能夠正常的放置...
    AlanGe閱讀 727評論 0贊 2
  • 一、屏幕適配-autoresizing簡單使用 1、為什么要屏幕適配？ > iphone手機屏幕尺寸呈現多樣化。 ...
    方圓十里不留母狗閱讀 546評論 0贊 0
  • 1.尺寸適配1.原因 iOS7中所有導航欄都為半透明，導航欄（height=44）和狀態欄（height=20）不...
    LZM輪回閱讀 6,143評論 1贊 4
  • 1 內部類：在類中定義的類，成為內部類.一個類的存在依賴于另一個類，如果這個類獨立存在沒有存在的價值，所以可以把他...
    孫睿888閱讀 280評論 0贊 0