自動佈局(storyboard,code)

時間  2019-11-24
標籤 自動 佈局 storyboard code 简体版
原文   原文鏈接

xcode 6使用storyboard 進行自動佈局，迷惑的問題主要由：ios

1，classsize 究竟是一個什麼東東？git

2，classSize 和 layout 有什麼區別?github

3,  如何使用storyboard 進行自動佈局xcode

4，什麼是約束？app

5，常見的約束報錯有哪些？oop

6，在開發過程當中（使用storyboard）應該注意哪些問題？佈局

這些問題我會在ui

代碼級別的界面顯示    spa

1，若是是從代碼層面開始使用Autolayout,須要對使用的View的translatesAutoresizingMaskIntoConstraints的屬性設置爲NO.
便可開始經過代碼添加Constraint,不然View仍是會按照以往的autoresizingMask進行計算.
而在Interface Builder中勾選了Ues Autolayout,IB生成的控件的translatesAutoresizingMaskIntoConstraints屬性都會被默認設置NO..net

2，值得注意的是,添加約束以前必定要將子視圖優先addSubview到父視圖中,不然在添加約束時會產生編譯器警告.
而咱們在理解的時候,能夠經過這種方式來理解.item1.attribute = multiplier ⨉ item2.attribute + constant，好比看下面的代碼

 

[objc]  view plain copy
 
  1. UIView *newView = [[UIView alloc]init];  
  2.     newView.backgroundColor = [UIColor redColor];  
  3.       
  4.     [self.view addSubview:newView];  
  5.       
  6. //   self.view.translatesAutoresizingMaskIntoConstraints =NO;  
  7.   
  8.     newView.translatesAutoresizingMaskIntoConstraints =NO;  
  9.   
  10.     NSLayoutConstraint *constraint = nil;  
  11.   
  12.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  13.                                               attribute:NSLayoutAttributeLeading  
  14.                                               relatedBy:NSLayoutRelationEqual  
  15.                                                  toItem:self.view  
  16.                                               attribute:NSLayoutAttributeLeading  
  17.                                              multiplier:1.0f  
  18.                                                constant:20];  
  19.     [self.view addConstraint:constraint];  
  20.   
  21.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  22.                                               attribute:NSLayoutAttributeTrailing  
  23.                                               relatedBy:NSLayoutRelationEqual  
  24.                                                  toItem:self.view  
  25.                                               attribute:NSLayoutAttributeTrailing  
  26.                                              multiplier:1.0f  
  27.                                                constant:-20];  
  28.     [self.view addConstraint:constraint];  
  29.   
  30.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  31.                                               attribute:NSLayoutAttributeTop  
  32.                                               relatedBy:NSLayoutRelationEqual  
  33.                                                  toItem:self.view  
  34.                                               attribute:NSLayoutAttributeTop  
  35.                                              multiplier:1.0f  
  36.                                                constant:80];  
  37.     [self.view addConstraint:constraint];  
  38.   
  39.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  40.                                               attribute:NSLayoutAttributeBottom  
  41.                                               relatedBy:NSLayoutRelationEqual  
  42.                                                  toItem:self.view  
  43.                                               attribute:NSLayoutAttributeBottom  
  44.                                              multiplier:1.0f  
  45.                                                constant:-20];  
  46.     [self.view addConstraint:constraint];  


建立了一個單視圖，距離各邊界的距離依次是：20  20  80  20（左，右，上，下），或許有人會疑問爲何距離右寫的是-20，why, 其實緣由很簡單，由於咱們參照的是self.view.trailing  ,而視圖newView是加在self.view上，是在self.view.trailing 的左邊，因此應該是賦值，以此類推距離底部也是同樣

 

有人會問到底屬性都有哪些，下面會給你們列舉一下，這裏包括ios 8 最新添加的(一下加紅的是經常使用的一些方法)

    NSLayoutAttributeLeft = 1,    對齊對象的左邊
    NSLayoutAttributeRight,        對齊對象的右邊
    NSLayoutAttributeTop,          距離頂部的距離
    NSLayoutAttributeBottom,    距離底部的距離  
    NSLayoutAttributeLeading,   距離左邊的距離
    NSLayoutAttributeTrailing,    距離右邊部的距離
    NSLayoutAttributeWidth,      控件的寬度
    NSLayoutAttributeHeight,     控件的高度
    NSLayoutAttributeCenterX,  x 軸中線點的距離
    NSLayoutAttributeCenterY,  y 軸中線點的距離
    NSLayoutAttributeBaseline, 
    NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,

    //   在API 8.0  文檔中貌似沒有詳細的說明，但你們一看意思也明白了，就是距離各個邊界的設置
    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeNotAnAttribute = 0

注：NSLayoutAttributeLeft/NSLayoutAttributeRight 和 NSLayoutAttributeLeading/NSLayoutAttributeTrailing的區別是left/right永遠是指左右，而leading/trailing在某些從右至左習慣的地區會變成，leading是右邊，trailing是左邊。


以上就是經過簡單的代碼實現了自動佈局（單一控件），你們會發若是頁面上試圖多的話，用這種方式顯得特別麻煩，的確是的，下面我介紹一下另外一種方法

經過可視化語言的方式

先學點基礎知識, 

1 調用的方法

 

[objc]  view plain copy
 
  1. + (NSArray *)constraintsWithVisualFormat:(NSString *)format  
  2.                                  options:(NSLayoutFormatOptions)opts  
  3.                                  metrics:(NSDictionary *)metrics  
  4.                                    views:(NSDictionary *)views  

介紹一下各個參數的意思

 

1 format   約束的規格要求  說白了就是條件。

2 opts       主要用來描述屬性和用來指導可視化語言中的佈局樣式。

3 metrics  一個字典實例主要用來顯示你在可視化話中用的字符串的參數設置，好比：nextwidth:@12, 必須是一個字典對象。

4 views   全部描述的空間字典集合，也必須以字典的形式展示出來。

下面經過一個實例的方式

 

[objc]  view plain copy
 
  1. UIView *two = [UIView new];  
  2.    two.backgroundColor = [UIColor greenColor];  
  3.    [self.view addSubview:two];  
  4.    two.translatesAutoresizingMaskIntoConstraints = NO;  
  5.    NSDictionary *views = NSDictionaryOfVariableBindings(two, self.view);  
  6.      
  7.    NSMutableArray *constraintArray = [NSMutableArray array];  
  8.    [constraintArray addObjectsFromArray:[NSLayoutConstraint   constraintsWithVisualFormat:@"H:|-20-[two]-20-|"  
  9.                                                                                 options:0  
  10.                                                                                   metrics:nil  
  11.                                                                                     views:views]];  
  12.    [constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-80-[two]-20-|" options:0 metrics:nil views:views]];  
  13.    [self.view addConstraints:constraintArray];  


簡單的幾句話就實現了和上面一樣的效果，從而能夠充分的看到可視化語言是多麼的方便

 

下面爲你們帶來介紹一些第三方實現該效果的代碼

首推：PureLayout 他是UIView+Layout  的後繼者，項目中建議使用PureLayout , 使用起來特方便，至於如何導入請你們參考文檔本身完成 

下載地址：https://github.com/smileyborg/PureLayout

直接上代碼：

 

[objc]  view plain copy
 
  1. UIView *newView = [UIView new];  
  2.     newView.backgroundColor = [UIColor blueColor];  
  3.     [self.view addSubview:newView];  
  4.       
  5.     newView.translatesAutoresizingMaskIntoConstraints = NO;  
  6.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeLeading) withInset:20];  
  7.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeTrailing) withInset:20];  
  8.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeTop) withInset:80];  
  9.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeBottom) withInset:20];  


你可能會很吃驚，哇？這麼簡單，的確是的就是這麼簡單，徹底符合咱們使用storyboard 的習慣，至於UIView+autoLayout 和 PureLayout的具體使用，我會在後面的文章中單獨拿出一章單獨介紹他的使用，如今主要是瞭解一下自動佈局的使用

 

先看一下效果圖，橫屏效果圖

豎屏效果圖

下面我們來點有難度的代碼，嘿嘿，終於能夠放手作一下了

 

[objc]  view plain copy
 
    1. - (void)viewDidLoad {  
    2.     [super viewDidLoad];  
    3.     self.view.backgroundColor = [UIColor whiteColor];  
    4.     // 1 建立三個視圖 紅/綠/藍/黃/橙色視圖  
    5.       
    6.     // 紅  
    7.     UIView *redView = [self alive];  
    8.     redView.backgroundColor = [UIColor redColor];  
    9.     [self.view addSubview:redView];  
    10.     // 綠  
    11.     UIView *greenView = [self alive];  
    12.     greenView.backgroundColor = [UIColor greenColor];  
    13.     [self.view addSubview:greenView];  
    14.     // 藍  
    15.     UIView *blueView = [self alive];  
    16.     blueView.backgroundColor = [UIColor blueColor];  
    17.     [self.view addSubview:blueView];  
    18.     // 黃  
    19.     UIView *yellowView = [self alive];  
    20.     yellowView.backgroundColor = [UIColor yellowColor];  
    21.     [self.view addSubview:yellowView];  
    22.     // 橙  
    23.     UIView *orangeView = [self alive];  
    24.     orangeView.backgroundColor = [UIColor orangeColor];  
    25.     [self.view addSubview:orangeView];  
    26.       
    27.     [self.view addConstraints:[self portraitConstraints:redView :greenView :blueView yellowView:yellowView orangeView:orangeView]];  
    28.       
    29. }  
    30. // 這樣寫徹底是爲了代碼的方便使用,建立對象的同時初始化控件  
    31. - (UIView *)alive  
    32. {  
    33.     UIView *newView = [UIView new];  
    34.     newView.translatesAutoresizingMaskIntoConstraints = NO;  
    35.     return newView;  
    36. }  
    37. - (NSMutableArray *) portraitConstraints:(UIView *)redView :(UIView *)greenView :(UIView *)blueView yellowView:(UIView *)yellowView orangeView:(UIView *)orangeView  
    38. {  
    39.     NSMutableArray *array = [NSMutableArray array];  
    40.     // 注1：紅色視圖的寬度大於等於10 小於30    黃色視圖的寬度大於40 小於120  水平  
    41.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(>=10,<=30)]-20-[greenView(>=40,<=120)]-20-[yellowView]-20-|" options:0 metrics:nil  
    42.                                                                              views:NSDictionaryOfVariableBindings(redView, greenView, yellowView)]];  
    43.     // 注2：垂直方向 red高度H:100<= <=160  藍色 H:30<= <=60  橙色待定  
    44.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[redView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
    45.                                                                          views:NSDictionaryOfVariableBindings(redView, blueView, orangeView)]];  
    46.     // 和注2相似  
    47.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[greenView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
    48.                                                                          views:NSDictionaryOfVariableBindings(greenView, blueView, orangeView)]];  
    49.     // 和注2相似   或許有人會問 爲何得添加黃色和綠色，緣由很簡單，就是爲了知足各個約束，避免形成約束不足  
    50.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[yellowView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
    51.                                                                          views:NSDictionaryOfVariableBindings(yellowView, blueView, orangeView )]];  
    52.       
    53.       
    54.     // 注3：控制blued的寬度  
    55.     [array addObjectsFromArray:[NSLayoutConstraint  
    56.                                           constraintsWithVisualFormat:@"H:|-20-[blueView]-120-|" options:0 metrics:nil  
    57.                                           views:NSDictionaryOfVariableBindings(blueView)]];  
    58.     // 注4：爲橙色高度添加約束條件  
    59.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView]-20-[orangeView(>=blueView)]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];  
    60.       
    61.     // 注4：爲橙色添加寬度約束條件  
    62.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];  
    63.     return array;  
    64. }  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程