- (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]; }
蘋果同時爲咱們提供了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]];