? iOS中UI的布局是很重要的,而在前期開發中就要選定好布局的方法,因為這對整個工程乃至于后期的版本維護都有很重要的影響。本文從比較老的Frame到新生AutoLayout都進行了淺顯的總結,希望對大家的UI布局學習有所幫助
Frame
父試圖是使用的AutoLayout ?,如果子試圖的Frame ?= supeView.Frame ?就會無法獲得足夠的寬度。如果父試圖使用的是 Frame? , 子試圖使用 AutoLayout ?不會有問題,
使用Frame 來布局UI是開始的做法,現在也有很多人仍然鐘情與這種方法,這種方法很直觀,使用起來也很簡單,但是他的簡單決定了他在屏幕適配和內容自適應上的局限性(橫豎屏時不設置的話無法使用,因為橫屏的時候,之前設置的Frame屬性 還是豎屏的Frame)`,當然可以使用Fram的方法達到屏幕適配和自動布局,但是中間的過程是復雜而且工作量巨大的,寫起來也是痛苦的。通常使用這種方法布局是通過比例放縮來達到的,比如使用如下的宏來替換掉系統的CGRectMake(x , y , width , height) 布局來達到屏幕適配的效果。
#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)?
這里我們以寬度縮放比為整體縮放比,就可以完美適配更種機型,不管蘋果以后出什么機型,這樣設置后就可以保證在各種機型的屏幕上不出現變形的情況(尤其是iphoneX這樣修長的機型上)。
但是因為系統的layoutSubviews 方法是默認不執行任何布局的,需要使用者在頁面內容確定后再次對空間的Frame進行重置,牽一發而動全身的重置是痛苦而繁瑣的。
AutoLayout(動畫中使用是個弱點)
? ? ?使用SDAutoLayout ?不光是為了橫豎屏的適配(通過判斷屏幕方向,重置 Frame ?也可以做到),是為了TablevIew中cell ?因為內容的不同而動態完美布局的效果。使用了這么久,
? ? ? 對于父試圖是 ?Button / UITextFeild等非UIView的直接子類,布局其子視圖時,這里面的約束是不生效的。而且同層級的試圖 ?無法達到重合布局,兩個試圖重合的話只有是 ?父/子視圖的關系。
Autolayout簡單來說就是一套 `適配iPhone機型`并且`兼容橫豎屏`的UI布局系統,Auto Layout 是一個系統,可以讓你通過創建元素之間關系的數學描述來布局應用程序的用戶界面,是一種基于約束的,描述性的布局系統。這中頁面布局方式的思維模式跟Frame完全不同,使用時應跳出Frame的坐標布局思維模式,站在關系依賴布局的思維方式上才可以達到嫻熟正確的使用。
我們可以在XIB、StoryBoard中通過拉線的形式給控件視圖添加布局約束,通過蘋果強大的可視化界 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四個基本屬性。就相當于以上那復雜的代碼就要最少寫四次。
所以對IOS的AutoLayout進行封裝就顯得很有必要了。本次推薦使用的是一個第三方的AutoLayout庫這個庫實現了對普通空間的自動布局,也實現了對ScrollView及UITableView的自動布局,操作簡單,功能強大(SDAutoLayout)
SDAutoLayout
主要的功能是:
1、實現Label高度固定,寬度自適應(超出后不顯示),寬度固定,高度自適應。
2、實現了UIView內子視圖的自動布局;
3、實現了UIScrollView內容高度根據內部子視圖的內容高度動態設置;
4、實現了一個UITableView有多個不同Cell的時候,所有cell高度自適應;
【1】實現Label高度固定,寬度自適應(超出后不顯示),寬度固定,高度自適應。??
/** 設置單行文本label寬度自適應,超出了這個最大寬度則不顯示,否則會根據文字多少自動調整寬度 */?
- (void)setSingleLineAutoResizeWithMaxWidth:(CGFloat)maxWidth;
?/** 自適應高度,傳入高寬比值,label可以傳0實現文字高度自適應 */
? @property (nonatomic, copy, readonly) AutoHeight autoHeightRatio;??
【2】? ?當父試圖的高度沒有定義的時候,需要使用一下方法來自動布局,并且這個時候不可以再以父試圖的底為標準來設置其內部子視圖,這是一種【從里到外】的布局思路,cell的自適應高度也是這種思路;平時我們的思路都是一種【從外到里】的思路,先確定外面的再使其自動布局里面的。
有一個需要注意的地方,cell中所有的子視圖都需要加載在?self.contentView上才行,不可加載在self.contentView的子視圖上,否則按下面的這個方法設置也會出問題。
[self setupAutoHeightWithBottomView:_timeLabel bottomMargin:margin + 5];//第一個參數是指 底部試圖,第二個參數是指底部的留出來的空白區域的高度。
【3】實現了UIScrollView可滾動高度根據內部子視圖的內容高度動態設置
/** 設置scrollview內容自適應,第一個參數為作為底部的子視圖,第二個參數為到sc底部的間距。 */
- (void)setupAutoContentSizeWithBottomView:(UIView *)bottomView bottomMargin:(CGFloat)bottomMargin;
【4】這面這一個協議中設置即可,關鍵是cell中的設置,cell中的設置需要滿足兩點:第一個是子視圖的相對位置關系的設置,第二個是設置[self setupAutoHeightWithBottomView:_view3 bottomMargin:10]即可,這個方法在 子視圖初始化的最后設置可以在 Model賦值后設置也可以
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath ? ?{
? ? ? ?/* model 為模型實例, keyPath 為 model 的屬性名,通過 kvc 統一賦值接口 */
? 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個參數:(UIView)參照view 和 (CGFloat)間距數值? `當這個參照View是他的父試圖時,leftSpaceToView就表示當前這個試圖的左邊到父試圖左邊的距離,當這個試圖是同一層級的參照的話,就表示當前試圖的左邊到參照試圖右邊的距離,依次類推,傳入的這個CGFloat值需要是一起的值才行,如果這個值是組合值的話就要加()如:leftSpaceToView(self.sc,(passWordBgView.width+5))。各種設置彼此之間是彼此獨立的,后面的設置效果會覆蓋前面設置的效果。考慮到完美適配的問題 ?引入一下兩個宏:
#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))當內層參數是組合參數時,需要雙層(),否則無法把組合參數作為一個整體,從而在屏幕尺寸適配上出問題。而且要先加載到父試圖上才能使用 layout 語句,否則約束不回起作用(針對 SDAutoLayout)。
動畫中試圖的自動布局刷新(SDAutoLayout在動畫中并不友好)
[UIView animateWithDuration:0.8 animations:^{
self.view0.sd_layout .widthRatioToView(self.view, _widthRatio);
[self.view layoutSubviews];
[self.view0 layoutSubviews];
}];
//刷新試圖達到自動布局其子試圖的功能`
在相對布局中某個試圖自己修改了自己的高度,如何更新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)調用上面兩個語句即可。
一個問題
在一個自定義控件中使用 bounds或者 Frame 設置寬高后,使用?sd_layout.heightIs 改變 高度無法奏效,只能繼續使用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 是一定可以改變視圖的高度的。
關于位置,有時候使用 setFranme 可以修改位置,但是有時候又不行,此時 使用?sd_layout.topSpaceToView 卻可以,有時候又不可以。
所以,最后總結一句話,?setFranme? 、setBounds 和??sd_layout 其中之一不行的時候就試試另外一種方式,兩種方式都試試。
小結
?iOS關于UI布局的知識還有很多,至此我列舉了一些需要注意的地方,使用的時候是先初始化`new`比較方便,先加載到父視圖上后設置相關的屬性,然后再進行布局方面的設置,若后加到父試圖上,會設置無效或者是默認的布置設置。
? ?所以當我們要創造一個待加載的試圖(只是創建,而不加載)就無法使用SDLayout? 來布局了,就只能使用Frame來布局了。否則里面的子試圖會布局的很亂。這大概就是SDLayout 的使用禁區了,SDLayout需要先加載到父視圖上才有效果。
使用 NEWX、NEWY 做寬高比例放縮 ,加上 SDLayout的相對布局就實現了所謂的完美適配。
SDAutoLayout 可以完美解決頁面高度自適應的問題,從此子試圖文本根據內容自動換行,頁面自動布局不再是惡心的事。不光適用于cell的高度自適應,而是所有的視圖,包括 SC。