Awesome Masonry

Masonry:

 //左上角
    [_label1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_contentView1.mas_top).with.offset(5); make.left.equalTo(_contentView1.mas_left).with.offset(2); make.height.equalTo(@40); }]; // 右上角 [_label2 mas_makeConstraints:^(MASConstraintMaker *make) { //左邊貼着label1 make.left.equalTo(_label1.mas_right).with.offset(2); //上邊貼着父view make.top.equalTo(_contentView1.mas_top).with.offset(5); //右邊的間隔保持大於等於2，注意是lessThanOrEqual,即：label2的右邊界的X座標值「小於等於」containView的右邊界的X座標值。 make.right.lessThanOrEqualTo(_contentView1.mas_right).with.offset(-2); make.height.equalTo(@40); }]; //設置label1的content hugging 爲1000  [_label1 setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal]; //設置label1的content compression 爲1000  [_label1 setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal]; //設置右邊的label2的content hugging 爲1000  [_label2 setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal]; //設置右邊的label2的content compression 爲250  [_label2 setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

//循環建立、添加imageView
    for (NSUInteger i = 0; i < 4; i++) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:_imageNames[i]]]; [_imageViews addObject:imageView]; [_containerView addSubview:imageView]; } CGSize imageViewSize = CGSizeMake(IMAGE_SIZE, IMAGE_SIZE); //分別設置每一個imageView的寬高、左邊、垂直中心約束，注意約束的對象  UIView __block *lastView = nil; MASConstraint __block *widthConstraints = nil; NSUInteger arrCount = _imageViews.count; [_imageViews enumerateObjectsUsingBlock:^(UIView* view, NSUInteger idx, BOOL * stop) { [view mas_makeConstraints:^(MASConstraintMaker *make) { widthConstraints = make.width.equalTo(@(imageViewSize.width)); make.height.equalTo(@(imageViewSize.height)); make.left.equalTo(lastView ? lastView.mas_right : view.superview.mas_left ); make.centerY.equalTo(view.superview.mas_centerY); //設置最右邊的imageView的右邊與父view的最有對齊 if (idx == arrCount - 1) { make.right.equalTo(view.superview.mas_right); } [_widthConstraints addObject:widthConstraints]; lastView = view; }]; }];

添加宏 而不寫mas：

#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS

約束對象比例

//寬度爲superView寬度的20%
make.width.equalTo(superView.mas_width).multipliedBy(0.2);

UILabel設置多行計算須要設置preferredMaxLayoutWidth：

label.preferredMaxWidth = [UIScreen mainScreen].bounds.size.width - margin - padding;

兩個屬性Content Compression Resistance（排擠，值越高越固定）和Content Hugging（擁抱）：

//content hugging 爲1000
[view setContentHuggingPriority:UILayoutPriorityRequired
                           forAxis:UILayoutConstraintAxisHorizontal];

//content compression 爲250
[view setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

topLayoutGuide和bottomLayoutGuide，這個兩個主要是方便獲取UINavigationController和UITabBarController的頭部視圖區域和底部視圖區域。

//Masonry直接支持這個屬性
make.top.equalTo(self.mas_topLayoutGuide);

相對父視圖邊距爲10兩種寫法：

//相對於父視圖邊距爲10
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler  make.left.equalTo(superview.mas_left).with.offset(padding.left); make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom); make.right.equalTo(superview.mas_right).with.offset(-padding.right); }]; //相對於父視圖邊距爲10簡潔寫法 [self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(superview).with.insets(padding); }];

lessThan使用的數據結構：

//這兩個做用徹底同樣
[self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.greaterThanOrEqualTo(self.view);
    make.left.greaterThanOrEqualTo(self.view.mas_left);
}];

//.equalTo .lessThanOrEqualTo .greaterThanOrEqualTo使用NSNumber
[self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) { make.width.greaterThanOrEqualTo(@200); make.width.lessThanOrEqualTo(@400); make.left.lessThanOrEqualTo(@10); }]; //若是不用NSNumber能夠用之前的數據結構，只需用mas_equalTo就行 [self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(42); make.height.mas_equalTo(20); make.size.mas_equalTo(CGSizeMake(50, 100)); make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0)); make.left.mas_equalTo(self.view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0)); }]; //也可使用數組 [self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) { make.height.equalTo(@[self.view.mas_height, superview.mas_height]); make.height.equalTo(@[self.view, superview]); make.left.equalTo(@[self.view, @100, superview.mas_right]); }];

優先Priority、同時建立多個約束

// priority的使用
[self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.greaterThanOrEqualTo(self.view.mas_left).with.priorityLow();
    make.top.equalTo(self.view.mas_top).with.priority(600); }]; //同時建立多個約束 [self.avatarView mas_makeConstraints:^(MASConstraintMaker *make) { //讓top,left,bottom,right都和self.view同樣  make.edges.equalTo(self.view); //edges make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(5, 10, 15, 20)); //size  make.size.greaterThanOrEqualTo(self.view); make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50)); //center  make.center.equalTo(self.view); make.center.equalTo(self.view).centerOffset(CGPointMake(-5, 10)); //chain  make.left.right.and.bottom.equalTo(self.view); make.top.equalTo(self.view); }];

計算UITableView的變高高度

CGFloat maxWidth = [UIScreen mainScreen].bounds.size.width - 10 * 2;

textLabel = [UILabel new]; textLabel.numberOfLines = 0; textLabel.preferredMaxLayoutWidth = maxWidth; [self.contentView addSubview:textLabel]; [textLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(statusView.mas_bottom).with.offset(10); make.left.equalTo(self.contentView).with.offset(10); make.right.equalTo(self.contentView).with.offset(-10); make.bottom.equalTo(self.contentView).with.offset(-10); }]; [_contentLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];

兼容問題：

若是版本支持最低版本爲iOS 8以上的話能夠直接利用UITableViewAutomaticDimension在tableview的heightForRowAtIndexPath直接返回便可。

tableView.rowHeight = UITableViewAutomaticDimension; tableView.estimatedRowHeight = 80; //減小第一次計算量，iOS7後支持 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { // 只用返回這個！ return UITableViewAutomaticDimension; } 但若是須要兼容iOS 8以前版本的話，就要回到老路子上了，主要是用systemLayoutSizeFittingSize來取高。步驟是先在數據model中添加一個height的屬性用來緩存高，而後在table view的heightForRowAtIndexPath代理裏static一個只初始化一次的Cell實例，而後根據model內容填充數據，最後根據cell的contentView的systemLayoutSizeFittingSize的方法獲取到cell的高。具體代碼以下 //在model中添加屬性緩存高度 @interface DataModel : NSObject @property (copy, nonatomic) NSString *text; @property (assign, nonatomic) CGFloat cellHeight; //緩存高度 @end - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { static CustomCell *cell; //只初始化一次cell static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([CustomCell class])]; }); DataModel *model = self.dataArray[(NSUInteger) indexPath.row]; [cell makeupData:model]; if (model.cellHeight <= 0) { //使用systemLayoutSizeFittingSize獲取高度 model.cellHeight = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height + 1; } return model.cellHeight; }

動畫：

動畫
由於佈局約束就是要脫離frame這種表達方式的，但是動畫是須要根據這個來執行，這裏面就會有些矛盾，不過根據前面說到的佈局約束的原理，在某個時刻約束也是會被還原成frame使視圖顯示，這個時刻能夠經過layoutIfNeeded這個方法來進行控制。具體代碼以下

[aniView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.bottom.left.right.equalTo(self.view).offset(10); }]; [aniView mas_updateConstraints:^(MASConstraintMaker *make) { make.top.equalTo(self.view).offset(30); }]; [UIView animateWithDuration:3 animations:^{ [self.view layoutIfNeeded]; }];