117 votes

Tout ouvrir - Tout fermer

Quelqu'un pourrait-il me dire la façon d’effectuer des animations extensible/pliable UITableView dans les sections de UITableView comme ci-dessous ?

ou

110voto

mjdth Points 3828

Je suis sûr que vous avez juste à créer votre propre ligne d'en-tête et vient de mettre que la première ligne de chaque section. Sous-classement de la UITableView ou les en-têtes qui sont aujourd'hui serait probablement une énorme douleur et je ne suis pas sûr que vous pouvez facilement obtenir des actions de la façon dont ils travaillent. Vous pouvez facilement définir une cellule à ressembler à un en-tête, et la configuration de l' tableView:didSelectRowAtIndexPath pour développer ou réduire la section, il est à l'intérieur manuellement.

Si j'étais vous, je serais stocker un tableau de booléens correspondant à la "déployé" la valeur de chacune de vos sections. Vous pouvez alors l' tableView:didSelectRowAtIndexPath sur chacun de vos personnalisée lignes d'en-tête de la bascule de cette valeur, puis recharger cette section spécifique.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
	if (indexPath.row == 0) {
		///it's the first row of any section so it would be your custom section header

		///put in your code to toggle your boolean value here
		mybooleans[indexPath.section] = !mybooleans[indexPath.section];

		///reload this section
		[self.tableView reloadSections:[NSIndexSet indexSetWithIndex:indexPath.section] withRowAnimation:UITableViewRowAnimationFade];
	}
}

Vous devez ensuite configurer votre nombre numberOfRowsInSection pour vérifier l' mybooleans de la valeur et retourne 1 si la section n'est pas développé, ou 1+ le nombre d'éléments dans la section si elle est développée.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

	if (mybooleans[section]) {
		///we want the number of people plus the header cell
		return [self numberOfPeopleInGroup:section] + 1;
	} else {
		///we just want the header cell
		return 1;
	}
}

Vous devez également avoir à mettre à jour votre cellForRowAtIndexPath - retour d'un en-tête personnalisé cellule de la première ligne dans n'importe quelle section.

103voto

samwize Points 4144

Un exemple de code pour l'animation de l'action développer/réduire l'aide d'une vue de la table en-tête de section est fourni par Apple ici: Table d'Afficher des Animations et des Gestes

La clé de cette approche est de mettre en oeuvre - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section et un retour personnalisé UIView qui comprend un bouton (généralement de la même taille que la vue d'en-tête lui-même). Par dérivation de UIView et en utilisant que pour l'en-tête de la vue (comme cet exemple), vous pouvez facilement stocker des données supplémentaires, telles que le numéro de la section.

16voto

pmk Points 1374

Je sais que cette question est vieux, mais j’ai juste mis en place ma propre solution pour cela. Peut-être que cela aide quelqu'un, n’hésitez pas à utiliser le code !

Vérifier mon projet sur GitHub

10voto

Son Nguyen Points 1421

J’ai une meilleure solution que vous devriez ajouter un UIButton en en-tête de section et de jeu de taille de ce bouton égale à la taille de la section, mais rendent masquées par la couleur de fond claire, après que vous êtes facilement vérifier quelle section est cliquée pour développer ou réduire

7voto

RyanG Points 2700

J'ai fini par la simple création d'une headerView qui contenait un bouton ( j'ai vu son Nguyen de la solution ci-dessus après le fait, mais voici mon code.. il ressemble beaucoup, mais c'est assez simple):

déclarer un couple booléens pour vous sections

bool customerIsCollapsed = NO;
bool siteIsCollapsed = NO;

...code

maintenant, dans votre tableview délégué méthodes...

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, _tblSearchResults.frame.size.width, 35)];

    UILabel *lblSection = [UILabel new];
    [lblSection setFrame:CGRectMake(0, 0, 300, 30)];
    [lblSection setFont:[UIFont fontWithName:@"Helvetica-Bold" size:17]];
    [lblSection setBackgroundColor:[UIColor clearColor]];
    lblSection.alpha = 0.5;
    if(section == 0)
    {
        if(!customerIsCollapsed)
            [lblSection setText:@"Customers    --touch to show--"];
        else
            [lblSection setText:@"Customers    --touch to hide--"];
    }
    else
    {
        if(!siteIsCollapsed)
            [lblSection setText:@"Sites    --touch to show--"];
        else
            [lblSection setText:@"Sites    --touch to hide--"];    }

    UIButton *btnCollapse = [UIButton buttonWithType:UIButtonTypeCustom];
    [btnCollapse setFrame:CGRectMake(0, 0, _tblSearchResults.frame.size.width, 35)];
    [btnCollapse setBackgroundColor:[UIColor clearColor]];
    [btnCollapse addTarget:self action:@selector(touchedSection:) forControlEvents:UIControlEventTouchUpInside];
    btnCollapse.tag = section;


    [headerView addSubview:lblSection];
    [headerView addSubview:btnCollapse];

    return headerView;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    if(section == 0)
    {
        if(customerIsCollapsed)
            return 0;
        else
            return _customerArray.count;
    }
    else if (section == 1)
    {
        if(siteIsCollapsed)
            return 0;
        else
        return _siteArray.count;

    }
    return 0;
}

et enfin la fonction qui est appelée lorsque vous touchez l'un de l'en-tête de section de boutons:

- (IBAction)touchedSection:(id)sender
{
    UIButton *btnSection = (UIButton *)sender;

    if(btnSection.tag == 0)
    {
        NSLog(@"Touched Customers header");
        if(!customerIsCollapsed)
            customerIsCollapsed = YES;
        else
            customerIsCollapsed = NO;

    }
    else if(btnSection.tag == 1)
    {
        NSLog(@"Touched Site header");
        if(!siteIsCollapsed)
            siteIsCollapsed = YES;
        else
            siteIsCollapsed = NO;

    }
    [_tblSearchResults reloadData];
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X