折叠 UICollectionView答案

【问题标题】：Collapsing UICollectionView折叠 UICollectionView
【发布时间】：2014-10-10 20:26:37
【问题描述】：

我正在与 UICollectionView 争吵以采用它来满足我的需求。

我正在尝试构建一个可折叠的标签云。所有元素都可以根据里面的文字动态改变大小。

显示集合时，我想只显示第一行并隐藏其余内容。如果内容多于一行，我想在第一行显示一个按钮作为最后一项 - 选择它后，我将更改集合大小以适应它的内容。

第一步：

点击后：

我能够使用这段代码达到预期的效果：

- (void) updateFrame
{
    if(self.showFull)
    {
        self.showMoreButton.hidden = YES;
        self.bottomConstrain.constant = 0;
        self.frame = CGRectMake(0, 0, self.collectionView.frame.size.width, self.collectionView.contentSize.height);
    }
    else
    {
        self.showMoreButton.hidden = NO;
        self.bottomConstrain.constant = self.originalConstrainValue;
        self.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    }
}

但在我的例子中，按钮完全放在集合之外：

我的头撞到了一堵砖墙上，如何让这个按钮成为集合视图的一部分。这是我第一次使用 UICollectionView 和 UICollectionViewFlowLayout，它太复杂了，我仍然无法理解最好的放置位置。

我的一个想法是在 UICollectionView 上播放一个按钮并将其放置在第一行的末尾 - 但我不知道如何从集合中获取第一行大小。使用这种方法，连续覆盖最后一项也会有问题。
我认为最好将此元素作为 UICollectionViewCell 放置，但我不知道如何处理 - 如何预测它的放置位置以及以后如何隐藏它。
李>

任何想法都将受到高度赞赏。当前模板项目在这里：

https://www.zipshare.com/download/eyJhcmNoaXZlSWQiOiJjNTg2MGFkNC1mYWYxLTRlMzItOTA1YS1hMWFjOGFkMjMzYjUiLCJlbWFpbCI6Imdya3J1a293c2tpQGdtYWlsLmNvbSJ9

【问题讨论】：

我还会注意到您正在编辑约束和框架。您应该选择其中一个。
这是有原因的——约束依赖于父视图框架——看看我分享的项目。我需要它来将我的收藏视图扩展到完整的视图。

标签： ios objective-c uicollectionview uicollectionviewlayout

【解决方案1】：

我建议将此按钮作为集合视图内的不同单元格。然后，在 collectionView:didSelectItemAtIndexPath: 中，您将检查是否选择了特殊项目并做出相应反应。我会让这个按钮始终是集合视图中的最后一项，这样你就知道它在哪里。当项目展开并显示所有内容时，请确保在按下此特殊单元格时翻转逻辑并压缩集合视图。

您需要保存一些状态才能执行此操作：

1.标签数组

集合视图是否展开

获得此信息后，您只需翻转位并重新加载集合视图部分。

【讨论】：

是的 okey - 但我怎样才能检测到我应该放置哪个元素？取决于之前的元素大小，它可以是第 2、第 3 或第 4。所以问题是，假设我已经为这个组件定义了宽度并为里面的所有元素定义了动态宽度，我该如何估计它的放置位置。
如果我只是将 is 作为最后一项，它在开始时将不可见，因为它会被剪裁。我最大的问题是计算该项目适合的位置 - 因此它将在第一行可见。剪裁部分和展开完成。
我认为您必须遍历并获取每个项目的大小（调用 sizeOfCellAtIndexPath 或者直接调用布局的 layoutAttributes）。然后，一旦您意识到特殊单元格可以完美匹配，请停止迭代并显示那么多单元格。
我试过这个： - (void) didMoveToSuperview { [super didMoveToSuperview]; UICollectionViewFlowLayout flowLayout = (UICollectionViewFlowLayout)self.collectionView.collectionViewLayout; for (int i = 0; i

【解决方案2】：

我已经设法通过这段代码实现了我想要的（感谢 atreat 的建议）。

我正在估计哪个元素不适合第一行，并将“更多”标签推入标签数组。还有一些逻辑可以确保更多按钮将适合此行中的最后一个元素，如果不是，它会被推送而不是这个元素。也许有些人会觉得它很有用。

    UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
        CGFloat collectionWidth = self.frame.size.width;
        CGFloat lastFittingItemRight = 0.0f;
        CGFloat spacingBetweenElements = flowLayout.minimumInteritemSpacing;
        CGFloat sectionInsetLeft = flowLayout.sectionInset.left;
        CGFloat sectionInsetRight = flowLayout.sectionInset.right;

        CGFloat rightEdge = sectionInsetLeft;

        for (int i = 0; i < [self collectionView:self.collectionView numberOfItemsInSection:0]; i++)
        {
            CGSize elementSize = [self collectionView:self.collectionView layout:flowLayout sizeForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
            CGFloat elementWidth = elementSize.width;
            rightEdge += elementWidth;

            if(rightEdge > collectionWidth - sectionInsetRight)
            {
                self.moreButtonIndexPath = [NSIndexPath indexPathForItem:i inSection:0];
                break;
            }

            lastFittingItemRight = rightEdge;
            rightEdge += spacingBetweenElements;
        }

        if(self.moreButtonIndexPath)
        {
            NSString* showMoreText = @"More";
            CGSize moreButtonSize = [self sizeForTagWithText:showMoreText];
            CGFloat rightEdgeMoreButton = lastFittingItemRight + spacingBetweenElements + moreButtonSize.width;

            NSInteger moreButtonIndex = self.moreButtonIndexPath.row;
            if(rightEdgeMoreButton > collectionWidth - sectionInsetRight)
            {
                moreButtonIndex = moreButtonIndex-1;
            }

            [self.tags insertObject:showMoreText atIndex:moreButtonIndex];
        }

【讨论】：