ios – 在UICollectionView布局转换中完善子视图大小调整

>你无法控制动画的时间和性质.
>虽然布局中的单元格的框架从一个值到另一个值是动画的,但单元本身(特别是如果您使用两个单独的单元格)似乎不对动画的每个步骤执行内部布局,因此似乎从每个单元格中的一个布局“下滑”到下一个布局 – 您的网格单元在表格大小上看起来错误,反之亦然.

有很多不同的解决方案.很难推荐任何具体的内容,但没有看到您的单元格的内容,但我已经取得了以下成功：

>使用如here所示的技术控制动画.您还可以查看Facebook Pop来更好地控制转换,但我没有仔细研究.
>对于这两个布局使用相同的单元格.在layoutSubviews中,计算从一个布局到另一个布局的过渡距离,并将其用于淡出或未使用的元素,并为其他元素计算好的过渡帧.这可以防止从一个单元格类别到另一个单元格类型的抖动开关.

这是我使用here的方法效果相当不错.

依靠调整面具或Autolayout的大小,这是更难的工作,但这是额外的工作,使事情看起来不错.

对于用户可以在布局之间切换太快的问题,只需在转换开始时禁用该按钮,并在完成后重新启用它.

作为一个更实际的例子,这里是从上面链接的应用程序的布局变化(一些省略)的示例.注意,在转换发生时,交互被禁用,我正在使用从上面链接的项目中的转换布局,并且有一个完成处理程序：

-(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;
    }];
}

在单元格中,这是任一布局的相同单元格,我有一个图像视图和一个标签容器.标签容器保留所有标签,并使用自动布局将其放在内部.每个布局中的图像视图和标签容器都有不变的框架变量.

过渡布局中的布局属性是一个自定义子类,其中包含在上述更新布局属性块中设置的转换进度属性.这使用applyLayoutAttributes方法(其他一些代码省略)传递到单元格中：

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

layout在细胞子类中的浏览在图像和标签的两个帧之间进行内插的艰巨工作,如果正在进行转换：

-(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;
}

就是这样.基本上,您需要一种告诉单元格的过程有多远,您需要布局转换库(或者像我所说的Facebook pop可能会这样做),然后您需要确保您获得不错的值用于在两者之间转换时进行布局.