Поделиться через

Автоизменяемая высота строки в Xamarin.iOS

  • Статья

Предупреждение

Поддержка конструктора iOS была прекращена в Visual Studio 2019 версии 16.8 и Visual Studio 2019 для Mac версии 8.8. В Visual Studio 2019 версии 16.9 и Visual Studio для Mac версии 8.9 этот конструктор удален. Создавать пользовательские интерфейсы iOS рекомендуется непосредственно на Mac с помощью Xcode Interface Builder. Дополнительные сведения см. в статье Проектирование пользовательских интерфейсов с помощью Xcode.

Начиная с iOS 8, Apple добавила возможность создать представление таблицы (UITableView), которое может автоматически увеличиваться и уменьшать высоту заданной строки на основе размера его содержимого с помощью автоматического макета, классов размера и ограничений.

IOS 11 добавил возможность автоматического расширения строк. Заголовки, нижние колонтитулы и ячейки теперь могут быть автоматически размером на основе их содержимого. Однако если таблица создана в конструкторе iOS, конструкторе интерфейсов или если она имеет фиксированные высоты строк, необходимо вручную включить ячейки самостоятельного изменения размера, как описано в этом руководстве.

Макет ячейки в конструкторе iOS

Откройте раскадровки для представления таблиц, для которого требуется автоматически изменить размер строки в конструкторе iOS, выберите прототип ячейки и создайте макет ячейки. Например:

Проект прототипа ячейки

Для каждого элемента прототипа добавьте ограничения, чтобы сохранить элементы в правильном положении, так как представление таблицы изменяется для поворота или разных размеров экрана устройства iOS. Например, закрепление Title вверху, слева и справа от представления содержимого ячейки:

Закрепление заголовка в верхнем, левом и правом углу представления содержимого ячеек

В нашем примере таблицы небольшой Label (в нижней Titleчасти) — это поле, которое может уменьшать и увеличиваться, чтобы увеличить или уменьшить высоту строки. Чтобы добиться этого эффекта, добавьте следующие ограничения для закрепления левой, правой и нижней части метки:

Эти ограничения для закрепления левой, правой и нижней части метки

Теперь, когда элементы в ячейке полностью ограничены, необходимо уточнить, какой элемент следует растянуть. Для этого задайте приоритет обнимания содержимого и приоритет сопротивления сжатия содержимого, как это необходимо в разделе макета панели свойств:

Раздел

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

Затем необходимо выбрать прототип ячейки и дать ему уникальный идентификатор:

Предоставление прототипа ячейки уникальному идентификатору

В нашем примере GrowCell. Мы будем использовать это значение позже при заполнении таблицы.

Внимание

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

Для каждого элемента нашего прототипа ячейки назначьте имя, чтобы предоставить его коду C#. Например:

Назначение имени для предоставления его коду C#

Затем добавьте пользовательский класс для UITableViewController, UITableView а также UITableCell (прототип). Например:

Добавление пользовательского класса для UITableViewController, UITableView и UITableCell

Наконец, чтобы убедиться, что все ожидаемое содержимое отображается в нашей метке, задайте для свойства Lines значение 0:

Свойство Lines с значением 0

Определим пользовательский интерфейс, добавим код, чтобы включить автоматическое изменение размера высоты строк.

Включение автоматического изменения размера высоты

В источнике данных () или источнике (UITableViewDatasource) в представлении таблицы (UITableViewSource) при отмене ячейки необходимо использовать Identifier то, что мы определили в конструкторе. Например:

public string CellID {
    get { return "GrowCell"; }
}
...

public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
    var cell = tableView.DequeueReusableCell (CellID, indexPath) as GrowRowTableCell;
    var item = Items [indexPath.Row];

    // Setup
    cell.Image = UIImage.FromFile(item.ImageName);
    cell.Title = item.Title;
    cell.Description = item.Description;

    return cell;
}

По умолчанию представление таблицы будет задано для автоматического изменения размера высоты строк. Чтобы убедиться в этом, RowHeight свойство должно иметь значение UITableView.AutomaticDimension. Нам также нужно задать EstimatedRowHeight свойство в нашем UITableViewController. Например:

public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);

    // Initialize table
    TableView.DataSource = new GrowRowTableDataSource(this);
    TableView.Delegate = new GrowRowTableDelegate (this);
    TableView.RowHeight = UITableView.AutomaticDimension;
    TableView.EstimatedRowHeight = 40f;
    TableView.ReloadData ();
}

Эта оценка не должна быть точной, просто грубой оценкой средней высоты каждой строки в представлении таблицы.

При выполнении этого кода при запуске приложения каждая строка будет уменьшаться и расти на основе высоты последней метки в прототипе ячейки. Например:

Пример запуска таблицы