如何将背景图像添加到 UICollectionView 将滚动和缩放单元格

Question

我正在使用UICollectionView 构建马赛克视图。

我已将UICollectionViewFlowLayout 子类化为布局一个可以水平和垂直滚动 的固定网格。我还附上了一个UIPinchGestureRecognizer，以便集合可以缩放/缩放。

集合中的每个单元格都包含一个具有一定透明度的UIImage。我想添加一个可以随单元格滚动和缩放的背景图像。

我尝试了许多不同的解决方案。

• 使用colorWithPatternImage设置UICollectionView的背景颜色。 （不随内容滚动/调整大小）
• 将每个单元格上的背景图像视图设置为背景图像的相关裁剪部分。 （占用太多内存）

我一直在研究补充和装饰视图，但很难理解它。我想我需要使用 Supplementary 视图，因为背景中使用的图像会根据datasource 而改变。

我不明白的是如何只注册一个补充视图来跨越整个collectionview 的宽度和高度。它们似乎与indexPath 即每个单元格相关联。

Answer 1

不知道你有没有找到答案...！

您想要使用补充视图的方法是正确的。补充视图的索引路径不绑定到单元格，它有自己的索引路径。

然后在UICollectionViewFlowLayout 的子类中，您需要对一些方法进行子类化。 docs 还不错！

在layoutAttributesForElementsInRect: 方法中，您需要调用 super，然后为补充视图添加另一组布局属性。

然后在layoutAttributesForSupplementaryViewOfKind:atIndexPath: 方法中，将返回属性的大小设置为集合视图内容的大小，以便图像填充所有内容，而不仅仅是框架。您可能还想将 z 顺序设置为，以确保它位于单元格后面。请参阅UICollectionViewLayoutAttributes 的文档

@implementation CustomFlowLayout

    -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
    {
        NSMutableArray *attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];

        // Use your own index path and kind here
        UICollectionViewLayoutAttributes *backgroundLayoutAttributes = [self layoutAttributesForSupplementaryViewOfKind:@"background" atIndexPath:[NSIndexPath indexPathWithItem:0 inSection:0]];

        [attributes addObject:backgroundLayoutAttributes];

        return [attributes copy];
    }

    -(UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

        if ([kind isEqualToString:@"background"]) {
            UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:kind withIndexPath:indexPath];
            attrs.size = [self collectionViewContentSize];
            attrs.zIndex = -10;
            return attrs;
        } else {
            return [super layoutAttributesForSupplementaryViewOfKind:kind atIndexPath:indexPath];
        }
    }

@end

在您的集合视图数据源中，您需要此方法： collectionView:viewForSupplementaryElementOfKind:atIndexPath:

-(void)viewDidLoad
{
    [super viewDidLoad];

    // Setup your collection view
    UICollectionView *collectionView = [UICollectionView initWithFrame:self.view.bounds collectionViewLayout:[CustomFlowLayout new]];
    [collectionView registerClass:[BackgroundReusableView class] forSupplementaryViewOfKind:@"background" withReuseIdentifier:@"backgroundView"];
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if ([kind isEqualToString:@"background"]) {
        BackgroundReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"backgroundView" forIndexPath:indexPath];

        // Set extra info

        return view;
    } else {
        // Shouldn't be called
        return nil;
    }
}

希望所有这些都能让你走上正轨:)

Answer 2

在 Swift 5 中实现 CollectionView 中的自定义部分背景，

class CustomFlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var attributes = super.layoutAttributesForElements(in: rect)
        
        for section in 0..<collectionView!.numberOfSections{
            let backgroundLayoutAttributes:UICollectionViewLayoutAttributes = layoutAttributesForSupplementaryView(ofKind: "background", at: IndexPath(item: 0, section: section)) ?? UICollectionViewLayoutAttributes()
            attributes?.append(backgroundLayoutAttributes)
        }
        return attributes
    }
    
    override func layoutAttributesForSupplementaryView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        let attrs = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: elementKind, with: indexPath)
        if elementKind == "background"{
            attrs.size = collectionView!.contentSize
            
            //calculate frame here
            let items = collectionView!.numberOfItems(inSection: indexPath.section)
            let totalSectionHeight:CGFloat = CGFloat(items * 200)
            let cellAttr = collectionView!.layoutAttributesForItem(at: indexPath)
            attrs.frame = CGRect(x: 0, y: cellAttr!.frame.origin.y, width: collectionView!.frame.size.width, height: totalSectionHeight)
            
            attrs.zIndex = -10
            return attrs
        }else{
            return super.layoutAttributesForSupplementaryView(ofKind: elementKind, at: indexPath)
        }
    }
}

在您的 CollectionView 数据源中，

          override func viewDidLoad() {
            super.viewDidLoad()
    
            //register collection view here
           ...

            //setup flow layout & register supplementary view        
            let customFlowLayout = CustomFlowLayout()
            collectionView.collectionViewLayout = customFlowLayout
            collectionView.register(UINib(nibName: "BackgroundReusableView", bundle: nil), forSupplementaryViewOfKind: "background", withReuseIdentifier: "BackgroundReusableView")


}


    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
            if kind == "background"{
                let view = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "BackgroundReusableView", for: indexPath) as! BackgroundReusableView
                return view
            }
            return UICollectionReusableView()
        }