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（排擠，值越高越固定）和Content Hugging（擁抱）,Masonry代碼如下
//content hugging 為1000[view setContentHuggingPriority:UILayoutPriorityRequiredforAxis:UILayoutConstraintAxisHorizontal];//content compression 為250[view setContentCompressionResistancePriority:UILayoutPriorityDefaultLowforAxis:UILayoutConstraintAxisHorizontal];
multipler屬性表示約束值為約束對(duì)象的百分比，在Masonry里有對(duì)應(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)試完成的，測(cè)試時(shí)發(fā)現(xiàn)低版本的系統(tǒng)會(huì)發(fā)生奔潰的現(xiàn)象，修復(fù)后總結(jié)問題主要是在equalTo的對(duì)象指到了父視圖的父視圖或者父視圖同級(jí)的子視圖上造成的，所以做約束時(shí)如果出現(xiàn)了奔潰問題百分之九十都是因?yàn)檫@個(gè)。
Masonry使用范例
基本寫法
//相對(duì)于父視圖邊距為10UIEdgeInsetspadding =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 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);}];//相對(duì)于父視圖邊距為10簡潔寫法[self.avatarView mas_makeConstraints:^(MASConstraintMaker*make) {? ? make.edges.equalTo(superview).with.insets(padding);}];//這兩個(gè)作用完全一樣[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可以用以前的數(shù)據(jù)結(jié)構(gòu)，只需用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));}];//也可以使用數(shù)組[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的使用[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);}];//同時(shí)創(chuàng)建多個(gè)約束[self.avatarView mas_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
CGFloatmaxWidth = [UIScreenmainScreen].bounds.size.width-10*2;textLabel = [UILabelnew];textLabel.numberOfLines=0;textLabel.preferredMaxLayoutWidth= maxWidth;[self.contentViewaddSubview: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:UILayoutPriorityRequiredforAxis:UILayoutConstraintAxisVertical];
如果版本支持最低版本為iOS 8以上的話可以直接利用UITableViewAutomaticDimension在tableview的heightForRowAtIndexPath直接返回即可。
tableView.rowHeight=UITableViewAutomaticDimension;tableView.estimatedRowHeight=80;//減少第一次計(jì)算量，iOS7后支持- (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {// 只用返回這個(gè)！returnUITableViewAutomaticDimension;}
但如果需要兼容iOS 8之前版本的話，就要回到老路子上了，主要是用systemLayoutSizeFittingSize來取高。步驟是先在數(shù)據(jù)model中添加一個(gè)height的屬性用來緩存高，然后在table view的heightForRowAtIndexPath代理里static一個(gè)只初始化一次的Cell實(shí)例，然后根據(jù)model內(nèi)容填充數(shù)據(jù)，最后根據(jù)cell的contentView的systemLayoutSizeFittingSize的方法獲取到cell的高。具體代碼如下
//在model中添加屬性緩存高度@interfaceDataModel: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 = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([CustomCell class])];? ? });? ? 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)行控制。具體代碼如下
[aniViewmas_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];}];
參考文章
Masonry官網(wǎng)：https://github.com/SnapKit/Masonry
Apple官方Auto Layout Guide：https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html
WWDC2012 session 202 – Introduction to Auto Layout for iOS and OS X：https://developer.apple.com/videos/wwdc/2012/?id=202
WWDC2012 session 228 – Best Practices for Mastering Auto Layout：https://developer.apple.com/videos/wwdc/2012/?id=228
WWDC2012 session 232 – Auto Layout by Example：https://developer.apple.com/videos/wwdc/2012/?id=232
除非注明，均為Starming星光社原創(chuàng)，微信公共號(hào) starming-weixin 發(fā)現(xiàn)更多，轉(zhuǎn)載請(qǐng)注明本文地址：http://www.starming.com/index.php?v=index&view=81
