前言
具體代碼demo如下：
GitHub_OC版本:Demo具體代碼
GitHub_Swift版本:Demo具體代碼
碼雲_OC:Demo具體代碼
簡單設計collectionview 底色和根據section不同設置不同顏色，支持collection橫豎樣式、自定義偏移量、投影。
由於APP設計樣式的多樣性，很多時候我們需要用到一些特別的樣式，例如投影、圓角、某個空間下增加底色和投影等組合，這些看似很簡單的樣式，其實也需要花不少時間進行樣式的布局和調整等。
例如本人遇到需要在collectionView，根據section不同設置不同的底色，需要動態設置是否包含headerview，還需要設置投影等等，所以設計了這個可配置且動態更新的 collection 背景顏色 控件。可基本滿足各種要求。
設計思路
1、繼承UICollectionViewFlowLayout，重寫prepareLayout方法，在方法內計算每個section的大小，並根據用戶設置的sectiooninset，進行frame補充。
2、繼承UICollectionViewLayoutAttributes，增加底色、投影等參數。
3、在prepareLayout計算每個section的UICollectionViewLayoutAttributes並設置底色參數，並進行保存，
4、在layoutAttributesForElementsInRect進行rect判斷獲取attr。
5、在applyLayoutAttributes內機進行樣式設置。
效果圖：
支持類型：
1、collectionView section底色。
2、是否包含headerview。
3、是否包含footerview。
4、支持borderWidth、borderColor。
5、支持shadow投影。
6、支持collectionView，Vertical，Horizontal。
7、支持根據不同section分別設置不同底色顯示。
核心代碼
/// 計算默認不包含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;
//減去系統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'
//可選設置
open var isCalculateHeader : Bool = false // 是否計算header
open var isCalculateFooter : Bool = false // 是否計算footer
/// 設置底色偏移量(該設置只設置底色，與collectionview原sectioninsets區分）
/// - Parameter collectionView: collectionView description
/// - Parameter collectionViewLayout: collectionViewLayout description
/// - Parameter section: section description
func collectionView(_ collectionView : UICollectionView , layout collectionViewLayout:UICollectionViewLayout,borderEdgeInsertsForSectionAtIndex section : Int) -> UIEdgeInsets;
/// 設置底色相關
/// - 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）
並實現如下兩個方法：
#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;
}
效果如下：
具體代碼demo如下：
GitHub_OC版本:Demo具體代碼
GitHub_Swift版本:Demo具體代碼
碼雲_OC:Demo具體代碼 大家有空可star。
后續可能會單獨更新swift版本，敬請期待。
如有問題，可以直接提issues，或者發送郵件到kingjiajie@sina.com，或者直接回復。謝謝。