模擬Apple“備忘錄”:利用 Auto Layout 實現(xiàn) UITextView 在 UITableView 中自適應(yīng)

本文翻譯自 Self-sizing UITextView in a UITableView using Auto Layout (like Reminders.app)


現(xiàn)在,很多開發(fā)者自己寫計算文字尺寸谬墙,但這樣會錯誤地把代碼搞的太過復(fù)雜。不要這樣做替梨!如果正確設(shè)置了 Auto Layout糜颠,根本不需要使用 textView.sizeThatFit()裹匙!

優(yōu)雅的解決方案

第一步

從新的 Single View 項目開始(使用 Swift)然后打開 Main.storyboard 并移除 Xcode 好心添加的視圖控制器》柙埽現(xiàn)在,打開 ViewController.swift 文件然后將 ViewController 改為繼承自 UITableViewController抑淫,而不是 UIViewController绷落。


import UIKit
 
class ViewController: UITableViewController {
 
  override func viewDidLoad() {
    super.viewDidLoad()
  }
}

第二步

回到 Main.storyboard姥闪,添加一個 UITableViewController始苇,選中 Table View Cell,拖一個 UITextView 進(jìn)去筐喳。正確地為新添加的 Text View 設(shè)置 Auto Layout constraints 是相當(dāng)關(guān)鍵的催式!

熱心提示:當(dāng)你想快速把視圖固定在父視圖上時,使用這個小竅門:

選擇視圖避归,然后點擊右下角的 Pin 按鈕荣月。在彈出窗口里,輸入 left梳毙,top哺窄,right 和 bottom 到父視圖的距離,然后點擊 Add 4 Constraints账锹,就會立刻獲得固定好的視圖了萌业!

PS:確定你點擊了輸入框旁邊的紅色 constraint 標(biāo)記。這樣會添加你想要的 constraints(如果你改了框里的值奸柬,Xcode 會自動選中它們)生年。

我把行高更改為 70,這是我最后的結(jié)果:

第三步

現(xiàn)在我們需要添加一個自定義 cell廓奕,帶有一個連接到 UITextView 的 IBOutlet抱婉。

(為了簡化之目的,我在 ViewController.swift 文件中添加了這 3 行桌粉,這樣就不用添加新的文件了)

// 使用一個簡單的自定義 cell 這樣我們就可以設(shè)置 text view 的 delegate 了 ??
class MyCell: UITableViewCell {
  @IBOutlet weak var textView: UITextView!
}

回到 Main.storyboard 然后把自定義 cell 的類設(shè)置為 MyCell:

第四步

把 text view 連接到 IBOutlet:

第五步

如果你禁用了 text view 的 Scrolling Enabled 屬性蒸绩,它將計算自己的固有內(nèi)容大小,并阻止?jié)L動(doh)铃肯。這意味著它會了解自己所持有的內(nèi)容患亿。相當(dāng)神奇。

第六步

現(xiàn)在要為 View Controller 施加一點魔法了缘薛!

要讓 Auto Layout 和 UITableView 良好合作窍育,最重要的是把 table view 的 estimatedRowHeight 設(shè)置為大于零的值,并把 rowHeight 設(shè)置為 UITableViewAutomaticDimension

在 viewDidLoad 里這樣做:


class ViewController: UITableViewController {
 
  override func viewDidLoad() {
    super.viewDidLoad()
    tableView.estimatedRowHeight = 70
    tableView.rowHeight = UITableViewAutomaticDimension
  }
 
...
}

這將告訴 table view 由它來負(fù)責(zé)計算 cell 的尺寸(在沒有我們干預(yù)的情況下)宴胧。

為了演示之目的漱抓,我這樣設(shè)置了 delegate 代碼,以便在一個 section 里返回 5 個 items:

class ViewController: UITableViewController {

...
  override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 1
  }
  
  override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 5
  }
...
}

對于第三個函數(shù)恕齐,需要做的就是 dequeue cell 然后將其 text view 的 delegate 設(shè)為 self乞娄。我們還要實現(xiàn) textViewDidChange 回調(diào)以確保修改文字時正確調(diào)整表格大小。

class ViewController: UITableViewController {

...
  override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! MyCell
    cell.textView.delegate = self
    return cell
  }
}

由于我們的 View Controller 不符合 UITextViewDelegate,所以要在這個文件里添加一個 extension仪或。

**注意:奇跡要發(fā)生了确镊。如果我們調(diào)用 tableView.reloadData() 會導(dǎo)致 text view 失去第一響應(yīng)者并隱藏鍵盤。

蹩腳的用戶體驗和難以使用的 App范删!

作為替代蕾域,我們給 table view 做了兩次調(diào)用:

...
extension ViewController: UITextViewDelegate {
  func textViewDidChange(textView: UITextView) {
    tableView.beginUpdates()
    tableView.endUpdates()
  }
}
...

修正:你們可能會發(fā)現(xiàn),上面的代碼 UI 有一個 bug —— 如果編輯最后幾行到旦,table view 會跳來跳去旨巷。我還沒有找到最終的解決方案,但禁用動畫和重置 table view 的 contentOffset 會修復(fù)這個跳躍的問題添忘。更新后的 textViewDidChange 就像這樣:

...
extension ViewController: UITextViewDelegate {
  func textViewDidChange(textView: UITextView) {
    let currentOffset = tableView.contentOffset
    UIView.setAnimationsEnabled(false)
    tableView.beginUpdates()
    tableView.endUpdates()
    UIView.setAnimationsEnabled(true)
    tableView.setContentOffset(currentOffset, animated: false)
  }
}
...

這不會 reload 表格但會調(diào)整 cell 的高度(如果需要的話)采呐。很神奇!??終于可以啟動最終的 App 了搁骑,看看它是否可以正常工作(當(dāng)然可以)斧吐。

代碼

如果要看完整的實例項目,可以看一下我 GitHub 上的 repo仲器。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末煤率,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子娄周,更是在濱河造成了極大的恐慌涕侈,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件煤辨,死亡現(xiàn)場離奇詭異裳涛,居然都是意外死亡,警方通過查閱死者的電腦和手機众辨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門端三,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鹃彻,你說我怎么就攤上這事郊闯。” “怎么了蛛株?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵团赁,是天一觀的道長。 經(jīng)常有香客問我谨履,道長欢摄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任笋粟,我火速辦了婚禮怀挠,結(jié)果婚禮上析蝴,老公的妹妹穿的比我還像新娘。我一直安慰自己绿淋,他們只是感情好闷畸,可當(dāng)我...
    茶點故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吞滞,像睡著了一般佑菩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上冯吓,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天倘待,我揣著相機與錄音,去河邊找鬼组贺。 笑死,一個胖子當(dāng)著我的面吹牛祖娘,可吹牛的內(nèi)容都是我干的失尖。 我是一名探鬼主播,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼渐苏,長吁一口氣:“原來是場噩夢啊……” “哼掀潮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起琼富,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤仪吧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鞠眉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體薯鼠,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年械蹋,在試婚紗的時候發(fā)現(xiàn)自己被綠了出皇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡哗戈,死狀恐怖郊艘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情唯咬,我是刑警寧澤纱注,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站胆胰,受9級特大地震影響狞贱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜煮剧,卻給世界環(huán)境...
    茶點故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一斥滤、第九天 我趴在偏房一處隱蔽的房頂上張望将鸵。 院中可真熱鬧,春花似錦佑颇、人聲如沸顶掉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽痒筒。三九已至,卻和暖如春茬贵,著一層夾襖步出監(jiān)牢的瞬間簿透,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工解藻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留老充,地道東北人。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓螟左,卻偏偏與公主長得像啡浊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子胶背,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,585評論 2 359

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