使用Auto Layout實(shí)現(xiàn)和適配不等高復(fù)合型cell

前言

春節(jié)快到了凉夯,挺久沒(méi)回家的,在帝都離回家的日子也越來(lái)越近采幌,反而覺(jué)得有些恐慌劲够,年前最后一篇了,寫(xiě)點(diǎn)關(guān)于cell屏幕適配的技巧吧休傍,希望能給大家?guī)?lái)點(diǎn)幫助征绎,這篇大都是操作性的,我盡可能截一些圖理解磨取,大家觀(guān)看的時(shí)候耐心加載圖片人柿,OK,廢話(huà)不多少說(shuō)忙厌,下面開(kāi)始凫岖。

正文

現(xiàn)在實(shí)踐中慢慢盡可能少的代碼去實(shí)現(xiàn)UI部分,大都使用IB去操作逢净,之前實(shí)現(xiàn)一些高度不統(tǒng)一cell哥放,而且可能某些控件隱藏或者顯示,都是拿到數(shù)據(jù)源通過(guò)代碼去計(jì)算每行cell的高度爹土,也比較耗費(fèi)時(shí)間甥雕,接下來(lái)就聊聊我是怎么用Auto Layout去實(shí)現(xiàn)的。


cell.png

上面舉個(gè)簡(jiǎn)單例子胀茵,cell內(nèi)部只有兩個(gè)控件社露,一個(gè)ImageView和Label,說(shuō)下需求:

  • 假設(shè)UI給的效果圖是6p的琼娘,圖片在6p上是100*100的峭弟,在別的屏幕按比例縮放。
  • label的字?jǐn)?shù)不固定脱拼。
  • label可能顯示或隱藏瞒瘸,cell需要根據(jù)label的顯示和隱藏去適應(yīng)高度。

先來(lái)一步步來(lái)實(shí)現(xiàn)上面三個(gè)需求....

一挪拟、子控件根據(jù)父控件比例縮放

1挨务、先在xib中拖出上面兩個(gè)控件击你,選中圖片玉组,設(shè)置距離cell上面和左邊的邊距都為10谎柄,圖片的x和y已經(jīng)確定了,這里就不上圖了惯雳,大家應(yīng)該知道朝巫。
2、為了圖片不變形石景,先設(shè)置圖片相對(duì)自身的寬高比劈猿,選中圖片,往自身拖出約束潮孽,選擇Aspect Ratio


Snip20160131_16.png

Snip20160131_14.png

再選中剛剛添加的約束揪荣,在右邊欄按圖編輯好對(duì)應(yīng)寬高比,這里設(shè)置寬高1:1往史。


Snip20160131_7.png

3仗颈、接下來(lái)是按屏幕寬度縮放,選中圖片拖向它所在的父控件椎例,這里的父控件就是contentView挨决,同樣選擇Aspect Ratio。

選中約束還是在右邊欄去編輯好订歪,如下圖脖祈,這里是相對(duì)6p的效果圖,所以設(shè)置100:414刷晋,需求的第一步已經(jīng)完成了盖高。
Snip20160131_17.png
二、Label內(nèi)容自適應(yīng)

1眼虱、還是先設(shè)置Label上部距離圖片底部邊距以及距離父控件左或舞、右側(cè)邊距,這三個(gè)約束已經(jīng)給定label內(nèi)容顯示的最大寬度蒙幻。
2映凳、很重要的一步,選中l(wèi)abel在上面欄點(diǎn)擊Editor邮破,選中Size to Fit Content诈豌,或者使用快捷鍵com = ,意味著label的尺寸根據(jù)它的內(nèi)容去適應(yīng)抒和,根據(jù)你上一步給定的那個(gè)寬度去折行矫渔,同時(shí)記得label的行數(shù)設(shè)置為0。


Snip20160131_18.png

3摧莽、很顯然現(xiàn)在運(yùn)行cell的高度是不會(huì)根據(jù)內(nèi)容適應(yīng)高度的庙洼,再label添加一個(gè)下面距離父控件的約束,這里也是設(shè)為10的邊距,現(xiàn)在
cell的高度 = 圖片的上邊距 + 圖片高度 + 文字和圖片邊距 + 文字高度 + 文字下面距離父控件邊距油够,是不是有些像我們平時(shí)使用Auto Layout設(shè)置scrollView的約束蚁袭,你可以這么理解,父控件的內(nèi)容根據(jù)子控件去撐滿(mǎn)石咬。


Snip20160131_19.png

最后還需要一行代碼揩悄,也是最關(guān)鍵的一步,設(shè)置tableView的estimatedRowHeight鬼悠,顧名思義就是預(yù)設(shè)的行高删性,你可以隨意設(shè)置一個(gè)值,當(dāng)cell滑動(dòng)時(shí)會(huì)去計(jì)算出真實(shí)的行高焕窝,這樣前兩個(gè)需求就做完了蹬挺,Auto Layout已經(jīng)幫我們計(jì)算好了行高,是不是很方便才寫(xiě)了一行代碼它掂,比較遺憾的事這個(gè)方法適用比較簡(jiǎn)單的cell汗侵,復(fù)雜的用此方法可能會(huì)有卡頓問(wèn)題,所以根據(jù)復(fù)雜程度使用群发。
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    self.example1TableView.estimatedRowHeight = 100;
}

三晰韵、設(shè)置約束優(yōu)先級(jí)

先簡(jiǎn)單介紹一下約束優(yōu)先級(jí),具有優(yōu)先級(jí)1000(UILayoutPriorityRequired)的約束為強(qiáng)制約束(Required Constraint)熟妓,也就是必須要滿(mǎn)足的約束雪猪;優(yōu)先級(jí)小于1000的約束為可選約束(Optional Constraint)。默認(rèn)創(chuàng)建的是強(qiáng)制約束起愈。它分為
高優(yōu)先級(jí):UILayoutPriorityDefaultHigh只恨,
低優(yōu)先級(jí):UILayoutPriorityDefaultLow,
內(nèi)置的最低優(yōu)先級(jí):UILayoutPriorityFittingSizeLevel

typedef float UILayoutPriority;
static const UILayoutPriority UILayoutPriorityRequired NS_AVAILABLE_IOS(6_0) = 1000; // A required constraint.  Do not exceed this.
static const UILayoutPriority UILayoutPriorityDefaultHigh NS_AVAILABLE_IOS(6_0) = 750; // This is the priority level with which a button resists compressing its content.
static const UILayoutPriority UILayoutPriorityDefaultLow NS_AVAILABLE_IOS(6_0) = 250; // This is the priority level at which a button hugs its contents horizontally.
static const UILayoutPriority UILayoutPriorityFittingSizeLevel NS_AVAILABLE_IOS(6_0) = 50; // When you send -[UIView systemLayoutSizeFittingSize:], the size fitting most closely to the target size (the argument) is computed.  UILayoutPriorityFittingSizeLevel is the priority level with which the view wants to conform to the target size in that computation.  It's quite low.  It is generally not appropriate to make a constraint at exactly this priority.  You want to be higher or lower.

現(xiàn)在我們想當(dāng)label隱藏時(shí)圖片距離cell的底部也為10抬虽,現(xiàn)在就需要再添加一條圖片距離cell底部為10的下邊距官觅,這時(shí)候我們發(fā)現(xiàn)會(huì)有沖突,選中這條約束把優(yōu)先級(jí)設(shè)置得低一些阐污,會(huì)發(fā)現(xiàn)沖突消失了休涤,約束變成了虛線(xiàn),把之前圖片相對(duì)label的邊距的約束拖到.h中作為cell的屬性笛辟。


Snip20160131_20.png

在tableview代理方法里面判斷l(xiāng)abel顯示或隱藏來(lái)修改優(yōu)先級(jí)

cell.imageBotton.priority = cell.label.hidden ? UILayoutPriorityDefaultLow : UILayoutPriorityDefaultHigh;

當(dāng)label隱藏時(shí)把優(yōu)先級(jí)設(shè)置為UILayoutPriorityDefaultLow功氨,顯示時(shí)設(shè)置UILayoutPriorityDefaultHigh,只要是比圖片底部相對(duì)父控件邊距那條約束低就行了手幢。
這里有一個(gè)注意點(diǎn):

  • 不允許將優(yōu)先級(jí)由小于1000的值改為1000捷凄,例如,如果將優(yōu)先級(jí)由250修改為1000围来,則會(huì)拋出異常跺涤,控制臺(tái)會(huì)打印以下:
    Snip20160131_1.png

    所有操作都做完了匈睁,現(xiàn)在運(yùn)行效果如下:
    result.gif

    最后是這次的代碼:
    https://github.com/ShelinShelin/AutoLayoutDemo
    之前的一些例子請(qǐng)點(diǎn)擊:
    https://github.com/ShelinShelin 歡迎右上角??Star,謝謝桶错!
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末航唆,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子牛曹,更是在濱河造成了極大的恐慌佛点,老刑警劉巖醇滥,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件黎比,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡鸳玩,警方通過(guò)查閱死者的電腦和手機(jī)阅虫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)不跟,“玉大人颓帝,你說(shuō)我怎么就攤上這事∥迅铮” “怎么了购城?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)虐译。 經(jīng)常有香客問(wèn)我瘪板,道長(zhǎng),這世上最難降的妖魔是什么漆诽? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任侮攀,我火速辦了婚禮,結(jié)果婚禮上厢拭,老公的妹妹穿的比我還像新娘兰英。我一直安慰自己,他們只是感情好供鸠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布畦贸。 她就那樣靜靜地躺著,像睡著了一般楞捂。 火紅的嫁衣襯著肌膚如雪家制。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,125評(píng)論 1 297
  • 那天泡一,我揣著相機(jī)與錄音颤殴,去河邊找鬼。 笑死鼻忠,一個(gè)胖子當(dāng)著我的面吹牛涵但,可吹牛的內(nèi)容都是我干的杈绸。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼矮瘟,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼瞳脓!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起澈侠,我...
    開(kāi)封第一講書(shū)人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤劫侧,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后哨啃,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體烧栋,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年拳球,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了审姓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡祝峻,死狀恐怖魔吐,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情莱找,我是刑警寧澤酬姆,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站奥溺,受9級(jí)特大地震影響辞色,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谚赎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一淫僻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧壶唤,春花似錦雳灵、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至迎吵,卻和暖如春躲撰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背击费。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工拢蛋, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蔫巩。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓谆棱,卻偏偏與公主長(zhǎng)得像快压,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子垃瞧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

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