← Retour au blog

Styles UITableView par défaut

Le style que vous passez à un UITableView est la première décision que vous prenez à son sujet — et la plus facile à prendre en pilote automatique. C'est un seul argument à l'initialisation, mais il fixe toute la personnalité de l'écran : si les lignes s'étendent de bord à bord, si les sections apparaissent comme des cartes aux coins arrondis, et comment les en-têtes se comportent au défilement. Il existe trois styles intégrés. Voici à quoi ressemble réellement chacun, et quand j'y ai recours.

Comparaison côte à côte des trois styles UITableView : plain (rangées pleine largeur avec un en-tête de section collant), grouped (rangées pleine largeur en sections espacées), et insetGrouped (rangées dans des cartes arrondies en retrait des bords de l'écran)

Les trois disposent les mêmes cellules ; ce qui change, c'est la façon dont ils traitent les sections et les bords. plain est une seule liste continue. grouped et insetGrouped découpent tous deux la liste en sections visuellement distinctes — la différence entre eux tient à savoir si ces sections occupent toute la largeur ou flottent en retrait avec des coins arrondis.

Apparence plain ↴

configuration de contenu de liste par défaut Swift utilisant l'apparence plain en mode sombre configuration de contenu de liste par défaut Swift utilisant l'apparence plain en mode clair

Le style par défaut. Les lignes s'étendent sur toute la largeur de la table, et les en-têtes et pieds de section restent épinglés — ils se fixent en haut lorsque vous les dépassez au défilement. C'est le style pour les listes longues et uniformes où le contenu est l'essentiel : une boîte de réception, une liste de contacts, des résultats de recherche. Si vous affichez un flux continu de lignes similaires, optez pour plain.

Apparence grouped ↴

configuration de contenu de liste par défaut Swift utilisant l'apparence grouped en mode sombre configuration de contenu de liste par défaut Swift utilisant l'apparence grouped en mode clair

Les sections deviennent des blocs visuellement distincts séparés par des espaces, et les en-têtes défilent avec le contenu au lieu de rester épinglés. Les lignes occupent toujours toute la largeur. C'était l'apparence des Réglages avant iOS 13, et ce style convient encore lorsque vous avez quelques groupes clairement identifiés, sans vouloir l'effet de cartes en retrait.

Apparence insetGrouped ↴

configuration de contenu de liste par défaut Swift utilisant l'apparence insetgrouped en mode sombre configuration de contenu de liste par défaut Swift utilisant l'apparence insetgrouped en mode clair

Introduit avec iOS 13, ce style reprend l'esprit de grouped : les lignes sont en retrait, les coins sont arrondis, et chaque section se présente comme une carte flottant sur l'arrière-plan. C'est l'allure moderne des Réglages, et ma valeur par défaut pour tout ce qui a une forme de formulaire — préférences, écrans de compte, tout ce qui comporte des champs étiquetés en petits groupes.

Définir le style

Vous choisissez le style une fois, à l'initialisation :

let tableView = UITableView(frame: .zero, style: .insetGrouped)

Deux choses à savoir. insetGrouped exige iOS 13+, et style est en lecture seule après l'init — on ne change pas le style d'une table view à l'exécution. Si vous devez le basculer, vous recréez la table view (ou vous le définissez d'emblée dans votre storyboard/xib).

Au-delà d'UITableView

Les trois mêmes apparences vous suivent à travers UIKit et SwiftUI :

  • En SwiftUI : List { … }.listStyle(.plain), .grouped ou .insetGrouped.
  • Dans une liste en compositional layout moderne : UICollectionLayoutListConfiguration(appearance:) accepte les mêmes .plain / .grouped / .insetGroupedplus .sidebar, que UITableView.Style n'a pas. Si vous construisez une interface de liste avec des collection views, c'est la voie à suivre, et j'ai traité le côté cellule dans Configurations de contenu de liste par défaut.

Lequel utiliser ?

  • Liste longue et uniforme ? plain.
  • Réglages ou un formulaire avec des champs groupés ? insetGrouped.
  • Sections groupées mais vous voulez l'allure classique pleine largeur ? grouped.

Dans le doute, dans une app moderne, insetGrouped est la valeur par défaut sûre, au rendu natif.

Dépôt source utilisé pour générer les fenêtres dans les captures d'écran ci-dessus.