Автоматический размер ячейки 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 выглядят следующим образом:

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()

//
//  proSwift.ru
//  

override func viewDidLoad() {
    super.viewDidLoad()
        
    tableView.estimatedRowHeight = 44
    tableView.rowHeight = UITableViewAutomaticDimension
}

Этот метод — весьма удобное место, чтобы установить два нужных нам свойства таблицы.   первой свойство — это 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

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

Ваш адрес email не будет опубликован.

*

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.