淺匯-iOS UI布局

,wan m

? 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。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,461評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,538評論 3 417
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,423評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,991評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,761評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,207評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,268評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,419評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,959評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,653評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,901評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,678評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,978評論 2 374

推薦閱讀更多精彩內容

  • Frame 使用Frame 來布局UI是開始的做法,現在也有很多人仍然鐘情與這種方法,這種方法很直觀,使用起來也很...
    poo_om閱讀 346評論 0 0
  • 概述在iOS開發中UITableView可以說是使用最廣泛的控件,我們平時使用的軟件中到處都可以看到它的影子,類似...
    liudhkk閱讀 9,081評論 3 38
  • 代碼創建UIWindow對象 Xcode7之后使用代碼創建UIWindow對象: //創建UIWindow對象 s...
    云之君兮鵬閱讀 1,344評論 0 2
  • 一時沖動,便來了一次說走就走的旅行。帶著悲傷的心情,輕而易舉地就踏上了南下的火車,路過了山東濟南、江蘇南京,最后到...
    Fiocca閱讀 435評論 0 1
  • 朋友來到寢室,突然哭了。最近太多倒霉的事發生在她身上,覺得委屈和難過。其實就是這樣的,人倒霉起來,喝口水都塞牙縫,...
    WZDaisy閱讀 278評論 0 0