Perfektionieren Untersicht Größenänderung in UICollectionView layout-übergang

Grid /Tabelle übergänge sind nicht so einfach wie eine triviale demo hätten Sie glauben. Sie funktioniert gut, wenn Sie haben, ein einzelnes Etikett in der Mitte der Zelle und einen einfarbigen hintergrund, aber sobald Sie haben alle real Inhalte gibt, ist es vorbei fällt. Dies ist der Grund, warum:

• Sie haben keine Kontrolle über das timing und die Art der animation.
• Während die Rahmen der Zellen im layout animiert werden, von einem Wert zum nächsten, die Zellen selbst (vor allem, wenn Sie mit zwei getrennten Zellen) scheinen nicht zu Durchführung von internen Layouts für jeden Schritt der animation, so dass es scheint, dass "flick" von einem layout zum nächsten im inneren jeder Zelle - grid-Zelle falsch aussieht in der Tabelle Größe, oder Umgekehrt.

Gibt es viele verschiedene Lösungen. Es ist schwer, etwas zu empfehlen, bestimmte ohne zu sehen, Ihre Zellinhalte, aber ich habe Erfolg mit der folgenden:

• die Kontrolle der animation unter Verwendung von Techniken wie denjenigen, gezeigt hier. Sie könnten auch check out Facebook Pop zu bekommen bessere Kontrolle über den übergang, aber ich habe nicht hingeschaut, dass in jedem detail.
• die gleiche Zelle zu verwenden für beide layouts. Innerhalb von layoutSubviews, berechnen von einem übergang Abstand von einem layout zum anderen und verwenden Sie diese, um zu verblassen oder nicht verwendete Elemente, und berechnen Sie schöne übergangs-frames für die anderen Elemente. Dies verhindert ein verkratzen wechseln von einer Zelle-Klasse den anderen.

Das ist der Ansatz, den ich verwendet hier zu ziemlich guten Effekt.

Ist es schwieriger zu arbeiten, dass das Vertrauen auf die Größenänderung Masken oder Autolayout aber es ist die zusätzliche Arbeit, dass macht die Dinge gut Aussehen.

Wie für die Ausgabe, wenn der Benutzer die Umschaltung zwischen den layouts zu schnell - deaktivieren Sie kurz die-Taste, wenn der übergang beginnt, und re - aktivieren, wenn Sie fertig sind.

Als praktischer Beispiel, hier ist ein Beispiel das layout ändern (etwas davon ist weggelassen) aus dem app oben verlinkten. Beachten Sie, dass die Interaktion deaktiviert, wenn der übergang Auftritt, ich bin mit dem übergang layout aus dem oben verlinkten Projekt, und es ist ein Abschluss-handler:

-(void)toggleLayout:(UIButton*)sender
{
    [[UIApplication sharedApplication] beginIgnoringInteractionEvents];

    HMNNewsLayout newLayoutType = self.layoutType == HMNNewsLayoutTable ? HMNNewsLayoutGrid : HMNNewsLayoutTable;

    UICollectionViewLayout *newLayout = [HMNNewsCollectionViewController collectionViewLayoutForType:newLayoutType];

    HMNTransitionLayout *transitionLayout = (HMNTransitionLayout *)[self.collectionView transitionToCollectionViewLayout:newLayout duration:0.5 easing:QuarticEaseInOut completion:^(BOOL completed, BOOL finish)
            {
                [[NSUserDefaults standardUserDefaults] setInteger:newLayoutType forKey:HMNNewsLayoutTypeKey];
                self.layoutType = newLayoutType;
                sender.selected = !sender.selected;
                for (HMNNewsCell *cell in self.collectionView.visibleCells)
                {
                    cell.layoutType = newLayoutType;
                }
                [[UIApplication sharedApplication] endIgnoringInteractionEvents];
            }];

    [transitionLayout setUpdateLayoutAttributes:^UICollectionViewLayoutAttributes *(UICollectionViewLayoutAttributes *layoutAttributes, UICollectionViewLayoutAttributes *fromAttributes, UICollectionViewLayoutAttributes *toAttributes, CGFloat progress)
    {
        HMNTransitionLayoutAttributes *attributes = (HMNTransitionLayoutAttributes *)layoutAttributes;
        attributes.progress = progress;
        attributes.destinationLayoutType = newLayoutType;
        return attributes;
    }];
}

Innerhalb der Zelle, die die gleiche Zelle, die entweder für das layout, habe ich ein Bild anzeigen und ein label-container. Der label-container enthält alle Beschriftungen und legt Sie intern mit auto-layout". Es gibt Konstante frame-Variablen für die Bild-Ansicht und der label-container in den einzelnen Layouts.

Layout-Attribute aus dem übergang layout sind eine benutzerdefinierte Unterklasse, die einen übergang Fortschritt Unterkunft in der update-layout-Attribute block oben. Diese übergeben wird in die Zelle über die applyLayoutAttributes Methode (ein anderer code weggelassen):

-(void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
    self.transitionProgress = 0;
    if ([layoutAttributes isKindOfClass:[HMNTransitionLayoutAttributes class]])
    {
        HMNTransitionLayoutAttributes *attributes = (HMNTransitionLayoutAttributes *)layoutAttributes;
        self.transitionProgress = attributes.progress;
    }
    [super applyLayoutAttributes:layoutAttributes];
}

layoutSubviews in der Zelle Unterklasse übernimmt die harte Arbeit und die Interpolation zwischen den beiden frames für die Bilder und Etiketten, wenn ein übergang im Gange ist:

-(void)layoutSubviews
{
    [super layoutSubviews];

    if (!self.transitionProgress)
    {
        switch (self.layoutType)
        {
            case HMNNewsLayoutTable:
                self.imageView.frame = imageViewTableFrame;
                self.labelContainer.frame = labelContainerTableFrame;
                break;
            case HMNNewsLayoutGrid:
                self.imageView.frame = imageViewGridFrame;
                self.labelContainer.frame = self.originalGridLabelFrame;
                break;
        }
    }
    else
    {
        CGRect fromImageFrame,toImageFrame,fromLabelFrame,toLabelFrame;
        if (self.layoutType == HMNNewsLayoutTable)
        {
            fromImageFrame = imageViewTableFrame;
            toImageFrame = imageViewGridFrame;
            fromLabelFrame = labelContainerTableFrame;
            toLabelFrame = self.originalGridLabelFrame;
        }
        else
        {
            fromImageFrame = imageViewGridFrame;
            toImageFrame = imageViewTableFrame;
            fromLabelFrame = self.originalGridLabelFrame;
            toLabelFrame = labelContainerTableFrame;
        }

        CGFloat from = 1.0 - self.transitionProgress;
        CGFloat to = self.transitionProgress;

        self.imageView.frame = (CGRect)
        {
            .origin.x = from * fromImageFrame.origin.x + to * toImageFrame.origin.x,
            .origin.y = from * fromImageFrame.origin.y + to * toImageFrame.origin.y,
            .size.width = from * fromImageFrame.size.width + to * toImageFrame.size.width,
            .size.height = from * fromImageFrame.size.height + to * toImageFrame.size.height
        };

        self.labelContainer.frame = (CGRect)
        {
            .origin.x = from * fromLabelFrame.origin.x + to * toLabelFrame.origin.x,
            .origin.y = from * fromLabelFrame.origin.y + to * toLabelFrame.origin.y,
            .size.width = from * fromLabelFrame.size.width + to * toLabelFrame.size.width,
            .size.height = from * fromLabelFrame.size.height + to * toLabelFrame.size.height
        };
    }
    self.headlineLabel.preferredMaxLayoutWidth = self.labelContainer.frame.size.width;
}

... Und das ist über es. Im Grunde benötigen Sie eine Möglichkeit zu sagen der Zelle, wie weit durch den übergang ist es, was Sie brauchen, die layout-Umstellung-Bibliothek (oder, wie ich sage, Facebook pop könnte dies tun), und dann müssen Sie sicherstellen, dass Sie schöne Werte für das layout beim Wechsel zwischen den beiden.