? iOS中UI的布局是很重要的告抄，而在前期開發(fā)中就要選定好布局的方法，因為這對整個工程乃至于后期的版本維護(hù)都有很重要的影響昆庇。本文從比較老的Frame到新生AutoLayout都進(jìn)行了淺顯的總結(jié)嘲更，希望對大家的UI布局學(xué)習(xí)有所幫助
Frame
父試圖是使用的AutoLayout ?，如果子試圖的Frame ?＝ supeView.Frame ?就會無法獲得足夠的寬度潘拱。如果父試圖使用的是 Frame? 疹鳄， 子試圖使用 AutoLayout ?不會有問題，
使用Frame 來布局UI是開始的做法芦岂，現(xiàn)在也有很多人仍然鐘情與這種方法瘪弓，這種方法很直觀，使用起來也很簡單禽最，但是他的簡單決定了他在屏幕適配和內(nèi)容自適應(yīng)上的局限性（橫豎屏?xí)r不設(shè)置的話無法使用,因為橫屏的時候腺怯，之前設(shè)置的Frame屬性 還是豎屏的Frame）`，當(dāng)然可以使用Fram的方法達(dá)到屏幕適配和自動布局川无，但是中間的過程是復(fù)雜而且工作量巨大的呛占，寫起來也是痛苦的。通常使用這種方法布局是通過比例放縮來達(dá)到的懦趋，比如使用如下的宏來替換掉系統(tǒng)的CGRectMake(x , y , width , height) 布局來達(dá)到屏幕適配的效果晾虑。
#define NEWX? ? ? ? ? ? ? ? ? ? ? ? [UIScreen mainScreen].bounds.size.width/384 ??
#define NEWY ? ? ? ? ? ? ? ? ? ? ? ? [UIScreen mainScreen].bounds.size.height/512#define NEWY ? ? ? ? ? ? ? ? ? ? ? ?NEWX
#define RECT(a,b,c,d)? ? ? ? ? ? CGRectMake(a*NEWX, b, c*NEWX, d)?
這里我們以寬度縮放比為整體縮放比，就可以完美適配更種機(jī)型，不管蘋果以后出什么機(jī)型走贪，這樣設(shè)置后就可以保證在各種機(jī)型的屏幕上不出現(xiàn)變形的情況（尤其是iphoneX這樣修長的機(jī)型上）佛猛。
但是因為系統(tǒng)的layoutSubviews 方法是默認(rèn)不執(zhí)行任何布局的，需要使用者在頁面內(nèi)容確定后再次對空間的Frame進(jìn)行重置坠狡，牽一發(fā)而動全身的重置是痛苦而繁瑣的继找。
AutoLayout（動畫中使用是個弱點(diǎn)）
? ? ?使用SDAutoLayout ?不光是為了橫豎屏的適配（通過判斷屏幕方向，重置 Frame ?也可以做到）逃沿，是為了TablevIew中cell ?因為內(nèi)容的不同而動態(tài)完美布局的效果婴渡。使用了這么久，
? ? ? 對于父試圖是 ?Button ／ UITextFeild等非UIView的直接子類凯亮，布局其子視圖時边臼，這里面的約束是不生效的。而且同層級的試圖 ?無法達(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)
SDAutoLayout
主要的功能是：
1、實(shí)現(xiàn)Label高度固定惰瓜，寬度自適應(yīng)（超出后不顯示）否副，寬度固定，高度自適應(yīng)崎坊。
2备禀、實(shí)現(xiàn)了UIView內(nèi)子視圖的自動布局；
3奈揍、實(shí)現(xiàn)了UIScrollView內(nèi)容高度根據(jù)內(nèi)部子視圖的內(nèi)容高度動態(tài)設(shè)置曲尸；
4、實(shí)現(xiàn)了一個UITableView有多個不同Cell的時候男翰，所有cell高度自適應(yīng)另患；
【1】實(shí)現(xiàn)Label高度固定，寬度自適應(yīng)（超出后不顯示）蛾绎，寬度固定昆箕，高度自適應(yīng)。??
/** 設(shè)置單行文本label寬度自適應(yīng)租冠，超出了這個最大寬度則不顯示鹏倘，否則會根據(jù)文字多少自動調(diào)整寬度 */?
- (void)setSingleLineAutoResizeWithMaxWidth:(CGFloat)maxWidth;
?/** 自適應(yīng)高度，傳入高寬比值肺稀，label可以傳0實(shí)現(xiàn)文字高度自適應(yīng) */
? @property (nonatomic, copy, readonly) AutoHeight autoHeightRatio;??
【2】? ?當(dāng)父試圖的高度沒有定義的時候第股，需要使用一下方法來自動布局应民，并且這個時候不可以再以父試圖的底為標(biāo)準(zhǔn)來設(shè)置其內(nèi)部子視圖话原，這是一種【從里到外】的布局思路，cell的自適應(yīng)高度也是這種思路诲锹；平時我們的思路都是一種【從外到里】的思路繁仁，先確定外面的再使其自動布局里面的。
有一個需要注意的地方归园，cell中所有的子視圖都需要加載在?self.contentView上才行黄虱，不可加載在self.contentView的子視圖上，否則按下面的這個方法設(shè)置也會出問題庸诱。
[self setupAutoHeightWithBottomView:_timeLabel bottomMargin:margin + 5];//第一個參數(shù)是指 底部試圖捻浦，第二個參數(shù)是指底部的留出來的空白區(qū)域的高度。
【3】實(shí)現(xiàn)了UIScrollView可滾動高度根據(jù)內(nèi)部子視圖的內(nèi)容高度動態(tài)設(shè)置
/** 設(shè)置scrollview內(nèi)容自適應(yīng)桥爽，第一個參數(shù)為作為底部的子視圖朱灿，第二個參數(shù)為到sc底部的間距。 */
- (void)setupAutoContentSizeWithBottomView:(UIView *)bottomView bottomMargin:(CGFloat)bottomMargin;
【4】這面這一個協(xié)議中設(shè)置即可钠四，關(guān)鍵是cell中的設(shè)置盗扒，cell中的設(shè)置需要滿足兩點(diǎn)：第一個是子視圖的相對位置關(guān)系的設(shè)置，第二個是設(shè)置[self setupAutoHeightWithBottomView:_view3 bottomMargin:10]即可，這個方法在 子視圖初始化的最后設(shè)置可以在 Model賦值后設(shè)置也可以
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath ? ?{
? ? ? ?/* model 為模型實(shí)例侣灶， keyPath 為 model 的屬性名甸祭，通過 kvc 統(tǒng)一賦值接口 */
? return [self cellHeightForIndexPath:indexPath cellContentViewWidth:[UIScreen mainScreen].bounds.size.width tableView:tableView];
? ?}
使用SDAutoLayout來布局UIImageView的時候，遇到圓角的問題褥影，headHeadImageV.layer.cornerRadius=40;是不會起作用的池户。
UIImageView *imageV = [UIImageView new]; [self.view addSubview:imageV]; imageV.image = [UIImage imageNamed:@"loginLogo"]; imageV.sd_layout.leftSpaceToView(self.view,20).topSpaceToView(self.view,80).widthIs(80).heightIs(80);
?[imageV setSd_cornerRadius:@40];
方法名中帶有“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)));
.topSpaceToView(leftView,Scale_Y((yValue+60*i+3))),
注意：,Scale_Y((yValue+60*i+3))當(dāng)內(nèi)層參數(shù)是組合參數(shù)時，需要雙層（）坛缕，否則無法把組合參數(shù)作為一個整體墓猎，從而在屏幕尺寸適配上出問題。而且要先加載到父試圖上才能使用 layout 語句赚楚，否則約束不回起作用（針對 SDAutoLayout）毙沾。
動畫中試圖的自動布局刷新（SDAutoLayout在動畫中并不友好）
[UIView animateWithDuration:0.8 animations:^{
self.view0.sd_layout .widthRatioToView(self.view, _widthRatio);
[self.view layoutSubviews];
[self.view0 layoutSubviews];
}];
//刷新試圖達(dá)到自動布局其子試圖的功能`
在相對布局中某個試圖自己修改了自己的高度，如何更新SC的 ContentSize宠页？
? ? [selectSevenV updateLayout];
? ? [self.sc setContentSize:CGSizeMake(WIDTH, selectSevenV.frame.origin.y+selectSevenV.frame.size.height)];
這里中?selectSevenV 是眾多相對布局的試圖中的底部的那一個左胞，中間的某個試圖通過?self.sd_layout.heightIs(Scale_Y(467)); 修改了自身的高度，此時想更改父試圖（sc 的 ContentSize）調(diào)用上面兩個語句即可举户。
一個問題
在一個自定義控件中使用 bounds或者 Frame 設(shè)置寬高后烤宙，使用?sd_layout.heightIs 改變 高度無法奏效，只能繼續(xù)使用setBounds: 來修改了俭嘁。而且通過?subV.height? 也獲取不到該自定義控件的高度躺枕，只能通過?subV.frame.size.height 的方式獲取到。
? ? ?????// baseItem[6].sd_layout.heightIs(0.1);
? ? ? ? ? [baseItem[6] setBounds:CGRectMake(0, 0, 0, 0.1)];? ? ? ? ? ? ? ?
????????//subV.height? ? ?
????????subV.frame.size.height;
但是值得注意的是供填，有時候可以使用 sd_layout.heightIs 改變視圖的高拐云，但是有時候又不可以，但是通過 setBounds 是一定可以改變視圖的高度的近她。
關(guān)于位置叉瘩，有時候使用 setFranme 可以修改位置，但是有時候又不行泄私，此時 使用?sd_layout.topSpaceToView 卻可以房揭，有時候又不可以备闲。
所以，最后總結(jié)一句話捅暴，?setFranme? 恬砂、setBounds 和??sd_layout 其中之一不行的時候就試試另外一種方式，兩種方式都試試蓬痒。
小結(jié)
?iOS關(guān)于UI布局的知識還有很多泻骤，至此我列舉了一些需要注意的地方，使用的時候是先初始化`new`比較方便梧奢，先加載到父視圖上后設(shè)置相關(guān)的屬性狱掂，然后再進(jìn)行布局方面的設(shè)置，若后加到父試圖上亲轨，會設(shè)置無效或者是默認(rèn)的布置設(shè)置趋惨。
? ?所以當(dāng)我們要創(chuàng)造一個待加載的試圖（只是創(chuàng)建，而不加載）就無法使用SDLayout? 來布局了惦蚊，就只能使用Frame來布局了器虾。否則里面的子試圖會布局的很亂。這大概就是SDLayout 的使用禁區(qū)了蹦锋，SDLayout需要先加載到父視圖上才有效果兆沙。
使用 NEWX、NEWY 做寬高比例放縮 莉掂，加上 SDLayout的相對布局就實(shí)現(xiàn)了所謂的完美適配葛圃。
SDAutoLayout 可以完美解決頁面高度自適應(yīng)的問題，從此子試圖文本根據(jù)內(nèi)容自動換行憎妙，頁面自動布局不再是惡心的事库正。不光適用于cell的高度自適應(yīng)，而是所有的視圖尚氛，包括 SC诀诊。
