Frame
使用Frame 來布局UI是開始的做法，現(xiàn)在也有很多人仍然鐘情與這種方法，這種方法很直觀，使用起來也很簡單，但是他的簡單決定了他在屏幕適配和內(nèi)容自適應(yīng)上的局限性（橫豎屏?xí)r不設(shè)置的話無法使用,因?yàn)闄M屏的時候，之前設(shè)置的Frame屬性 還是豎屏的Frame）`，當(dāng)然可以使用Fram的方法達(dá)到屏幕適配和自動布局，但是中間的過程是復(fù)雜而且工作量巨大的，寫起來也是痛苦的。通常使用這種方法布局是通過比例放縮來達(dá)到的，比如使用如下的宏來替換掉系統(tǒng)的CGRectMake(x , y , width , height) 布局來達(dá)到屏幕適配的效果。
#define NEWX? ? ? ? ? ? ? ? ? ?? [UIScreen mainScreen].bounds.size.width/320
#define RECT(a,b,c,d)? ? ? ? ? ? CGRectMake(a*NEWX, b, c*NEWX, d)
但是因?yàn)橄到y(tǒng)的layoutSubviews 方法是默認(rèn)不執(zhí)行任何布局的，需要使用者在頁面內(nèi)容確定后再次對空間的Frame進(jìn)行重置，牽一發(fā)而動全身的重置是痛苦而繁瑣的。
AutoLayout（動畫中使用是個弱點(diǎn)）
使用SDAutoLayout ?不光是為了橫豎屏的適配（通過判斷屏幕方向，重置 Frame ?也可以做到），是為了TablevIew中cell ?因?yàn)閮?nèi)容的不同而動態(tài)完美布局的效果。使用了這么久，對于父試圖是 ?Button ／ Label 時，這里面的約束是不生效的。而且同層級的試圖 ?無法達(dá)到重合布局，兩個試圖重合的話只有是 ?父／子視圖的關(guān)系。
Autolayout簡單來說就是一套 `適配iPhone機(jī)型`并且`兼容橫豎屏`的UI布局系統(tǒng)，Auto Layout 是一個系統(tǒng)，可以讓你通過創(chuàng)建`元素之間關(guān)系`的數(shù)學(xué)描述來布局應(yīng)用程序的用戶界面，是一種基于約束的，描述性的布局系統(tǒng)。`這中頁面布局方式的思維模式跟Frame完全不同，使用時應(yīng)跳出Frame的坐標(biāo)布局思維模式，站在關(guān)系依賴布局的思維方式上才可以達(dá)到嫻熟正確的使用。`
我們可以在XIB、StoryBoard中通過拉線的形式給控件視圖添加布局約束，通過蘋果強(qiáng)大的可視化界 IB（Interface Builder）我們能夠輕松的使用AutoLayout完成界面視圖的布局。另外一種方式就是通過純代碼的形式使用AutoLayout，即NSLayoutConstraint。
IB
純代碼的AutoLayout
原生的iOS布局,要添加`一個約束`是這樣的:
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view //第一個view
attribute:NSLayoutAttribute //約束屬性, 比如上下左右寬高等間距
relatedBy:NSLayoutRelationEqual //相等,或者大于等于,小于等于
toItem:secondView //第二個view,也就是第一個view是要參照第二個view的
attribute:NSLayoutAttribute //參照第二個view的屬性
multiplier:multiplier? //比例0--1
constant:0]; //約束值
就這樣隨便加一個約束就如此的繁瑣，更何況一個view最起碼有上邊距，左邊距和寬高，也就是所謂的x、y、width、height四個基本屬性。就相當(dāng)于以上那復(fù)雜的代碼就要最少寫四次。
所以對IOS的AutoLayout進(jìn)行封裝就顯得很有必要了。本次推薦使用的是一個第三方的AutoLayout庫這個庫實(shí)現(xiàn)了對普通空間的自動布局，也實(shí)現(xiàn)了對ScrollView及UITableView的自動布局，操作簡單，功能強(qiáng)大(SDAutoLayout)
主要的API說明如下：
leftSpaceToView(self.view, 10)
方法名中帶有“SpaceToView”的方法表示到某個參照view的間距，需要傳遞2個參數(shù)：（UIView）參照view 和 （CGFloat）間距數(shù)值? `當(dāng)這個參照View是他的父試圖時，leftSpaceToView就表示當(dāng)前這個試圖的左邊到父試圖左邊的距離，當(dāng)這個試圖是同一層級的參照的話，就表示當(dāng)前試圖的左邊到參照試圖右邊的距離，依次類推,傳入的這個CGFloat值需要是一起的值才行，如果這個值是組合值的話就要加（）如：leftSpaceToView(self.sc,（passWordBgView.width+5）)。各種設(shè)置彼此之間是彼此獨(dú)立的，后面的設(shè)置效果會覆蓋前面設(shè)置的效果。考慮到完美適配的問題 ?引入一下兩個宏：
#define Scale_X(a)(a*NEWX)
#define Scale_Y(a)(a*NEWY)
eg：.heightIs((Scale_Y(45)));
widthRatioToView(self.view, 1)
方法名中帶有“RatioToView”的方法表示view的寬度或者高度等屬性相對于參照view的對應(yīng)屬性值的比例，需要傳遞2個參數(shù)：（UIView）參照view 和 （CGFloat）倍數(shù)
topEqualToView(view)
方法名中帶有“EqualToView”的方法表示view的某一屬性等于參照view的對應(yīng)的屬性值，需要傳遞1個參數(shù)：（UIView）參照view
widthIs(100)
方法名中帶有“Is”的方法表示view的某一屬性值等于參數(shù)數(shù)值，需要傳遞1個參數(shù)：（CGFloat）數(shù)值
autoHeightRatio(0)
自適應(yīng)高度，傳入高寬比值，label可以傳0實(shí)現(xiàn)文字高度自適應(yīng)
spaceToSuperView(UIEdgeInsetsMake(10, 10, 0, 10))
傳入UIEdgeInsetsMake(top, left, bottom, right)，可以快捷設(shè)置view到其父view上左下右的間距
對于cell的自適應(yīng)，推薦兩種方法
@interface UITableViewController (SDTableViewControllerAutoCellHeight)
(UITableViewController方法) 一行代碼（一步設(shè)置）搞定tableview的cell高度自適應(yīng),同時適用于單cell和多cell? ? UITableViewController 我使用的比較少，他是繼承 UIViewController的，自帶tableView。更方便的一個VC
- (CGFloat)cellHeightForIndexPath:(NSIndexPath *)indexPath cellContentViewWidth:(CGFloat)width;
@end
@interface NSObject (SDAnyObjectAutoCellHeight)
(NSObject方法)`一行代碼（一步設(shè)置）搞定tableview的cell高度自適應(yīng),同時適用于單cell和多cell
- (CGFloat)cellHeightForIndexPath:(NSIndexPath *)indexPath cellContentViewWidth:(CGFloat)width tableView:(UITableView *)tableView;
示例：UITableViewController中
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return self.modelsArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
Class currentClass = [DemoVC7Cell class];
DemoVC7Cell *cell = nil;
DemoVC7Model *model = self.modelsArray[indexPath.row];
if (model.imagePathsArray.count > 1) {
currentClass = [DemoVC7Cell2 class];
}
cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass(currentClass)];
cell.model = model;
這一步中賦值，cell中的表現(xiàn)為，重寫私有方法 - (void)setModel:(DemoVC7Model *)model即可，不用在定義新的公共方法
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// >>>>>>>>>>>>>>>>>>>>> * cell自適應(yīng)設(shè)置 * >>>>>>>>>>>>>>>>>>>>>>>>
// 只需一行代碼即可實(shí)現(xiàn)單cell以及多cell的tableview高度自適應(yīng)
return [self cellHeightForIndexPath:indexPath cellContentViewWidth:[UIScreen mainScreen].bounds.size.width];
}
cell 中的關(guān)鍵設(shè)置為：
- (void)setup{
_titleLabel = [UILabel new];
[self.contentView addSubview:_titleLabel];
_titleLabel.textColor = [UIColor darkGrayColor];
_titleLabel.font = [UIFont systemFontOfSize:15];
_titleLabel.numberOfLines = 0;
_imageView = [UIImageView new];
[self.contentView addSubview:_imageView];
_imageView.layer.borderColor = [UIColor grayColor].CGColor;
_imageView.layer.borderWidth = 1;
CGFloat margin = 15;
UIView *contentView = self.contentView;
_titleLabel.sd_layout
.leftSpaceToView(contentView, margin)
.topSpaceToView(contentView, margin)
.rightSpaceToView(contentView, 120)
.autoHeightRatio(0);
_imageView.sd_layout
.topEqualToView(_titleLabel)
.leftSpaceToView(_titleLabel, margin)
.rightSpaceToView(contentView, margin)
.heightIs(60);
[self setupAutoHeightWithBottomView:_imageView bottomMargin:margin];這一步是關(guān)鍵`
}
－ ?(void)setModel:(DemoVC7Model *)model
{
_model = model;
_titleLabel.text = model.title;
_imageView.image = [UIImage imageNamed:model.imagePathsArray.firstObject];
}
普通試圖中的自動布局
.widthRatioToView(self.view, _widthRatio);
[self.view updateLayout];
[self.view0 updateLayout];
//刷新試圖達(dá)到自動布局其子試圖的功能`
當(dāng)父試圖的高度沒有定義的時候，需要使用一下方法來自動布局
[self setupAutoHeightWithBottomView:_timeLabel bottomMargin:margin + 5];
//第一個參數(shù)是指 底部試圖，第二個參數(shù)是指底部的留出來的空白區(qū)域的高度。
關(guān)于定義視圖邊界UIEdgeInsets
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right;? // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;
//eg
UIEdgeInsets，由函數(shù) UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right );? ?? 構(gòu)造出，分別表示其中的內(nèi)容/標(biāo)題/圖片離各邊的距離。
對于調(diào)整Label中的字體布局只能通過重寫系統(tǒng)的 -(void) drawTextInRect: (CGRect) rect; 方法，來達(dá)到在畫? Label 的文本時分別設(shè)置文本與? Label 四個邊的間隙，即畫在 Label 內(nèi)的一個小矩形內(nèi)，提供自己的 UIEdgeInsets 屬性。
其實(shí)對于 UITextField 還有更好的實(shí)現(xiàn)辦法， 可以直接設(shè)置 leftView 或 rightView, 然后文本輸入?yún)^(qū)域就在 leftView 和 rightView 之間了
使用UIEdgeInsets 拉抻圖片時遇到的問題
開始我設(shè)置參數(shù){20,10,10,10}，在圖上的位置大致
很奇怪是不是，為什么出現(xiàn)了兩個箭頭（紅色部分是設(shè)置的背景色用語區(qū)分）？再回頭看下文檔，才恍然大悟：
拉升的時候，是按前文說的兩個方向來拉升
拉升的部分，是以tiled方式，簡單的說就是以鏡像的方式
按照1的規(guī)則，拉升的時候，水平和垂直方向都需要拉升。這樣在水平拉升的時候，箭頭其實(shí)處于拉升的部分。而拉升的時候，先按照原有的尺寸添加進(jìn)去，不足的地方再把中間不拉升的部分填充進(jìn)去，周而復(fù)始，直到填充完畢。因此，就有上面的現(xiàn)象了。
要達(dá)到需要的效果，必須按照如下的設(shè)置：
cell中 當(dāng)把控件添加到 self.contentView 時，使用Layout布局，會無效，直接添加到? self （cell）上即可，若是修改cell的背景顏色，可以通過修改? self.contentView 的背景色來達(dá)到。。
使用的時候，遇到圓角的問題，headHeadImageV.layer.cornerRadius=40;是不會起作用的。
headHeadImageV.sd_cornerRadiusFromHeightRatio=@(0.5); 即可在Layout的情況下圓角化。
iOS關(guān)于UI布局的知識還有很多，至此我列舉了一些需要注意的地方，使用的時候是先初始化`new`比較方便，先加載到父視圖上后設(shè)置相關(guān)的屬性，然后再進(jìn)行布局方面的設(shè)置，若后加到父試圖上，會設(shè)置無效或者是默認(rèn)的布置設(shè)置。
文／流年逝金（簡書作者）
原文鏈接：http://www.lxweimin.com/p/22a1be03cec7
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，并標(biāo)注“簡書作者”。
