如何将背景图像添加到 UICollectionView 将滚动和缩放单元格 [英] How to add a background image to UICollectionView that will scroll and zoom will cells

问题描述

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

I'm building a mosaic view using UICollectionView.

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

I have subclassed UICollectionViewFlowLayout to layout a fixed grid that can be scrolled both horizontally and vertically. I have also attached a UIPinchGestureRecognizer so the collection can scaled/zoomed.

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

Each cell in the collection contains a UIImage with some transparency. I want to add a background image that will scroll and zoom with the cells.

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

I've attempted a number of different solutions.

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

• setting the background color of the UICollectionView using colorWithPatternImage. (does not scroll/resize with content)
• setting a background image view on each cell to the relevant cropped portion of the background image. (uses far too much memory)

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

I've been looking into Supplementary and Decoration Views but struggling to get my head around it. I think I need to use Supplementary views as the image used in the background will change depending on the datasource.

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

What I don't understand is how I can register just one Supplementary View to span the width and height of the whole collectionview. They seem to be tied to an indexPath i.e each cell.

推荐答案

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

Don't know if you found an answer...!

想要使用补充视图，您走在正确的轨道上.补充视图的索引路径不绑定到单元格，它有自己的索引路径.

You're on the right track with wanting to use supplementary views. The index path of the supplementary view isn't tied to a cell, it has its own index path.

然后在您的 UICollectionViewFlowLayout 的子类中，您需要对一些方法进行子类化.文档 很不错！

Then in your subclass of UICollectionViewFlowLayout you need to subclass a few methods. The docs are pretty good!

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

In the layoutAttributesForElementsInRect: method you'll need to call super and then add another set of layout attributes for your supplementary view.

然后在 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:

In your collection view data source you need this method: 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;
    }
}

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

Hopefully all that should get you on the right track :)

这篇关于如何将背景图像添加到 UICollectionView 将滚动和缩放单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！