如何將背景圖像添加到將滾動和縮放的UICollectionView將單元格

我正在使用UICollectionView構建馬賽克視圖。如何將背景圖像添加到將滾動和縮放的UICollectionView將單元格

我已經分類UICollectionViewFlowLayout佈置固定的網格，可以滾動水平和垂直。我還附加了一個UIPinchGestureRecognizer，以便收集可以縮放/縮放。

集合中的每個單元格都包含具有某種透明度的UIImage。我想添加一個背景圖片，它將滾動和縮放單元格。

我試過了許多不同的解決方案。

設定使用colorWithPatternImage的UICollectionView的背景顏色。（不滾動/調整內容大小）
將每個單元格上的背景圖像視圖設置爲背景圖像的相關裁剪部分。（使用了太多的內存）

我一直在尋找到補充和裝飾意見，但努力讓我的頭周圍。我想我需要使用補充視圖，因爲後臺中使用的圖像將根據datasource而變化。

我不明白的是我如何註冊一個補充視圖來跨越整個collectionview的寬度和高度。它們似乎與每個細胞的indexPath有關。

來源

2014-01-16 th3hamburgler

一個潛在的解決方案上可能會將圖像置於集合視圖後面的滾動視圖中，並且每次用戶滾動集合視圖時，都會手動設置背景滾動視圖以匹配。 – nhgrif

謝謝@nhgrif，這是我考慮的一個解決方案，但似乎有點不雅。 – th3hamburgler

不知道你是否找到答案...！

您在正確的軌道上想要使用補充視圖。補充視圖的索引路徑不綁定到單元格，它具有自己的索引路徑。

然後在您的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; 
    } 
}

希望所有應該讓你在正確的軌道:)

來源

2014-02-18 21:44:12 Rich

感謝Rich的幫助，這太棒了我會給它一個機會！ – th3hamburgler

如何將背景圖像添加到將滾動和縮放的UICollectionView將單元格

回答

相關問題