AutoLayout框架Masonry使用心得
我們組分享會(huì)上分享了頁面布局的一些寫法，中途提到了AutoLayout惠拭，會(huì)后我決定將很久前挖的一個(gè)坑給填起來（還有好多坑就不說了费什，說了不填更毀形象了）。
可使用的框架首推Masonry夕玩，關(guān)于為啥選擇Masonry看看官方文檔就明白了https://github.com/SnapKit/Masonry
泪幌，官方稱AutoLayout所有功能Masonry都支持。這次項(xiàng)目界面方面我就全部使用了Masonry馒过。
AutoLayout的一些基本概念
利用約束來控制視圖的大小和位置臭脓，系統(tǒng)會(huì)在運(yùn)行時(shí)通過設(shè)置的約束計(jì)算得到frame再繪制屏幕
兩個(gè)屬性Content Compression Resistance（排擠，值越高越固定）和ContentHugging（擁抱）,Masonry代碼如下
//content hugging 為1000
[viewsetContentHuggingPriority:UILayoutPriorityRequiredforAxis:UILayoutConstraintAxisHorizontal];//contentcompression 為250[viewsetContentCompressionResistancePriority:UILayoutPriorityDefaultLowforAxis:UILayoutConstraintAxisHorizontal];
multipler屬性表示約束值為約束對象的百分比腹忽，在Masonry里有對應(yīng)的multipliedBy函數(shù)
//寬度為superView寬度的20%
make.width.equalTo(superView.mas_width).multipliedBy(0.2);
AutoLayout下UILabel設(shè)置多行計(jì)算需要設(shè)置preferredMaxLayoutWidth
label.preferredMaxWidth
= [UIScreenmainScreen].bounds.size.width- margin - padding;
preferredMaxLayoutWidth用來制定最大的寬来累，一般用在多行的UILabel中
systemLayoutSizeFittingSize方法能夠獲得view的高度
iOS7有兩個(gè)很有用的屬性，topLayoutGuide和bottomLayoutGuide窘奏，這個(gè)兩個(gè)主要是方便獲取UINavigationController和UITabBarController的頭部視圖區(qū)域和底部視圖區(qū)域嘹锁。
//Masonry直接支持這個(gè)屬性
make.top.equalTo(self.mas_topLayoutGuide);
AutoLayout關(guān)于更新的幾個(gè)方法的區(qū)別
setNeedsLayout：告知頁面需要更新，但是不會(huì)立刻開始更新着裹。執(zhí)行后會(huì)立刻調(diào)用layoutSubviews领猾。
layoutIfNeeded：告知頁面布局立刻更新。所以一般都會(huì)和setNeedsLayout一起使用。如果希望立刻生成新的frame需要調(diào)用此方法摔竿，利用這點(diǎn)一般布局動(dòng)畫可以在更新布局后直接使用這個(gè)方法讓動(dòng)畫生效面粮。
layoutSubviews：系統(tǒng)重寫布局
setNeedsUpdateConstraints：告知需要更新約束，但是不會(huì)立刻開始
updateConstraintsIfNeeded：告知立刻更新約束
updateConstraints：系統(tǒng)更新約束
Masonry使用注意事項(xiàng)
用mas_makeConstraints的那個(gè)view需要在addSubview之后才能用這個(gè)方法
mas_equalTo適用數(shù)值元素继低，equalTo適合多屬性的比如make.left.and.right.equalTo(self.view)
方法and和with只是為了可讀性熬苍，返回自身，比如make.left.and.right.equalTo(self.view)和make.left.right.equalTo(self.view)是一樣的袁翁。
因?yàn)閕OS中原點(diǎn)在左上角所以注意使用offset時(shí)注意right和bottom用負(fù)數(shù)柴底。
Masonry適配iOS6和iOS7時(shí)需要注意的問題
開發(fā)項(xiàng)目時(shí)是先在iOS8上調(diào)試完成的，測試時(shí)發(fā)現(xiàn)低版本的系統(tǒng)會(huì)發(fā)生奔潰的現(xiàn)象粱胜，修復(fù)后總結(jié)問題主要是在equalTo的對象指到了父視圖的父視圖或者父視圖同級的子視圖上造成的柄驻，所以做約束時(shí)如果出現(xiàn)了奔潰問題百分之九十都是因?yàn)檫@個(gè)。
Masonry使用范例
基本寫法
//相對于父視圖邊距為10
UIEdgeInsets
padding =UIEdgeInsetsMake(10,10,10,10);[self.avatarViewmas_makeConstraints:^(MASConstraintMaker*make) {make.top.equalTo(superview.mas_top).with.offset(padding.top);//with is an optional semantic fillermake.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.avatarViewmas_makeConstraints:^(MASConstraintMaker*make) {make.edges.equalTo(superview).with.insets(padding);}];//這兩個(gè)作用完全一樣[self.avatarViewmas_makeConstraints:^(MASConstraintMaker*make) {make.left.greaterThanOrEqualTo(self.view);make.left.greaterThanOrEqualTo(self.view.mas_left);}];//.equalTo .lessThanOrEqualTo.greaterThanOrEqualTo使用NSNumber[self.avatarViewmas_makeConstraints:^(MASConstraintMaker*make) {make.width.greaterThanOrEqualTo(@200);make.width.lessThanOrEqualTo(@400);make.left.lessThanOrEqualTo(@10);}];//如果不用NSNumber可以用以前的數(shù)據(jù)結(jié)構(gòu)焙压，只需用mas_equalTo就行[self.avatarViewmas_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));}];//也可以使用數(shù)組[self.avatarViewmas_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的使用[self.avatarViewmas_makeConstraints:^(MASConstraintMaker*make) {make.left.greaterThanOrEqualTo(self.view.mas_left).with.priorityLow();make.top.equalTo(self.view.mas_top).with.priority(600);}];//同時(shí)創(chuàng)建多個(gè)約束[self.avatarViewmas_makeConstraints:^(MASConstraintMaker*make) {//讓top,left,bottom,right都和self.view一樣make.edges.equalTo(self.view);//edgesmake.edges.equalTo(self.view).insets(UIEdgeInsetsMake(5,10,15,20));//sizemake.size.greaterThanOrEqualTo(self.view);make.size.equalTo(superview).sizeOffset(CGSizeMake(100,-50));//centermake.center.equalTo(self.view);make.center.equalTo(self.view).centerOffset(CGPointMake(-5,10));//chainmake.left.right.and.bottom.equalTo(self.view);make.top.equalTo(self.view); }];
AutoLayout情況如何計(jì)算UITableView的變高高度
主要是UILabel的高度會(huì)有變化凿歼，所以這里主要是說說label變化時(shí)如何處理，設(shè)置UILabel的時(shí)候注意要設(shè)置preferredMaxLayoutWidth這個(gè)寬度冗恨，還有ContentHuggingPriority為UILayoutPriorityRequried
CGFloat
maxWidth = [UIScreenmainScreen].bounds.size.width-10*2; textLabel =[UILabelnew]; textLabel.numberOfLines=0; textLabel.preferredMaxLayoutWidth=maxWidth; [self.contentViewaddSubview:textLabel]; [textLabelmas_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);}]; [_contentLabelsetContentHuggingPriority:UILayoutPriorityRequiredforAxis:UILayoutConstraintAxisVertical];
如果版本支持最低版本為iOS8以上的話可以直接利用UITableViewAutomaticDimension在tableview的heightForRowAtIndexPath直接返回即可。
tableView.rowHeight
=UITableViewAutomaticDimension;tableView.estimatedRowHeight=80;//減少第一次計(jì)算量味赃，iOS7后支持-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {// 只用返回這個(gè)掀抹！returnUITableViewAutomaticDimension; }
但如果需要兼容iOS8之前版本的話，就要回到老路子上了心俗，主要是用systemLayoutSizeFittingSize來取高傲武。步驟是先在數(shù)據(jù)model中添加一個(gè)height的屬性用來緩存高，然后在tableview的heightForRowAtIndexPath代理里static一個(gè)只初始化一次的Cell實(shí)例城榛，然后根據(jù)model內(nèi)容填充數(shù)據(jù)揪利，最后根據(jù)cell的contentView的systemLayoutSizeFittingSize的方法獲取到cell的高。具體代碼如下
//在model中添加屬性緩存高度
DataModel:NSObject@property(copy,nonatomic)NSString*text;@property(assign,nonatomic)CGFloatcellHeight;//緩存高度@end-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {staticCustomCell *cell;//只初始化一次cellstaticdispatch_once_tonceToken;dispatch_once(&onceToken, ^{ cell = [tableViewdequeueReusableCellWithIdentifier:NSStringFromClass([CustomCellclass])]; }); DataModel *model =self.dataArray[(NSUInteger)indexPath.row]; [cell makeupData:model];if(model.cellHeight<=0) {//使用systemLayoutSizeFittingSize獲取高度model.cellHeight= [cell.contentViewsystemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height+1; }returnmodel.cellHeight; }
動(dòng)畫
因?yàn)椴季旨s束就是要脫離frame這種表達(dá)方式的狠持，可是動(dòng)畫是需要根據(jù)這個(gè)來執(zhí)行疟位，這里面就會(huì)有些矛盾，不過根據(jù)前面說到的布局約束的原理喘垂，在某個(gè)時(shí)刻約束也是會(huì)被還原成frame使視圖顯示甜刻，這個(gè)時(shí)刻可以通過layoutIfNeeded這個(gè)方法來進(jìn)行控制。具體代碼如下
[aniView
mas_makeConstraints:^(MASConstraintMaker*make) {make.top.bottom.left.right.equalTo(self.view).offset(10);}];[aniViewmas_updateConstraints:^(MASConstraintMaker*make) {make.top.equalTo(self.view).offset(30);}];[UIViewanimateWithDuration:3 animations:^{[self.viewlayoutIfNeeded];}];
