通过切换布局触发动画UICollectionView单元格调整大小

Question

我试图在各种UICollectionViewFlowLayout子类之间设置动画.每个流布局指定不同的项目大小.一个显示一个包含3个项目的网格,另一个显示包含2个项目的网格,第三个显示只有1个项目(看起来像UITableView).

我正在调用setCollectionViewLayout:animated:来做这件事.单元格大小的动画效果很好.然而,子视图有点混乱.每个单元格都包含一个图像和一个标签(暂时删除了标签).我希望图像随着单元格的大小变化而改变其大小的变化,同样也就是标签.

如果我使用自动布局(目前还不是很好)来布局我的单元格的子视图,那么在动画开始时,图像会调整大小到目标单元格框架.我理解UIView动画是如何工作的,因为他们会立即改变动画属性并且动画在表示层中完成,但我希望自动布局以某种方式工作.

如果我删除自动布局并在initWithFrame中执行以下操作:

[[self imageView] setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleRightMargin];

那么图像子视图的大小动画很好,但是在循环几个动画后,图像子视图的大小和位置在某些情况下是不正确的.

我已尝试在layoutSubviews中布置子视图,但这会产生与AutoLayout相同的结果.

我在github上看到的所有在UICollectionViewLayouts之间制作动画的演示只有一个彩色背景或填充整个单元格的子视图.有没有人设法让这个工作？

下面是正在发生的图像(红线是UIImageView的边框):

第一个布局

第二版

第三种布局

回到第一个布局,但子视图帧是错误的

Answer 1

要使用AutoLayout,您需要将以下内容放在UICollectionViewCell子类中:

- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    [UIView animateWithDuration:animationDuration animations:^{
        [self layoutIfNeeded];
    }];
}

默认动画持续时间约为0.33秒(通过实验确定).

Answer 2

所以我采用的解决方案是关闭自动布局（正如马蒂所指出的），但我也删除了所有自动调整大小蒙版。我在 UICollectionViewCell 子类中为要显示的每个 UICollectionViewFlowLayout 创建了三个不同的硬编码布局。

GSProductCollectionViewCell.m

-(void)setLayoutForWideLayoutWithDestinationSize:(CGSize)size
{
    [[self imageView] setFrame:CGRectMake( 5.0f, 5.0f, (int)(size.width * 0.3f), size.height - 10.0f)];

    [[self titleLabel] setFrame:CGRectMake( self.imageView.right + 5.0f, 5.0f, size.width - self.imageView.right - 15.0f, 25.0f)];
    [[self titleLabel] setFont:[UIFont fontWithName:self.titleLabel.font.fontName size:12.0f]];

    [[self titleBackgroundView] setFrame:self.titleLabel.frame];
    [[self titleBackgroundView] setAlpha:1.0f];

    [[self descriptionLabel] setAlpha:1.0f];
    [[self descriptionLabel] setFrame:CGRectMake( self.titleLabel.left,     self.titleLabel.bottom + 5.0f, self.titleLabel.width, 25.0f)];

     [...]
}

-(void)setLayoutForSqaureLayoutWithDestinationSize:(CGSize)size
{
    [[self imageView] setFrame:CGRectMake( 5.0f, 5.0f, size.width - 10.0f, size.height - 10.0f - 30.0f)];

    [[self titleLabel] setFrame:CGRectMake( 5.0f, size.height - 30.0f, size.width - 10.0f, 25.0f)];
    [[self titleLabel] setFont:[UIFont fontWithName:self.titleLabel.font.fontName size:10.0f]];

    [[self titleBackgroundView] setFrame:self.titleLabel.frame];
    [[self titleBackgroundView] setAlpha:0.0f];

    [[self descriptionLabel] setAlpha:0.0f];
    [[self descriptionLabel] centerView];

    [...]
}

-(void)setLayoutWithFrameSize:(CGSize)size forStyle:(GSProductLayoutStyle)layoutStyle
{
    switch (layoutStyle)
    {
        case kGSProductLayoutStyleGrid3:
        case kGSProductLayoutStyleGrid2:
            [self setLayoutForSqaureLayoutWithDestinationSize:size];
            break;

        case kGSProductLayoutStyleList:
            [self setLayoutForWideLayoutWithDestinationSize:size];
            break;

        default:
            break;
    }
}

然后，当用户选择循环布局按钮时，我前进到下一个布局并调用在我的 ViewController 中执行以下操作（具有 UICollectionView）：

-(void)setLayoutStyle:(GSProductLayoutStyle)layoutStyle
{
    if (_layoutStyle != layoutStyle)
    {
        _layoutStyle = layoutStyle;

        UICollectionViewFlowLayout *layout;

        switch (_layoutStyle)
        {
           case kGSProductLayoutStyleGrid3:
                layout = [GSProductCollectionViewGridLayout new];
                break;

            case kGSProductLayoutStyleGrid2:
                layout = [GSProductCollectionViewGridTwoLayout new];
                break;

            case kGSProductLayoutStyleList:
                layout = [GSProductCollectionViewListLayout new];
                break;

            default:
                layout = [GSProductCollectionViewGridLayout new];
                break;
        }

        CGSize itemSize = layout.itemSize;

        [self setCollectionViewLayout:layout animated:YES];

        [[self visibleCells] enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {

            [(GSProductCollectionViewCell*)obj setLayoutStyle:_layoutStyle];

            [UIView animateWithDuration:0.3f animations:^{

                [(GSProductCollectionViewCell*)obj setLayoutWithFrameSize:itemSize forStyle:self.layoutStyle];

            }];
        }];

    }
}

这使我能够完全控制每种类型的 FlowLayout 子类的 Cell 中的每个布局。动画很流畅，我还可以淡出特定布局中不需要的任何视图。

其结果是 UICollectionView 的行为很像 iPhone Ebay Apps 网格视图行为，但在我看来更好。

抱歉，我无法粘贴更多代码或将其放在 GitHub 上，因为它来自客户端代码。不过我很乐意回答任何问题。

干杯，布雷特