iPhone UITableView sections imbriquées

Question

Pour l'application iPhone acani, je voudrais afficher les groupes (en fonction des intérêts) dans un UITableView. Je voudrais organiser les groupes taxonomiquement, par exemple:

• Sport
  • Bat-et-ball
    • Baseball
    • Softball
    • Cricket
  • Hockey
    • Fi terrain de hockey
    • Hockey sur glace
    • Roller Hockey
• Ingénierie
  • Génie électrique
  • Biochemical Engineering

Comment dois-je organiser ceci sur un UITableView?

Je pense qu'il devrait y avoir un UITableView racine qui aura les sections sports & ingénierie, et les cellules Bat-et-ball & de hockey sera sous la section des sports, et les cellules génie électrique & Biochemical Engineering va être sous la section Ingénierie.

Alors Bat-et-ball devrait avoir son propre UITableView, qui devrait avoir des cellules Baseball, Softball, et Cricket.

Cela semble-t-il un bon moyen d'organiser l'interface utilisateur?

Avez-vous un exemple de code ou des liens vers l'exemple de code Xcode pour une interface utilisateur comme celle-ci? Il doit y avoir un exemple de projet Xcode qui fait quelque chose comme ça. Peut-être le tableau périodique des éléments du projet ou Core Data Books?

Merci!

Matt

Answer 1

Vous l'avez. Un UITableView n'est vraiment pas conçu pour montrer plus de deux niveaux d'une hiérarchie, comme des sections et des lignes. Si vous souhaitez afficher plus de deux niveaux, une approche "drill-down" utilisée dans la plupart (toutes?) Les applications iOS, où tapant une ligne présente un autre UITableView sur la pile de navigation. (Comme vous le dites.)

Il existe de nombreux exemples de projets de code Apple qui utilisent ce modèle de conception.

Éditer: juste vérifié et DrillDownSave est un bon exemple, tout comme SimpleDrillDown.

Answer 2

L'astuce pour avoir des sections imbriquées est d'avoir deux types de lignes dans la vue tabulaire. Un pour représenter le deuxième niveau de sections et un autre pour représenter les lignes normales dans la tableview.Disons que vous avez un tableau à deux niveaux (disons des sections) pour représenter les éléments dans votre vue de table. Ensuite, le nombre total de sections que nous avons est juste le nombre de sections de premier niveau. Le nombre de lignes dans chaque section de niveau supérieur correspond au nombre de sous-sections + le nombre de lignes dans chaque sous-section. Maintenant, tout ce que nous devons penser est de savoir comment créer les lignes pour la vue de la table. Configurez deux prototypes dans le storyboard avec différents identifiants de réutilisation, un pour l'en-tête de section et un autre pour l'élément de ligne et instanciez juste celui qui est correct en fonction de l'index demandé dans la méthode de source de données.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
    NSMutableArray *sectionItems = self.sections[(NSUInteger) indexPath.section]; 
    NSMutableArray *sectionHeaders = self.sectionHeaders[(NSUInteger) indexPath.section]; 
    NSIndexPath *itemAndSubsectionIndex = [self computeItemAndSubsectionIndexForIndexPath:indexPath]; 
    NSUInteger subsectionIndex = (NSUInteger) itemAndSubsectionIndex.section; 
    NSInteger itemIndex = itemAndSubsectionIndex.row; 

    if (itemIndex < 0) { 
        // Section header 
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SECTION_HEADER_CELL" forIndexPath:indexPath]; 
        cell.textLabel.text = sectionHeaders[subsectionIndex]; 
        return cell; 
    } else { 
        // Row Item 
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ROW_CONTENT_CELL" forIndexPath:indexPath]; 
        cell.textLabel.text = sectionItems[subsectionIndex][itemIndex]; 
        return cell; 
    } 
} 

- (NSIndexPath *)computeItemAndSubsectionIndexForIndexPath:(NSIndexPath *)indexPath { 
    NSMutableArray *sectionItems = self.sections[(NSUInteger) indexPath.section]; 
    NSInteger itemIndex = indexPath.row; 
    NSUInteger subsectionIndex = 0; 
    for (NSUInteger i = 0; i < sectionItems.count; ++i) { 
        // First row for each section item is header 
        --itemIndex; 
        // Check if the item index is within this subsection's items 
        NSArray *subsectionItems = sectionItems[i]; 
        if (itemIndex < (NSInteger) subsectionItems.count) { 
            subsectionIndex = i; 
            break; 
        } else { 
            itemIndex -= subsectionItems.count; 
        } 
    } 
    return [NSIndexPath indexPathForRow:itemIndex inSection:subsectionIndex]; 
} 

Here's a detailed post comment faire cela.