利用代碼添加autolayout約束

1.概述

  • 一般咱們經過storyboard可以完成的,代碼也可以完成,因此這裏介紹下代碼實現約束的添加,一般咱們不這麼幹(在不使用第三方框架的狀況下,使用系統自帶的類添加約束特別繁瑣),因此這裏僅僅簡單介紹下代碼實現原理

2.實現效果

  • 實現效果 
    這裏寫圖片描述
  • 純OC代碼 
    • 在storyboard中的一條約束在代碼中的體現就是一個約束對象,因此添加在storyboard上添加一條約束,至關於建立了一個約束對象並將該約束對象添加到對應的視圖上
    • 第一步:建立子控件視圖
    • 第二步:禁用子控件的autoresizing屬性
    • 第三步:建立約束對象
    • 第四步:添加約束對象
- (void)viewDidLoad {
    [super viewDidLoad];
    // 1.建立一個子視圖,添加到父視圖上面
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
#warning 注意點: 若是經過代碼來設置Autolayout約束, 那麼必須先禁用Autoresizing
    // 2.禁用autoresizing
    // 2.1給須要設置約束的視圖禁用autoresizing,禁用父視圖autoresizing對子控件無效
    //self.view.translatesAutoresizingMaskIntoConstraints = NO;//錯誤寫法
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3.添加約束
    // 3.1紅色(紅色距離頂部和左邊以及右邊的邊距固定爲20,高度固定爲50)
    // 3.1.1頂部(基於父控件)
    /*
     constraintWithItem:須要設置約束的view
     attribute:須要設置約束的位置
     relatedBy:約束的條件
     toItem:約束依賴目標
     attribute:依賴目標約束位置
     multiplier:配置係數
     constant:額外須要添加的長度
     */
     /*
     計算公式:redView.attribute = self.view.attribute * multiplier + constant;
     其中:=符號取決於relatedBy:參數
     typedef NS_ENUM(NSInteger, NSLayoutRelation) {
     NSLayoutRelationLessThanOrEqual = -1,   小於等於
     NSLayoutRelationEqual = 0,              等於
     NSLayoutRelationGreaterThanOrEqual = 1, 大於等於
     };
     */
    // 3.1.1.1建立約束對象
    NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    // 3.1.1.2判斷約束條件的層級關係,並添加到對應的視圖
    [self.view addConstraint:redTopCos];
    /*
     attribute:傳入的是枚舉參數
     NSLayoutAttributeLeft = 1,  左邊距
     NSLayoutAttributeRight,     右邊距
     NSLayoutAttributeTop,       距離頂部邊距
     NSLayoutAttributeBottom,    距離底部邊距
     NSLayoutAttributeLeading,   左對齊
     NSLayoutAttributeTrailing,  右對齊
     NSLayoutAttributeWidth,     寬度
     NSLayoutAttributeHeight,    高度
     NSLayoutAttributeCenterX,   中點X
     NSLayoutAttributeCenterY,   中點Y
     NSLayoutAttributeBaseline,  文本底線對齊
     */
    // 3.1.2左邊約束(基於父控件)
    NSLayoutConstraint *redLeftCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    // 3.1.2.2判斷約束條件的層級關係,並添加到對應的視圖
    [self.view addConstraint:redLeftCos];

    // 3.1.3右邊約束(基於父控件)
    NSLayoutConstraint *redRightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    // 3.1.3.2判斷約束條件的層級關係,並添加到對應的視圖
    [self.view addConstraint:redRightCos];

    // 3.1.4 高度約束(自身)
    NSLayoutConstraint *redHeightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:1.0 constant:50];
    // 3.1.3.2判斷約束條件的層級關係,並添加到對應的視圖
    [redView addConstraint:redHeightCos];
}

  

 

3.VFL語言實現約束的添加

  • 蘋果同時爲咱們提供了VisualFormat語言快速添加約束(使用起來比OC簡便一些) 
    這裏寫圖片描述markdown

  • 一樣實現上述效果,代碼以下:框架

- (void)viewDidLoad {
    [super viewDidLoad];
    // 1.建立二個子視圖,添加到父視圖上面
    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];


#warning 注意點: 若是經過代碼來設置Autolayout約束, 那麼必須先禁用Autoresizing
    // 2.禁用autoresizing
    // 2.1給須要設置約束的視圖禁用autoresizing,禁用父視圖autoresizing對子控件無效
    //self.view.translatesAutoresizingMaskIntoConstraints = NO;//錯誤寫法
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3.添加約束
    /*
     VisualFormat: VFL語句
     options: 對齊方式等
     metrics: VFL語句中使用到的一些變量
     views: VFL語句中使用到的一些控件
     */
    // 3.1紅色視圖
    // 水平方向
    NSArray *hCos = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-20-|" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(redView)];
    [self.view addConstraints:hCos];

    //豎直方向

    NSArray *vCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[redView(==50)]" options:kNilOptions metrics:nil views:NSDictionaryOfVariableBindings(redView)];
    [self.view addConstraints:vCos];


    // 3.2藍色視圖
    // 垂直方向
    NSArray *vBlueCos = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[redView]-20-[blueView(==50)]" options:NSLayoutFormatAlignAllRight metrics:nil views:NSDictionaryOfVariableBindings(redView,blueView)];
    [self.view addConstraints:vBlueCos];
    // 水平方向
    NSLayoutConstraint *hBlueCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
    [self.view addConstraint:hBlueCos];
    /*VFL格式說明
     功能        表達式
     水平方向        H:
     垂直方向        V:
     Views        [view]
     SuperView      |
     關係         >=,==,<=
     空間,間隙       -
     優先級        @value
     */
}
NSDictionaryOfVariableBindings(redView,blueView) 也至關於:
@{@"redView": redView , @"blueView": blueView}

[self.contentView addSubview:self.headerImageViewBackgroundView];
    [self.contentView addSubview:self.conversationTitle];
    [self.contentView addSubview:self.messageCreatedTimeLabel];
    [rightContentView addSubview:self.conversationStatusImageView];
    [rightContentView addSubview:self.lastSendMessageStatusView];
    [self.contentView addSubview:rightContentView];
    [self.contentView addSubview:self.messageTypeLabel];
    [self.contentView addSubview:self.messageContentLabel];
    
self.cellSubViews = NSDictionaryOfVariableBindings(_headerImageViewBackgroundView, _conversationTitle,_messageCreatedTimeLabel, _conversationStatusImageView,_lastSendMessageStatusView,rightContentView,_messageContentLabel,_messageTypeLabel);

[self.contentView
     addConstraints:
     [NSLayoutConstraint
      constraintsWithVisualFormat:
      @"H:|-portrait_margin_left-[_headerImageViewBackgroundView(width)]-portrait_margin_right-[_"
      @"conversationTitle]-5-[_messageCreatedTimeLabel(==40)]-12-"
      @"|" options:0 metrics:@{
                               @"portrait_margin_left" :@(portrait_margin_left),
                               @"portrait_margin_right" :@(portrait_margin_right),
                               @"width" :
                                   @([RCIM sharedRCIM].globalConversationPortraitSize.width)
                               } views:self.cellSubViews]];
相關文章
相關標籤/搜索