Автоматический размер ячейки UITableView, или немоного про UITableViewAutomaticDimension
Если необходимо сделать ячейки в UITableView с размером, который подстраивается под контент, и мы заранее не знаем какой это будет контент, то мы можем указать нашей таблице, несколько свойств, которые помогут выполнить задачу.
У нас есть таблица с прототипом ячейки, в которой два элемента UILabel, в которые мы будем устанавливать текст. Я приведу код класса ячейки, код Table View Controller, который нужно будет исправить и изображение Storyboard.
Код класса ячейки:
// // proSwift.ru // import UIKit class KeyValueCell: UITableViewCell { @IBOutlet weak var keyLabel: UILabel! @IBOutlet weak var valueLabel: UILabel! }
Ничего сложного — наследование от UITableViewCell и два аутлета на UILabel
Код класса наследника от UITableViewController
// // proSwift.ru // import UIKit class CustomTableViewController: UITableViewController { var data = ["Record one" : "Идейные соображения высшего порядка", "Record two" : "Консультация с широким активом позволяет выполнять важные задания", "Record three" : "Развитие различных форм деятельности влечет за собой процесс внедрения ", "Record four" : "Модернизации систем массового участия", "Record five" : "Постоянное информационно-пропагандистское обеспечение ", "Record six" : "Способствует подготовки и реализации системы", "Record seven" : "Рыбатекст является альтернативой традиционному", "Record eight" : "Наполнит любой макет непонятным смыслом"] override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return data.count } override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCellWithIdentifier("MyCell") as! KeyValueCell let keys = [String](data.keys) cell.keyLabel.text = keys[indexPath.row] cell.valueLabel.text = data[keys[indexPath.row]] return cell } override func prefersStatusBarHidden() -> Bool { return true } }
Тоже ничего сложного, — словарь с данными в качестве свойства data, первый метод определяет количество строк в таблице исходя из количества элементов словаря, второй метод возвращает ячейки таблицы, формируя их посредством подстановки элементов словаря в соответсвующие UILabel. Последний метод скрывает статус бар. Про него можно почитать в этой статье.
Элементы на Storyboard выглядят следующим образом:
Внимание! Не забываем добавить констрейны для UILabel, чтобы их левые и правые края они были «примагничены» к левому и правому краям ячейки, и соответственно верхний к верхнему краю ячейки, а нижний к нижнему краю ячейки.
Это позволит иметь правильный размер UILabel на любом экране, любой ширины. Т.е. UIlabel будут растягиваться на всю ширину, которую будет способен вместить экран, но не более.
Запускаем проект, и получаем такую картину:
Места, отмеченные красным, это ячейки, размер которых не позволил вместить весь текст целиком.
Давайте исправим это досадное обстоятельство.
1. Настраиваем UILabel в Storyboard
Перейдите в Storyboard, и в настройках UILabel Value Label в свойстве Lines установите 0. Ноль — не означает «нет текста». Ноль означает, что количество строк — не ограничено.
2. Изменяем код UITableViewController
Нужно добавить метод жизненного цикла контроллера (подробнее о котором было написано в статье View Controller Lifecycle, жизненный цикл View Controller). Это метод viewDidLoad()
// // proSwift.ru // override func viewDidLoad() { super.viewDidLoad() tableView.estimatedRowHeight = 44 tableView.rowHeight = UITableViewAutomaticDimension }
Этот метод — весьма удобное место, чтобы установить два нужных нам свойства таблицы. первой свойство — это estimatedRowHeight в который мы передали 44 — это приблизительный размер ячейки, или можно сказать что это размер ячейки, которой не потребуется увеличение. Второе свойство хранит высоту строки, и мы передали в это свойство значение UITableViewAutomaticDimension, тем самым указав, что мы хотим использовать автоматически подбор высоты ячейки по содержанию.
Если сейчас запустить проект, то вы увидите совсем не то что ожидаете, но все равно попробуйте.
3. Добавим еще один необходимый констрейн.
Проблема в том, что теперь UILabel valueLabel переносит строки, вмещает весь текст, который в него передается, отображает его, но располагается поверх UILabel keyLabel. Думаю, вы уже поняли что необходимо сделать. Нужно всего лишь добавить констрейн, который укажет что между нашими UILabel должно быть расстояние.
Перетащите правой кнопкой мыши указатель с valueLabel на keyLabel и выберите Vertical Spacing.
Этого вполне достаточно, чтобы наша таблица заработала правильно.
Запустите проект, и посмотрите на финальный результат.
Ссылка на GitHub
https://github.com/Ironrnd/UITableViewAutomaticDimension
Добавить комментарий