autolayout 從精通到忘記

1吸耿、autolayout的計算公式:

firstItem.firstAttribute(R)SecondItem.secondAttribute*m+b;R:relations:Multiplierb:Constant


autolayout從這里開始

2、優(yōu)先級

Hugging priority 確定view有多大的優(yōu)先級阻止自己變大酷窥。
Compression Resistance priority確定有多大的優(yōu)先級阻止自己變小咽安。
tip1:
content Hugging就是要維持當前view在它的optimal size(intrinsic content size),可以想象成給view添加了一個額外的width constraint蓬推,此constraint試圖保持view的size不讓其變大:
view.width <= optimal sizecontent Hugging默認為250.
tip2:
Content Compression Resistance就是要維持當前view在他的optimal size(intrinsic content size)妆棒,可以想象成給view添加了一個額外的width constraint,此constraint試圖保持view的size不讓其變蟹蟹:
view.width >= optimal sizeContent Compression Resistance默認優(yōu)先級為750.

52111B78-BDAE-47FF-8C97-323F3D03F378.png

3糕珊、AutoLayout 與 UIScrollView的相遇

a、首先給scrollview加上高和上左右的約束

A4261C50-85F8-4D3A-988D-FAF907DB2B53.png

b毅糟、再給image加上高和上左右的約束红选,放在scrollview中

346A475C-298F-4B1A-A08F-2B4982776725.png

但是有問題?
問題的原因:
我們知道UIScrollView最重要的就是其contentSize的寬高了姆另,如果這個無法確定喇肋,那scrollview就無法知曉可以滾動查看的區(qū)域。其實這僅僅是表象迹辐,IB不會因為contentSize的可見區(qū)域不確定而抱怨蝶防,因為它會有一個默認的可見區(qū)域就是其bounds,其實IB真正抱怨的是其內(nèi)部的subViews的布局對于它的依賴,比如我們看image相對于上明吩、左间学、右的約束都相對于scrollview的。scrollview內(nèi)部的subViews的約束全依賴于scrollview,這樣子的話印荔,問題就來了低葫,Scrollview和image一樣都會根據(jù)內(nèi)容調(diào)整其contentSize(autolayout布局模式中,image這種控件都會根據(jù)內(nèi)容對自身寬高進行調(diào)整),如果Scrollview要根據(jù)其subviews來調(diào)整自身的contentsize,而其subviews又要根據(jù)scrollview的contentsize調(diào)整自身的布局仍律,是不是就矛盾了氮采,就成了相互依賴了。
所以IB要求UIScrollview(當然包括繼承于它的UITableview染苛、UIWebview這些控件)的contentSize必須在布局時能夠確定鹊漠。
解決方法:
1主到、創(chuàng)建一個空白的UIViewController
2、將UIScrollView添加到UIView控件中躯概,并設置UIScrollView針對父視圖UIView的constraints(Leading/trailling/top/bottom = 0 || Leading/trailling/top= 0 + height=X )
3登钥、最主要的來了,添加UIView控件到UIScrollView中娶靡。牧牢。
(1)并改名為ContentView....(UIScrollView主要是靠子視圖來實現(xiàn)autolayout的高度和寬度的計算)
(2)然后設置ContentView的針對父視圖UIScrollView的 constraints
1、Leading/trailling/top= 0
2姿锭、bottom = 1
3塔鳍、equal height / equal width (ContentView的高度和寬度 與 UIScrollView相等)
4、設置equal height的優(yōu)先級 priority 小于 剛才設置的bottom的優(yōu)先級(該bottom的是ContentView針對UIScrollView的constraints),這里設置priority=999.

4FDF30CE-0318-4E1B-834F-92A80DE88CAB.png

這里需要注意
第一:為什么 bottom =1 而不是 bottom = 0呻此。在實際開發(fā)中轮纫,如果為0,并且ContentView中的內(nèi)容高度不超過屏幕的高度時焚鲜,uiscrollview不能下上拉動掌唾。
第二:要實現(xiàn)ContentView 的高度自適應為uiscrollview的contentSize的高度,需要ContentView中的子視圖有明確的top與bottom忿磅,用來讓autolayout計算出ContentView的實際高度.
第三:為什么要設置equal height 的優(yōu)先級糯彬。。葱她。我們來寫個公式更容易理解
因為scrollview.height = uiview.height
又因為ContentView.height = scrollview.height - 1
所以ContentView.height != scrollView.height
也就是不能實現(xiàn)equal height 這個constraints撩扒。。會報錯吨些。
只要調(diào)整一下優(yōu)先級就可以解決這個問題,出現(xiàn)沖突却舀,優(yōu)先適應ContentView的高度....現(xiàn)在你可以在ContentView上添加你想添加的控件,但記住如果你要添加的控件已經(jīng)超出了屏幕的高度锤灿,你需要給ContentView里面的子控件加上bottom 和 top(不超過你也可以添加),這樣autolayout才能計算出ContentView的高度挽拔,并將這個高度賦給UIScrollView的ContentSize,實現(xiàn)自適應高度。還需要注意一點就是如果最下面的控件已經(jīng)超出界面外了但校,那么在添加bottom to ContentView的這個約束時螃诅,XCode默認是-xxx的,這個時候如果在模擬器上運行的話状囱,可以看到還是滑動不到最下面去术裸。所以要把這個約束值改為0或者大于0.
tip
如果代碼中設置了self.automaticallyAdjustsScrollViewInsets = NO;,那么則需要把ContentView中的最下面的控件的bottom to ContentView 約束+44.導航欄的高度亭枷。ContentView中如果使用UILabel袭艺,要給uilabel明確的height constraint,這樣auto layout才能計算出高度。

4叨粘、遇到過的小挫折

需求描述
首先這個頁面已經(jīng)布好局噠猾编。有一個scrollview瘤睹,scrollview里面有一個contentview,都已經(jīng)布局好噠答倡。
然后要往里面增加一個bannner轰传,這個banner距l(xiāng)astlabel為20,距superview的bottom是10瘪撇。
最后這個banner表示不是常駐居民获茬,要求出現(xiàn)時如果屏幕顯示不全求滾動,不出現(xiàn)時如果屏幕顯示完全不滾動倔既。
解決思路描述
鄙人思路一:直接把banner丟ContentView里面恕曲。
鄙人否決一:由于頁面的ContentView是與屏幕等heigh的,所以當加入banner后ContentView里面的子控件的高度和大于屏幕的高度就報錯渤涌。

16B5EFF9-F9D9-4497-87DC-B324A7D8B0EE.png

鄙人思路二:根據(jù)思路一直接把banner的height設為0佩谣,IB就不會報錯啦,再在運行時把banner的height設為X歼捏。
鄙人否決二:于是乎,如圖所示笨篷,ContentView為了不讓它所以子控件的高度和超過自己的預定高度瞳秽,ContentView把banner壓扁了。率翅。练俐。。

D57571D4-4F09-411A-B63B-A6B8C26FDC4F.png

在經(jīng)過幾番思想的掙扎之后冕臭,終于尋找到了解決之道腺晾,GOOD!
鄙人思路:直接把banner丟scrollview里面辜贵,讓banner與ContentView并排悯蝉。
鄙人解析:scrollview.contentView.height = contentView.height + bannner.height。所以只要contentView.height與bannner.height是實值IB就不會有問題啦托慨。

1480670130072.png

此處有演示小demo
https://github.com/HFavour/ShowTest.git
demo中有兩個小拓展鼻由。

1480909021745.png

俗話說,正在精通的技術已經(jīng)融化在思維中厚棵。蕉世。
所以。婆硬。狠轻。
后來。彬犯。向楼。查吊。我仿佛只記住了那一個公式。蜜自。菩貌。

最后,附上本文的參考鏈接:
http://www.reibang.com/p/f3c0f040c07a
http://www.reibang.com/p/25ddadddae06
http://www.reibang.com/p/248c5ed719ec

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末重荠,一起剝皮案震驚了整個濱河市箭阶,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌戈鲁,老刑警劉巖仇参,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異婆殿,居然都是意外死亡诈乒,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進店門婆芦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來怕磨,“玉大人,你說我怎么就攤上這事消约〕辏” “怎么了?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵或粮,是天一觀的道長导饲。 經(jīng)常有香客問我,道長氯材,這世上最難降的妖魔是什么渣锦? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮氢哮,結(jié)果婚禮上袋毙,老公的妹妹穿的比我還像新娘。我一直安慰自己冗尤,他們只是感情好娄猫,可當我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著生闲,像睡著了一般媳溺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碍讯,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天悬蔽,我揣著相機與錄音,去河邊找鬼捉兴。 笑死蝎困,一個胖子當著我的面吹牛录语,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播禾乘,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼澎埠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了始藕?” 一聲冷哼從身側(cè)響起蒲稳,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎伍派,沒想到半個月后江耀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡诉植,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年祥国,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晾腔。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡舌稀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出灼擂,到底是詐尸還是另有隱情壁查,我是刑警寧澤,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布缤至,位于F島的核電站潮罪,受9級特大地震影響康谆,放射性物質(zhì)發(fā)生泄漏领斥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一沃暗、第九天 我趴在偏房一處隱蔽的房頂上張望月洛。 院中可真熱鬧,春花似錦孽锥、人聲如沸嚼黔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唬涧。三九已至,卻和暖如春盛撑,著一層夾襖步出監(jiān)牢的瞬間碎节,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工抵卫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留狮荔,地道東北人胎撇。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像殖氏,于是被迫代替她去往敵國和親晚树。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2 355

推薦閱讀更多精彩內(nèi)容