前言

具體代碼demo如下：

GitHub_OC版本:Demo具體代碼
GitHub_Swift版本:Demo具體代碼
碼云 Demo具體代碼

更新日志

V2.4.0 - 增加對背景圖的點擊事件處理和控制，通過代理返回點擊的背景圖的IndexPath
V2.3.2 - 支持xib、storyboard 喚起，能夠默認開啟背景圖開關(guān)設(shè)置
V2.3.0 - 新增對Cell的對齊模式進行設(shè)置，支持（右對齊和首個Cell右側(cè)開始）
V2.2.0 - 新增對Cell的對齊模式進行設(shè)置，支持（右對齊）
V2.1.0 - 新增對Cell的對齊模式進行設(shè)置，支持（居中對齊）
2020-01-07 更新pod 1.1.0 更新支持根據(jù)section設(shè)置是否底色計算headeview、footerview。

??簡單設(shè)計collectionview 底色和根據(jù)section不同設(shè)置不同顏色，支持collection橫豎樣式、自定義偏移量、投影。
??由于APP設(shè)計樣式的多樣性，很多時候我們需要用到一些特別的樣式，例如投影、圓角、某個空間下增加底色和投影等組合，這些看似很簡單的樣式，其實也需要花不少時間進行樣式的布局和調(diào)整等。
??例如本人遇到需要在collectionView，根據(jù)section不同設(shè)置不同的底色，需要動態(tài)設(shè)置是否包含headerview，還需要設(shè)置投影等等，所以設(shè)計了這個可配置且動態(tài)更新的 collection 背景顏色 控件?？苫緷M足各種要求。

設(shè)計思路

1、繼承UICollectionViewFlowLayout，重寫prepareLayout方法，在方法內(nèi)計算每個section的大小，并根據(jù)用戶設(shè)置的sectiooninset，進行frame補充。
2、繼承UICollectionViewLayoutAttributes，增加底色、投影等參數(shù)。
3、在prepareLayout計算每個section的UICollectionViewLayoutAttributes并設(shè)置底色參數(shù)，并進行保存，
4、在layoutAttributesForElementsInRect進行rect判斷獲取attr。
5、在applyLayoutAttributes內(nèi)機進行樣式設(shè)置。

效果圖：

image

支持類型：

1、collectionView section底色。
2、是否包含headerview。
3、是否包含footerview。
4、支持borderWidth、borderColor。
5、支持shadow投影。
6、支持collectionView，Vertical，Horizontal。
7、支持根據(jù)不同section分別設(shè)置不同底色顯示。

核心代碼

/// 計算默認不包含headerview和footerview的背景大小

/// @paramframeframe description
/// @paramsectionInsetsectionInset description
//MARK: 默認section無偏移大小
extension JJCollectionViewRoundFlowLayout_Swift{
    func calculateDefaultFrameWithSectionFrame(_ frame:CGRect ,sectionInset:UIEdgeInsets) -> CGRect{
        var sectionFrame = frame;
        sectionFrame.origin.x -= sectionInset.left;
        sectionFrame.origin.y -= sectionInset.top;
        if (self.scrollDirection == UICollectionView.ScrollDirection.horizontal) {
            sectionFrame.size.width += sectionInset.left + sectionInset.right;
            //減去系統(tǒng)adjustInset的top
            if #available(iOS 11, *) {
                sectionFrame.size.height = self.collectionView!.frame.size.height - self.collectionView!.adjustedContentInset.top;
            } else {
                sectionFrame.size.height = self.collectionView!.frame.size.height - abs(self.collectionView!.contentOffset.y)/*適配iOS11以下*/;
            }
        }else{
            sectionFrame.size.width = self.collectionView!.frame.size.width;
            sectionFrame.size.height += sectionInset.top + sectionInset.bottom;
        }
        return sectionFrame;
    }
}

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    var attrs = super.layoutAttributesForElements(in: rect) ?? []
    for attr in self.decorationViewAttrs {
        attrs.append(attr)
    }
    return attrs
}

  override public func prepare() 代碼有點多，就不貼出來了。下面有demo。

如何使用：

pod?'JJCollectionViewRoundFlowLayout_Swift'

//可選設(shè)置
open var isCalculateHeader : Bool = false    // 是否計算header
open var isCalculateFooter : Bool = false    // 是否計算footer

/// 設(shè)置底色偏移量(該設(shè)置只設(shè)置底色，與collectionview原sectioninsets區(qū)分）
/// - Parameter collectionView: collectionView description
/// - Parameter collectionViewLayout: collectionViewLayout description
/// - Parameter section: section description
func collectionView(_ collectionView : UICollectionView , layout collectionViewLayout:UICollectionViewLayout,borderEdgeInsertsForSectionAtIndex section : Int) -> UIEdgeInsets;

/// 設(shè)置底色相關(guān)
/// - Parameter collectionView: collectionView description
/// - Parameter collectionViewLayout: collectionViewLayout description
/// - Parameter section: section description
func collectionView(_ collectionView : UICollectionView, layout collectionViewLayout : UICollectionViewLayout , configModelForSectionAtIndex section : Int ) -> JJCollectionViewRoundConfigModel_Swift;

在collectionview頁面代碼上加入代理（JJCollectionViewDelegateRoundFlowLayout）

并實現(xiàn)如下兩個方法：

#pragma mark - JJCollectionViewDelegateRoundFlowLayout

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, borderEdgeInsertsForSectionAtIndex section: Int) -> UIEdgeInsets {
    return UIEdgeInsets.init(top: 5, left: 12, bottom: 5, right: 12)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, configModelForSectionAtIndex section: Int) -> JJCollectionViewRoundConfigModel_Swift {
    let model = JJCollectionViewRoundConfigModel_Swift.init();
    
    model.backgroundColor = UIColor.init(red: 233/255.0, green:233/255.0 ,blue:233/255.0,alpha:1.0)
    model.cornerRadius = 10;
    return model;
}

效果如下：

image

具體代碼demo如下：

GitHub_OC版本:Demo具體代碼
GitHub_Swift版本:Demo具體代碼
碼云 Demo具體代碼 大家有空可star。

后續(xù)可能會單獨更新swift版本，敬請期待。

如有問題，可以直接提issues，或者發(fā)送郵件到kingjiajie@sina.com，或者直接回復(fù)。謝謝。