Автоматический размер ячейки UITableView, или немоного про UITableViewAutomaticDimension

Если необходимо сделать ячейки в UITableView с размером, который подстраивается под контент, и мы заранее не знаем какой это будет контент, то мы можем указать нашей таблице, несколько свойств, которые помогут выполнить задачу.

У нас есть таблица с прототипом ячейки, в которой два элемента UILabel, в которые мы будем устанавливать текст. Я приведу код класса ячейки, код Table View Controller, который нужно будет исправить и изображение Storyboard.

Код класса ячейки:

Ничего сложного — наследование от UITableViewCell и два аутлета на UILabel

Код класса наследника от UITableViewController

Тоже ничего сложного, — словарь с данными в качестве свойства data, первый метод определяет количество строк в таблице исходя из количества элементов словаря, второй метод возвращает ячейки таблицы, формируя их посредством подстановки элементов словаря в соответсвующие UILabel. Последний метод скрывает статус бар. Про него можно почитать в этой статье.

Элементы на Storyboard выглядят следующим образом:

Main.storyboard 2016-04-03 03-20-58

Внимание! Не забываем добавить констрейны для UILabel, чтобы их левые и правые края они были «примагничены» к левому и правому краям ячейки, и соответственно верхний к верхнему краю ячейки, а нижний к нижнему краю ячейки.

Main.storyboard — Edited 2016-04-03 03-29-46

Это позволит иметь правильный размер UILabel на любом экране, любой ширины. Т.е. UIlabel  будут растягиваться на всю ширину, которую будет способен вместить экран, но не более.

Запускаем проект, и получаем такую картину:

iOS 9.3 (13E230) 2016-04-03 03-33-20

Места, отмеченные красным, это ячейки, размер которых не позволил вместить весь текст целиком.

Давайте исправим это досадное обстоятельство.

1. Настраиваем UILabel в Storyboard

Перейдите в Storyboard,  и в настройках UILabel Value Label в свойстве Lines установите 0. Ноль — не означает «нет текста». Ноль означает, что количество строк — не ограничено.

UITableViewAutomaticDimension_1_proSwift_ru

2. Изменяем код UITableViewController

Нужно добавить метод жизненного цикла контроллера (подробнее о котором было написано в статье View Controller Lifecycle, жизненный цикл View Controller). Это метод viewDidLoad()

Этот метод — весьма удобное место, чтобы установить два нужных нам свойства таблицы.   первой свойство — это estimatedRowHeight в который мы передали 44 — это приблизительный размер ячейки, или можно сказать что это размер ячейки, которой не потребуется увеличение. Второе свойство хранит высоту строки, и мы передали в это свойство значение UITableViewAutomaticDimension, тем самым указав, что мы хотим использовать автоматически подбор высоты ячейки по содержанию.

Если сейчас запустить проект, то вы увидите совсем не то что ожидаете, но все равно попробуйте.

iOS 9.3 (13E230) 2016-04-03 14-14-11

3. Добавим еще один необходимый констрейн.

Проблема в том, что теперь UILabel valueLabel переносит строки, вмещает весь текст, который в него передается, отображает его, но располагается поверх UILabel keyLabel. Думаю, вы уже поняли что необходимо сделать. Нужно всего лишь добавить констрейн, который укажет что между нашими UILabel должно быть расстояние.

Перетащите правой кнопкой мыши указатель с valueLabel на keyLabel и выберите  Vertical Spacing.

UITableViewAutomaticDimension_2_proSwift_ru

Этого вполне достаточно, чтобы наша таблица заработала правильно.

Запустите проект, и посмотрите на финальный результат.

UITableViewAutomaticDimension_3_proSwift_ru

Ссылка на  GitHub

https://github.com/Ironrnd/UITableViewAutomaticDimension

Метки:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*