title: Change color of individual section in UICollectionView
body: <p>My question for today that I have been trying to figure out for a while but what is really buggy or doesn't work because I'm unclear on how to implement it is how to change the color of the individual sections in a collection view. For example, I would like sections 0-2 to be orange, 3-5 to be blue, 6-8 to be pink, and 9-11 to be green. </p>
  
  <p>I have tried to implement the code in these two repositories. The <a href="https://gist.github.com/yanpanpan/23648e1fadd773466a001a3529d6fb46" rel="nofollow noreferrer">first</a> one after implementing worked somewhat but is very buggy when I try to scroll the collection view, but I think I didn't implement it correctly. The <a href="https://github.com/strawberrycode/SCSectionBackground" rel="nofollow noreferrer">second</a> one after trying to implement it, nothing showed up so I don't think I did that correctly either. My goal is to hard-set the color for each section. </p>
  
  <p>Here is the code for creating the collection view: </p>
  
  <pre><code>let friendsCollectionView: UICollectionView = {
          let layout = UICollectionViewFlowLayout()
          //also tried let layout = SectionBackgroundFlowLayout() and let layout = ColorFlowLayout()
          layout.scrollDirection = .horizontal
          let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
          cv.translatesAutoresizingMaskIntoConstraints = false
          cv.register(FriendsCell.self, forCellWithReuseIdentifier: "cell")
          cv.layer.cornerRadius = 10
          cv.isPagingEnabled = true
          cv.showsHorizontalScrollIndicator = false
          return cv
         }()
  </code></pre>
  
  <p>This is an addition that I pulled from the example repo of the <a href="https://github.com/strawberrycode/SCSectionBackground/tree/master/SCSectionBackground" rel="nofollow noreferrer">second</a> repo: </p>
  
  <pre><code>class ColorFlowLayout: UICollectionViewFlowLayout {
  
  // MARK: prepareLayout
  
  override func prepare() {
      super.prepare()
  
  //        minimumLineSpacing = 8.0
  //        minimumInteritemSpacing = 8.0
  //        sectionInset = UIEdgeInsetsMake(8, 8, 8, 8)
  //
  //        let width = (UIScreen.main.bounds.width / 3) - 2 * 8.0
  //        itemSize = CGSizeMake(width, 100)
  
      //register(SCSBCollectionReusableView.self, forDecorationViewOfKind: "sectionBackground")
  
      register(UICollectionView.self, forDecorationViewOfKind: "sectionBackground")
  }
  
  // MARK: layoutAttributesForElementsInRect
  override func layoutAttributesForElements(in rect: CGRect) -&gt; [UICollectionViewLayoutAttributes]? {
      let attributes = super.layoutAttributesForElements(in: rect)
      var allAttributes = [UICollectionViewLayoutAttributes]()
  
      if let attributes = attributes {
  
          for attr in attributes {
              // Look for the first item in a row
              // You can also calculate it by item (remove the second check in the if below and change the tmpWidth and frame origin
              if (attr.representedElementCategory == UICollectionElementCategory.cell &amp;&amp; attr.frame.origin.x == self.sectionInset.left) {
  
                  // Create decoration attributes
                  let decorationAttributes = SCSBCollectionViewLayoutAttributes(forDecorationViewOfKind: "sectionBackground", with: attr.indexPath)
                  // Set the color(s)
                  if (attr.indexPath.section % 2 == 0) {
                      decorationAttributes.color = UIColor.orange //Just two different colors to test at the moment
                  } else {
                      decorationAttributes.color = UIColor.blue
                  }
  
                  // Make the decoration view span the entire row
                  let tmpWidth = self.collectionView!.contentSize.width
                  let tmpHeight = self.collectionView!.contentSize.height // or attributes.frame.size.height instead of itemSize.height if dynamic or recalculated
  
  
                  decorationAttributes.frame = CGRect(x: 0, y: attr.frame.origin.y - self.sectionInset.top, width: tmpWidth, height: tmpHeight)
  
                  // Set the zIndex to be behind the item
                  decorationAttributes.zIndex = attr.zIndex - 1
  
                  // Add the attribute to the list
                  allAttributes.append(decorationAttributes)
              }
          }
          // Combine the items and decorations arrays
          allAttributes.append(contentsOf: attributes)
      }
  
      return allAttributes
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Let me know if you have any questions or if I could provide any more information. All help is much appreciated!</p>