iPhone UITableView Secciones anidadas

Question

Para la aplicación de iPhone acani, me gustaría mostrar grupos (según intereses) en un UITableView. Me gustaría organizar los grupos taxonómicamente, por ejemplo:

• Deportes
  • Bate y pelota
    • béisbol
    • softball
    • Cricket
  • hockey
    • Fi Hockey campo
    • hockey sobre hielo
    • hockey patines
• Ingeniería
  • Ingeniería Eléctrica
  • Ingeniería Bioquímica

¿Cómo debería organizar esto en un UITableView?

Estoy pensando que debería haber una UITableView raíz que tendrá las secciones de Deportes & de ingeniería, y las células Bate y pelota de hockey & estará bajo la sección de Deportes, y las células Ingeniería Eléctrica Ingeniería Bioquímica se & estar bajo la sección de Ingeniería.

Luego, Bat-and-ball debería tener su propio UITableView, que debería tener células Baseball, Softball y Cricket.

¿Suena esto como una buena forma de organizar la IU?

¿Tiene algún código de muestra o enlaces al código de ejemplo de Xcode para una interfaz de usuario como esta? Tiene que haber un proyecto de ejemplo de Xcode que haga algo como esto. ¿Tal vez la tabla periódica de elementos proyecto o Core Data Books?

Gracias!

Mate

Answer 1

Lo tienes. Un UITableView realmente no está diseñado para mostrar más de dos niveles de una jerarquía, como secciones y filas. Si desea mostrar más de dos niveles, un enfoque de "desglose" utilizado en la mayoría (¿todos?) De las aplicaciones de iOS, donde tocar una fila presenta otro UITableView en la pila de navegación. (Como dices)

Hay muchos proyectos de código de ejemplo de Apple que utilizan este patrón de diseño.

Editar: recién marcado y DrillDownSave es un buen ejemplo, como es SimpleDrillDown.

Answer 2

El truco para tener secciones anidadas es tener dos tipos de filas en la vista de tabla. Uno para representar el segundo nivel de secciones y otro para representar las filas normales en la tabla vista.Supongamos que tiene una matriz de dos niveles (por ejemplo, secciones) para representar los elementos en su vista de tabla.

Entonces, el número total de secciones que tenemos es solo el número de secciones de nivel superior. El número de filas en cada sección de nivel superior sería el número de subsecciones + el número de filas en cada subsección.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
    return self.sections.count; 
} 

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
    NSArray *sectionItems = self.sections[(NSUInteger) section]; 
    NSUInteger numberOfRows = sectionItems.count; // For second level section headers 
    for (NSArray *rowItems  in sectionItems) { 
        numberOfRows += rowItems.count; // For actual table rows 
    } 
    return numberOfRows; 
} 

Ahora, todo lo que necesitamos pensar es cómo crear las filas para la vista de tabla. Configure dos prototipos en el guión gráfico con diferentes identificadores de reutilización, uno para el encabezado de la sección y otro para el elemento de la fila y simplemente instale el correcto según el índice solicitado en el método de fuente de datos.

- (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 sobre cómo hacerlo.