Dimensionnement automatique de la hauteur de ligne dans Xamarin.iOS

Avertissement

Le concepteur iOS a été déconseillé dans Visual Studio 2019 version 16.8 et Visual Studio 2019 pour Mac version 8.8, et supprimé dans Visual Studio 2019 version 16.9 et Visual Studio pour Mac version 8.9. La méthode recommandée pour créer des interfaces utilisateur iOS est directement sur un Mac exécutant le Générateur d’interface de Xcode. Pour plus d’informations, consultez Conception d’interfaces utilisateur avec Xcode.

À compter d’iOS 8, Apple a ajouté la possibilité de créer un affichage table (UITableView) qui peut augmenter et réduire automatiquement la hauteur d’une ligne donnée en fonction de la taille de son contenu à l’aide de la disposition automatique, des classes de taille et des contraintes.

iOS 11 a ajouté la possibilité de développer automatiquement les lignes. Les en-têtes, les pieds de page et les cellules peuvent désormais être dimensionnés automatiquement en fonction de leur contenu. Toutefois, si votre table est créée dans le concepteur iOS, le Générateur d’interface ou s’il a des hauteurs de ligne fixes, vous devez activer manuellement les cellules de dimensionnement automatique, comme décrit dans ce guide.

Disposition des cellules dans le Concepteur iOS

Ouvrez le storyboard pour l’affichage tableau pour lequel vous souhaitez que la ligne soit redimensionnée automatiquement dans le Concepteur iOS, sélectionnez le prototype de la cellule et concevez la disposition de la cellule. Par exemple :

Pour chaque élément du prototype, ajoutez des contraintes pour conserver les éléments dans la position correcte, car l’affichage table est redimensionné pour la rotation ou différentes tailles d’écran d’appareil iOS. Par exemple, épinglage du Title haut, de la gauche et de la droite de l’affichage contenu de la cellule :

Dans le cas de notre exemple de tableau, le petit Label (sous le Title) est le champ qui peut réduire et augmenter pour augmenter ou diminuer la hauteur de ligne. Pour atteindre cet effet, ajoutez les contraintes suivantes pour épingler la gauche, la droite, le haut et le bas de l’étiquette :

Maintenant que nous avons entièrement contraint les éléments de la cellule, nous devons clarifier l’élément qui doit être étiré. Pour ce faire, définissez la priorité de compression de contenu et la priorité de résistance de compression du contenu en fonction des besoins dans la section Disposition du panneau Propriétés :

Définissez l’élément que vous souhaitez développer pour avoir une valeur priorité de mise en attente inférieure et une valeur de priorité de résistance à la compression inférieure .

Ensuite, nous devons sélectionner le prototype de cellule et lui donner un identificateur unique :

Dans le cas de notre exemple, GrowCell. Nous allons utiliser cette valeur ultérieurement lorsque nous remplirons la table.

Important

Si votre tableau contient plusieurs types de cellules (Prototype), vous devez vous assurer que chaque type possède son propre type unique Identifier pour que le redimensionnement de ligne automatique fonctionne.

Pour chaque élément de notre prototype de cellule, affectez un nom pour l’exposer au code C#. Par exemple :

Ensuite, ajoutez une classe personnalisée pour le UITableViewController, le UITableView et le UITableCell (Prototype). Par exemple :

Enfin, pour vous assurer que tout le contenu attendu est affiché dans notre étiquette, définissez la propriété Lines sur 0:

Avec l’interface utilisateur définie, nous allons ajouter le code pour activer le redimensionnement de hauteur de ligne automatique.

Activation de la hauteur de redimensionnement automatique

Dans la source de données () ou la source deUITableViewDatasource notre vue de table (UITableViewSource), lorsque nous déquerons une cellule, nous devons utiliser celle Identifier que nous avons définie dans le concepteur. Par exemple :

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

Par défaut, la vue table est définie pour redimensionner automatiquement la hauteur de ligne. Pour ce faire, la RowHeight propriété doit être définie sur UITableView.AutomaticDimension. Nous devons également définir la EstimatedRowHeight propriété dans notre UITableViewController. Par exemple :

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

Cette estimation n’a pas besoin d’être exacte, juste une estimation approximative de la hauteur moyenne de chaque ligne dans l’affichage Table.

Avec ce code en place, lorsque l’application est exécutée, chaque ligne diminue et augmente en fonction de la hauteur de la dernière étiquette dans le prototype de cellule. Par exemple :