理解iOS 8中的Self Sizing Cells和Dynamic Type

在iOS 8中恼蓬,蘋果引入了UITableView的一項新功能--Self SizingCells,對于不少開發(fā)者來說這是新SDK中一項非常有用的新功能。在iOS8之前厢汹,如果想在表視圖中展示可變高度的動態(tài)內(nèi)容時,你需要手動計算行高谐宙,而Self SizingCells為展示動態(tài)內(nèi)容提供了一個解決方案烫葬。以下是你使用Self Sizing Cells時需要注意的事項:

1.為原型單元格定義Auto Layout約束

2.指定表視圖的estimatedRowHeight

3.將表視圖的rowHeight屬性設(shè)置為UITableViewAutomaticDimension

如果用代碼表示最后兩點,那就是

1.tableView.estimatedRowHeight?=?44.0

2.tableView.rowHeight?=?UITableViewAutomaticDimension

僅有兩行代碼凡蜻,你通知表視圖計算單元格的尺寸以匹配內(nèi)容和和動態(tài)進行渲染搭综。Self Sizing Cells功能可以為你節(jié)省大量寫代碼的時間,你喜歡愛上它划栓!

使用Self Sizing Cells構(gòu)建簡單的Demo

學習新知識的最好辦法莫過于使用它兑巾,我們將要開發(fā)一個簡單的Demo來闡釋Self Sizing Cell。我們從工程模板開始忠荞,一個簡單的以表為主的應用展示了旅店列表闪朱。原型單元格包含兩個單行的文本標簽,一個是名稱钻洒,一個是地址奋姿。下載并運行示例工程 ,你會看到以下界面:

由圖所知素标,由于行高是固定的称诗,所以一些旅店的地址被縮短了。在開發(fā)者包含大量表視圖的應用時头遭,你可能會經(jīng)常遇見此類問題寓免。過去,你可能需要通過縮小文本大小或者增加行數(shù)來解決該問題计维。不過從iOS 8以后袜香,你所需要的是使用Self Sizing Cells來正確展示單元格內(nèi)容,無論內(nèi)容有多長鲫惶。

添加Auto Layout約束

你可能會厭惡并盡量避免使用Auto Layout蜈首。不過沒有Auto Layout,Self SizingCells功能也是無法工作的,它依賴約束來確定合適的行高欢策。事實上吆寨,表視圖會調(diào)用systemLayoutSizeFittingSize并返回基于布局約束的單元格尺寸。

如果你是頭一次使用Auto Layout踩寇,推薦你先看下Auto Layout Introduction 啄清。

本文所用的項目模板并沒有使用Auto Layout約束,所以我們要首先添加一個俺孙。對于旅店名稱標簽辣卒,點擊自動布局菜單的"Pin"按鈕,并添加4個間距約束睛榄。

為地址標簽添加左添寺、右以及下方三個約束:


正確配置好約束后,界面如下:

設(shè)置預估行高

配置完自動布局后懈费,接下來要在ViewController的viewDidLoad方法中添加如下代碼:

1.tableView.estimatedRowHeight?=?68.0

2.tableView.rowHeight?=?UITableViewAutomaticDimension

第一行代碼設(shè)置了單元格的預估行高计露,就是現(xiàn)有的原型單元格的高度。第二行代碼是改變UITableViewAutomaticDimension的rowHeight屬性憎乙,這是iOS 8中默認的行高票罐。換句話說,你通知表視圖基于其他信息來算出單元格的尺寸大小泞边。

如果你測試應用该押,那么會發(fā)現(xiàn)單元格此時是不可調(diào)整的,原因是旅店的名稱和地址標簽被設(shè)定在一行代碼中阵谚,所以將代碼行數(shù)設(shè)定為零蚕礼,并允許標簽自動增長。

再次編譯并運行app梢什,表視圖單元格會根據(jù)內(nèi)容調(diào)整奠蹬。

A Bug?!

我不確定這是不是一個bug,但是UseYourLoaf也注意到了這個問題(博文:Self Sizing Table ViewCellshttp://useyourloaf.com/blog/2014/08/07/self-sizing-table-view-cells.html)嗡午。當首次展示表視圖時囤躁,你會發(fā)現(xiàn)一些單元格不能正確調(diào)整大小。但是當你滾動表視圖時荔睹,新單元格的行高是正確的狸演。你可以在視圖展示后強制重載以解決這個問題。

override func viewDidAppear(animated: Bool) {

tableView.reloadData()

}

Dynamic Type

Self Sizing Cell對于支持Dynamic Type非常有用僻他。你可能沒聽說過Dynamic Type宵距,但你可能見過系統(tǒng)的“Settings”屏幕:

Dynamic Type最初由iOS 7引入,允許用戶自定義文本大小從而滿足app的需要吨拗。不過僅有采用Dynamic Type的app才能響應文本的改變满哪,可能只有一小部分第三方應用使用了該功能婿斥。

從iOS 8開始,蘋果想要鼓勵開發(fā)者使用Dynamic Type翩瓜。正如在WWDC session中提到的那樣,所有蘋果系統(tǒng)級應用都使用了Dynamic Type携龟,并且內(nèi)置的標簽已經(jīng)有了動態(tài)字體兔跌。當用戶改變文本大小時,這些標簽也會改變其大小峡蟋。

更進一步說坟桅,Self Sizing Cell的引入是促進Dynamic Type使用的辦法,它可以節(jié)省大量寫代碼調(diào)整行高的時間蕊蝗。如果單元格可以自動調(diào)整了仅乓,那么使用Dynamic Type就很顯而易見了。

你只需要從尺寸固定的自定義字體中將字體更改為文本類型(比如標題和內(nèi)容主體)首選的字體蓬戚。也就是說當你運行app時夸楣,它會適應文本大小的改變。

總結(jié)

你已經(jīng)通過本文了解了基本的Self Sizing Cells和Dynamic Type子漩。我們鼓勵你使用新功能豫喧,并更新app以支持DynamicType。Self Sizing Cell是我最喜歡的iOS 8功能之一幢泼,僅需兩行代碼紧显,你就可以適應單元格中的動態(tài)內(nèi)容。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末缕棵,一起剝皮案震驚了整個濱河市孵班,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌招驴,老刑警劉巖篙程,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異别厘,居然都是意外死亡房午,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門丹允,熙熙樓的掌柜王于貴愁眉苦臉地迎上來郭厌,“玉大人,你說我怎么就攤上這事雕蔽≌勰” “怎么了?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵批狐,是天一觀的道長扇售。 經(jīng)常有香客問我前塔,道長,這世上最難降的妖魔是什么承冰? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任华弓,我火速辦了婚禮,結(jié)果婚禮上困乒,老公的妹妹穿的比我還像新娘寂屏。我一直安慰自己,他們只是感情好娜搂,可當我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布迁霎。 她就那樣靜靜地躺著,像睡著了一般百宇。 火紅的嫁衣襯著肌膚如雪考廉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天携御,我揣著相機與錄音昌粤,去河邊找鬼。 笑死啄刹,一個胖子當著我的面吹牛婚苹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鸵膏,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼膊升,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了谭企?” 一聲冷哼從身側(cè)響起廓译,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤瘸彤,失蹤者是張志新(化名)和其女友劉穎捌归,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體颁股,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡盹廷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年征绸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俄占。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡管怠,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出缸榄,到底是詐尸還是另有隱情渤弛,我是刑警寧澤,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布甚带,位于F島的核電站她肯,受9級特大地震影響佳头,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜晴氨,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一康嘉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧籽前,春花似錦亭珍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽闰非。三九已至膘格,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間财松,已是汗流浹背瘪贱。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留辆毡,地道東北人菜秦。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像舶掖,于是被迫代替她去往敵國和親球昨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2 345

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