Altura da linha de dimensionamento automático no Xamarin.iOS

Aviso

O iOS Designer foi preterido no Visual Studio 2019 versão 16.8 e Visual Studio 2019 para Mac versão 8.8 e removido no Visual Studio 2019 versão 16.9 e Visual Studio para Mac versão 8.9. A maneira recomendada de criar interfaces de usuário do iOS é diretamente em um Mac executando o Construtor de Interfaces do Xcode. Para obter mais informações, consulte Criando interfaces de usuário com o Xcode.

A partir do iOS 8, a Apple adicionou a capacidade de criar uma Exibição de Tabela (UITableView) que pode aumentar e diminuir automaticamente a altura de uma determinada Linha com base no tamanho de seu conteúdo usando Layout Automático, Classes de Tamanho e Restrições.

O iOS 11 adicionou a capacidade de expansão automática das linhas. Cabeçalhos, rodapés e células agora podem ser dimensionados automaticamente com base em seu conteúdo. No entanto, se a tabela for criada no iOS Designer, no Construtor de Interfaces ou se tiver alturas de linha fixas, você deverá habilitar manualmente as células de autodimensionamento, conforme descrito neste guia.

Layout de célula no iOS Designer

Abra o storyboard para o Modo de Exibição de Tabela para o qual você deseja que a Linha seja redimensionada automaticamente no Designer do iOS, selecione o Protótipo da Célula e crie o layout da célula. Por exemplo:

Para cada elemento no Protótipo, adicione restrições para manter os elementos na posição correta à medida que o Modo de Exibição de Tabela é redimensionado para rotação ou tamanhos de tela diferentes do Dispositivo iOS. Por exemplo, fixando o Title na parte superior, esquerda e direita da Exibição de Conteúdo da Célula:

No caso da nossa tabela de exemplo, o pequeno Label (sob o Title) é o campo que pode diminuir e crescer para aumentar ou diminuir a altura da linha. Para obter esse efeito, adicione as seguintes restrições para fixar a esquerda, direita, superior e inferior do rótulo:

Agora que restringimos totalmente os elementos na célula, precisamos esclarecer qual elemento deve ser esticado. Para fazer isso, defina a Prioridade de Adoção de Conteúdo e a Prioridade de Resistência à Compactação de Conteúdo conforme necessário na seção Layout do Bloco de Propriedades:

Defina o elemento que você deseja expandir para ter um valor de Prioridade de Adesão mais baixo e um valor de Prioridade de Resistência de Compactação mais baixo .

Em seguida, precisamos selecionar o protótipo de célula e dar-lhe um identificador exclusivo:

No caso do nosso exemplo, GrowCell. Usaremos esse valor mais tarde quando preenchermos a tabela.

Importante

Se a tabela contiver mais de um tipo de célula (Protótipo), você precisará garantir que cada tipo tenha seu próprio Identifier exclusivo para que o Redimensionamento Automático de Linha funcione.

Para cada elemento do nosso protótipo de célula, atribua um Nome para expô-lo ao código C#. Por exemplo:

Em seguida, adicione uma classe personalizada para o UITableViewController, o UITableView e o UITableCell (Prototype). Por exemplo:

Finalmente, para garantir que todo o conteúdo esperado seja exibido em nosso rótulo, defina a propriedade Lines como 0:

Com a interface do usuário definida, vamos adicionar o código para habilitar o Redimensionamento Automático de Altura de Linha.

Habilitando o redimensionamento automático de altura

Na FonteUITableViewDatasource de Dados () ou na Fonte () do Modo de Exibição de Tabela (UITableViewSource), quando desenfileiramos uma Célula, precisamos usar o Identifier que definimos no designer. Por exemplo:

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;
}

Por padrão, o Modo de Exibição de Tabela será definido para Altura da Linha de Redimensionamento Automático. Para garantir isso, a RowHeight propriedade deve ser definida como UITableView.AutomaticDimension. Também precisamos definir a EstimatedRowHeight propriedade em nosso UITableViewController. Por exemplo:

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

Essa estimativa não precisa ser exata, apenas uma estimativa aproximada da altura média de cada Linha no Modo de Exibição de Tabela.

Com esse código em vigor, quando o aplicativo for executado, cada linha diminuirá e crescerá com base na altura do último Rótulo no Protótipo de Célula. Por exemplo: