web-dev-qa-db-fra.com

Comment changer la couleur de l'alphabet latéral dans une UITableView indexée?

J'ai une vue de table avec un index alphabétique et j'utilise l'alphabet latéral pour parcourir rapidement la liste. Pour ceux qui ne sont pas familiers, cela utilise ceci:

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {

Mon problème est que mon application vient d'être écorchée de noir. Et maintenant, il est difficile de voir les lettres de l'alphabet sur le côté.

Je ne sais pas comment changer la couleur de l'alphabet. J'aimerais que ce soit "blanc" si possible.

iphoneuitableview
45
cmos

D'après ce que je peux dire, malheureusement, il n'est pas possible de personnaliser la couleur du texte affiché dans l'index, le plus proche que j'ai pu venir est de pouvoir modifier la couleur d'arrière-plan et la police de l'index.

Il y a du code dans le livre de cuisine iPhone Developers d'Erica Sadun qui montre comment accéder à la vue UITableViewIndex (une classe non documentée). Vous pouvez en trouver la référence à la page 175 du livre si vous l'avez. Ce qui donne accès à la couleur d'arrière-plan et à la police. Vous pouvez voir un document non officiel relatif à cette classe ici .

[~ # ~] avertissement [~ # ~] Il s'agit d'une utilisation non documentée d'une classe non documentée, vous devez donc être prudent quant à son utilisation.

Voici un extrait de code du livre de cuisine avec des modifications mineures:

- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath {    

  for(UIView *view in [tv subviews])
  {
    if([[[view class] description] isEqualToString:@"UITableViewIndex"])
    {

      [view setBackgroundColor:[UIColor whiteColor]];
      [view setFont:[UIFont systemFontOfSize:14]];
    }
  }

  //rest of cellForRow handling...

}

Cela illustre comment vous pouvez accéder à la vue UITableViewIndex et la modifier sous certains aspects. Il semble que la vue ne comporte pas de sous-vues, elle effectue donc probablement un dessin personnalisé avec le tableau des titres d'index.

Ce n'est pas parfait mais j'espère que ça aide un peu.

Paul

32
paulthenerd

si votre version iOS minimale est plus récente que 6.0, vous pouvez utiliser la propriété sectionIndexColor de UITableView.

Couleur à utiliser pour le texte d'index de la vue tabulaire.

@property (nonatomique, conserver) UIColor * sectionIndexColor

Discussion:

Les vues de tableau peuvent afficher un index sur le côté de la vue, ce qui facilite la navigation rapide du contenu du tableau par les utilisateurs. Cette propriété spécifie la couleur à utiliser pour le texte affiché dans cette région.

Date de mise à jour 2014.1.13

Je trouve une bibliothèque tierce open source: GDIIndexBar pour aider à personnaliser l'apparence de l'index.

61
sunkehappy

Cela peut être facilement modifié dans le générateur d'interface pour UITableView - Pas besoin d'utiliser des classes non documentées?

Voir la capture d'écran ci-dessous, car vous pouvez voir la couleur de la police et la couleur d'arrière-plan peut également être modifiée. Le travail est un bon coup!

21
Jim Tierney

Pour iOS7 ou supérieur:

self.tableView.sectionIndexColor = [UIColor whiteColor];
self.tableView.sectionIndexBackgroundColor = [UIColor clearColor];
16
Pau Senabre

J'avais le même problème et je viens de découvrir un moyen de le faire, bien que cela utilise des classes et des méthodes non documentées, alors réfléchissez une fois de plus avant d'essayer de le télécharger sur l'App Store. Je dois dire que je n'ai essayé cela qu'avec iOS5, donc je ne sais pas si cela fonctionnera pour les versions précédentes.

J'ai emprunté et modifié l'exemple de livre de recettes d'Erica Saunders pour qu'il change maintenant la couleur du texte en rouge:

- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath {    

  for(UIView *view in [tv subviews])
  {
    if([[[view class] description] isEqualToString:@"UITableViewIndex"])
    {
      [view performSelector:@selector(setIndexColor:) withObject:[UIColor redColor]];
    }
  }

  //rest of cellForRow handling...

}
11
Martin_G

Nous avons utilisé avec succès le code suivant:

for(UIView *view in [tableView subviews]) {
    if([view respondsToSelector:@selector(setIndexColor:)]) {
        [view performSelector:@selector(setIndexColor:) withObject:[UIColor whiteColor]];
    }
}

ce qui fonctionne bien - il est très similaire à la réponse de Mooglas - mais s'abstient d'utiliser le mot "UITableViewIndex".

11
Magnus

Vous pouvez définir la couleur de teinte pour la tableView.

[[UITableView appearance] setTintColor:[UIColor purpleColor]];
8
JMestre

Il existe un moyen de changer la couleur de l'alphabet d'index.

Dans votre fichier d'en-tête, déclarez votre UITableView en tant que propriété:

@property (weak, nonatomic) IBOutlet UITableView *mainTable;

Ensuite, dans la vue viewDidAppear de votre fichier d'implémentation, utilisez la ligne suivante:

//Change the color of the UITableView index color
_mainTable.sectionIndexColor = [UIColor blackColor];
4
Antonio Cunanan Logarta

Voici la meilleure solution que j'ai trouvée pour ajuster la couleur d'arrière-plan de la barre d'index sur le côté. Cela fonctionne dans iOS7 et probablement iOS6.

Ajoutez ceci à votre viewDidLoad

if ([_tableView respondsToSelector:@selector(setSectionIndexColor:)]) {
    _tableView.sectionIndexBackgroundColor = [UIColor clearColor];
    _tableView.sectionIndexTrackingBackgroundColor = [UIColor whiteColor];
}

La première est la couleur par défaut, la seconde est la couleur d'arrière-plan lorsque vous faites défiler.

3
Kinoli

Swift 4.1 et Xcode 9.4:

tableView.sectionIndexColor = .red
tableView.sectionIndexBackgroundColor = .clear
2
atereshkov

Faire un tableau mutable pour contenir l'étiquette de titre alternative

-(NSArray * )sectionIndexTitlesForTableView:(UITableView * )tableView

retourne un tableau de @ "" où le nombre d'espaces entre les guillemets détermine la largeur du scroller éclairé. Demandez à "sectionIndexTitlesForTableView" d'appeler une fonction d'étiquette de mise à jour. Dans cette fonction, supprimez toutes les étiquettes du tableau que vous avez créé précédemment de leurs superviews. Ensuite, créez et ajoutez le nombre d'étiquettes nécessaires. Ajoutez-les ensuite à la vue d'ensemble du tableau.

Ce sont les lignes nécessaires pour placer les étiquettes au bon endroit.

rect.Origin.x = table.frame.Origin.x+table.frame.size.width-rect.size.width-2;
rect.Origin.y = 5+table.frame.Origin.y+counter *(280-rect.size.height-([customIndexLabels count]-1))/([customIndexLabels count]-1);
if ([customIndexLabels lastObject]==thisLabel)
{
   rect.Origin.y-=10;
}

J'espère que cela pourra aider. Ce n'est pas parfait, je ne me soucie pas assez de le réparer moi-même Le principal problème est que l'espacement de la dernière étiquette n'est pas uniforme.

1
Johnathon Smith