Animation personnalisée tiré UITableViewCell quand entrer en mode édition

Question

Arrière-plan

Tout d'abord, beaucoup de gratitude pour atebits pour leur blog très instructif post - Défilement Rapide dans Tweetie avec UITableView. La poste explique en détail comment les développeurs ont pu profiter au maximum de performances de défilement que possible de la UITableViews dans Tweetie.

Objectifs

Début avec le code source d'un lien dans le billet de blog (d'origine) (mon dépôt github):

1. Permettre à un UITableView personnalisé à l'aide de ces cellules pour passer en mode d'édition, exposant l'INTERFACE utilisateur pour supprimer un élément de la table. (github commettre)

2. Déplacer la cellule du texte de côté, comme la suppression du contrôle des diapositives à partir de la gauche. C'est complet, bien que le texte saute en arrière sans animation. (github commettre)

3. Appliquer une animation au mouvement du texte dans l'objectif 2 ci-dessus pour une bonne expérience utilisateur. C'est l'étape où j'ai été coincé.

La Question

Quelle est la meilleure façon d'introduire cette animation pour remplir l'objectif 3? Ce serait bien si cela pouvait se faire dans une manière qui maintient la logique de mon dernier commit parce que j'aimerais l'option pour déplacer le conflit une partie de la vue seulement, alors que tous les non-parties en conflit (comme le texte aligné à droite) pour rester dans le même endroit ou déplacer un nombre différent de pixels. Si ce qui précède n'est pas possible alors de défaire mon dernier commit et de la remplacer par une option que les diapositives de la totalité de la vue vers la droite serait une solution viable aussi.

J'apprécie toute l'aide n'importe qui peut fournir, à partir d'indicateurs rapides et les idées de tout le chemin à des extraits de code ou github s'engage. Bien sûr, vous êtes les bienvenus à la fourche de mon repo si vous le souhaitez. Je vais rester impliqué avec cette question pour vous assurer le succès de toute résolution est engagé à github et entièrement documentée ici. Merci beaucoup pour votre temps!

Mise à jour des pensées

J'ai été de penser à ce sujet beaucoup de choses depuis mon premier post, et a réalisé que le déplacement de certains éléments de texte par rapport à d'autres dans la vue pourrait annuler certains de l'original des objectifs de performance résolu dans le blog original. Donc, à ce moment je pense à une solution où l'ensemble de l'unique sous-vue est animé à sa nouvelle position peut être le meilleur.

Deuxièmement, si c'est fait de cette façon, il peut y avoir un cas où la sous-vue a une couleur personnalisée ou de l'arrière-plan en dégradé. Espérons que cela peut être fait d'une manière qui, dans sa position normale de l'arrière-plan s'étend invisible sur le côté gauche de suffisamment de sorte que lorsque la vue est glissé vers la droite, l'arrière-plan personnalisée est encore visible à travers l'ensemble de la cellule.

Answer 1

Merci à Craig de la réponse qui m'a orienté dans la bonne direction, j'ai une solution pour ce. Je revenue de mon commit qui a déplacé la position du texte basé sur le mode de l'édition et l'a remplacée par une nouvelle solution qui définit l'ensemble de l'affichage du contenu à la position correcte tout moment layoutSubviews est appelée, ce qui entraîne une animation automatique lors de la commutation et le mode édition:

- (void)layoutSubviews
{
    CGRect b = [self bounds];
    b.size.height -= 1; // leave room for the separator line
    b.size.width += 30; // allow extra width to slide for editing
    b.origin.x -= (self.editing) ? 0 : 30; // start 30px left unless editing
    [contentView setFrame:b];
    [super layoutSubviews];
}

En le faisant de cette manière j'ai pu supprimer le setFrame: remplacer trouvé dans ABTableViewCell.m parce que son ex-logic plus de mes ajouts se trouvent maintenant dans layoutSubviews.

J'ai mis un peu de gris fond sur les cellules pour vérifier un arrière-plan personnalisé fonctionne correctement sans nous permettant de voir derrière elle, comme il se déplace d'avant en arrière et il semble fonctionner à merveille.

Encore merci à Craig et toute autre personne qui a regardé cette.

GitHub de s'engager pour cette solution: (lien)

Answer 2

Comment êtes-vous de déplacer le texte autour de l'heure actuelle? Ou plus précisément, en ce qui UITableViewCell méthode êtes-vous d'effectuer le déménagement?

De mon expérience, substitution de l' layoutSubviews méthode et le cadre seront automatiquement être enveloppé dans une animation.

Par exemple:

- (void)layoutSubviews {
    if (self.editing) {
        [titleLabel setFrame:CGRectMake(62, 6, 170, 24)];
    }
    else {
        [titleLabel setFrame:CGRectMake(30, 6, 200, 24)];
    }
    [super layoutSubviews];
}

Answer 3

Pour contrôler entièrement sur l'édition dans votre cellule personnalisé, vous devez remplacer willTransitionToState méthode dans votre UITableViewCell sous-classe et de vérifier l'état de masque

- (void)willTransitionToState:(UITableViewCellStateMask)state
{
    NSString *logStr = @"Invoked";
    if ((state & UITableViewCellStateShowingEditControlMask)
        != 0) {
        // you need to move the controls in left
        logStr = [NSString stringWithFormat:@"%@
                  %@",logStr,@"UITableViewCellStateShowingEditControlMask"];
    }
    if ((state & UITableViewCellStateShowingDeleteConfirmationMask)
        != 0) {
        // you need to hide the controls for the delete button
        logStr = [NSString stringWithFormat:@"%@
                  %@",logStr,@"UITableViewCellStateShowingDeleteConfirmationMask"];
    }
    NSLog(@"%@",logStr);
    [super willTransitionToState:state];
}

aussi, vous pouvez remplacer layoutSubviews

- (void)layoutSubviews {
    // default place for label
    CGRect alarmTimeRect = CGRectMake(37, 7, 75, 30);
    if (self.editing && !self.showingDeleteConfirmation) {
        // move rect in left
        alarmTimeRect = CGRectMake(77, 7, 75, 30);
    }
    [alarmTimeLabel setFrame:alarmTimeRect];
    [super layoutSubviews];
}

Answer 4

Pour la poignée de glisser comme: (de soi.édition && !auto.showingDeleteConfirmation)

Answer 5

J'ai juste eu aussi cette question: comment animer un personnalisé mode d'édition? Je n'aime vraiment pas la solution ici, j'ai donc décidé de réfléchir un peu et de trouver une solution différente. Je ne sais pas si c'est mieux, mais je préfère que l'on. J'ai donc décidé de le partager ici:

Dans la cellule personnalisé (hériter de UITableViewCell), il suffit de surcharger la setEditing:

- (void)setEditing:(BOOL)editing animated:(BOOL)animated {
    [super setEditing:editing animated:animated];

    if (animated) {
        [UIView beginAnimations:@"setEditingAnimation" context:nil];
        [UIView setAnimationDuration:0.3];
    }

    if (editing) {
        /* do your offset and resize here */
    } else {
        /* return to the original here*/
    }

    if (animated)
        [UIView commitAnimations];
}

Je n'ai pas vérifier si la modification de la valeur est la même, mais c'est juste une idée de comment je l'ai fait.