web-dev-qa-db-fra.com

Comment ajuster la marge de gauche pour les cellules prototypes dans un UITableView?

Si je crée une UITableViewController, par exemple via Fichier → Nouveau projet ... → iOS → Application maître-détail dans Xcode, une UITableView est créée avec une cellule prototype.

La hiérarchie de vues générée est:

UITableViewController view hierarchy

Une "marge" gauche est créée automatiquement entre l'élément UIView Content de la cellule et l'élément UILabel du texte "Titre", comme indiqué ci-dessous en orange.

Prototype cell gap

Il en résulte une marge correspondante entre le bord de l'écran du périphérique et le texte UILabel au moment de l'exécution:

Runtime gap

Alors, où est la largeur de cet écart, et comment peut-il être ajusté?

Les commandes de l'inspecteur de taille pour UILabel sont grisées:

enter image description here

Mon option préférée serait de pouvoir définir la largeur de cet intervalle à partir d'Interface Builder, mais j'aimerais également comprendre où cet intervalle est défini et comment le modifier par programme.

46
j b

Il vous suffit de définir la propriété contentInset de la vue table. Vous pouvez définir la valeur en fonction de vos besoins.

self.tableView.contentInset = UIEdgeInsetsMake(0, -15, 0, 0);

RÉSULTAT DE SORTIE

48
milanpanchal

Allez à Main.storyboard> sélectionnez le UITableViewCell> Inspecteur des attributs. Modifiez la liste déroulante Séparateur des encarts par défaut en encarts personnalisés. Changer l'encart gauche de 15 à 0

enter image description here

35
farhan latheef

À partir de iOS 8 est disponible la propriété de cellule layoutMargins. La méthode correcte pour ajuster les marges des cellules consiste donc à définir cette propriété dans votre tableView:cellForRowAtIndexPath ou dans votre UITableViewCell personnalisée de la manière suivante:

override func awakeFromNib() {
    super.awakeFromNib()

    self.layoutMargins = UIEdgeInsetsZero //or UIEdgeInsetsMake(top, left, bottom, right)
    self.separatorInset = UIEdgeInsetsZero //if you also want to adjust separatorInset
}

J'espère que cela peut aider quelqu'un.

34

Ajoutez simplement la méthode dans votre code comme mentionné dans le lien ci-dessous

Comment puis-je éliminer la marge du côté gauche d'un UITableView, sans créer de vide à droite?

La méthode que je voudrais mentionner est 

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    if ([tableView respondsToSelector:@selector(setSeparatorInset:)]) {
        [tableView setSeparatorInset:UIEdgeInsetsZero];
    }
    if ([tableView respondsToSelector:@selector(setLayoutMargins:)]) {
    [tableView setLayoutMargins:UIEdgeInsetsZero];
    }
    if ([tableView respondsToSelector:@selector(setLayoutMargins:)]) {
    cell.preservesSuperviewLayoutMargins = NO;
    [cell setLayoutMargins:UIEdgeInsetsZero];
    }
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]){
    [cell setSeparatorInset:UIEdgeInsetsZero];
    }
}
8
Chetan

Dans l'inspecteur d'attributs TableView, définissez les incrustations de séparateur sur "Personnalisé" avec Left = 0 .

6
Nicolai Nita

Comme WTIFS l'a mentionné, la propriété UITableViewCell's indentation est un excellent moyen d'indenter des étiquettes de texte dans des styles de cellules intégrés. Faites juste quelque chose comme ceci pour atteindre la marge gauche de Nice:

cell.indentationLevel = 2;

Ceci, cependant, ne fonctionnerait pas pour imageView.

4
Dannie P

Si vous utilisez un xib pour votre cellule, assurez-vous que l'option "Relative à la marge" est décochée Vous pouvez vérifier cela via l'inspecteur comme indiqué dans la capture d'écran suivante:

 enter image description here

1

Voici la version rapide de la réponse de Chetan:

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        tableView.separatorInset = UIEdgeInsets.zero
        tableView.layoutMargins = UIEdgeInsets.zero
        cell.preservesSuperviewLayoutMargins = false
        cell.layoutMargins = UIEdgeInsets.zero
        cell.separatorInset = UIEdgeInsets.zero
}
0
Paul Lehn

Je pense que je viens de trouver une solution facile. lol. 

La réponse du haut a un problème ... elle réduit l’écart à gauche, mais entraîne un écart à droite.

J'ai utilisé le contraint dans Interface Builder.

Ajoutez d’abord une contrainte de marge gauche -15 à la vue Tableau.

Ajoutez ensuite quelques indentations à la cellule de table pour améliorer le contenu.


Voici quelques photos étape par étape:

Ajoutez la contrainte. N'oubliez pas de décocher "Espacement au plus proche voisin".

Add the constraint. Remember to uncheck the "spacing to nearest neighbor".

Les cellules de la table se déplaceront à gauche. Mais semble trop proche de la marge.

After adding the constraint

Choisissez donc la cellule de table et ajoutez un retrait dans la zone appropriée.

add some indentation

0
WTIFS

Et si vous souhaitez modifier uniquement la marge gauche de l'étiquette textuelle de la cellule, modifiez le Horizontal Space Constraint 'Constant' en 16 ou 8 en fonction du remplissage souhaité (dans le fichier nib). Si vous ne parvenez pas à la constante, sélectionnez l'étiquette, modifiez la coordonnée x dans la vue FrameRectangle, puis cliquez sur la broche de contrainte à gauche)  enter image description here

0
Naishta