簡單幾行代碼設置UIcollectionView的section底色


前言

具體代碼demo如下:
GitHub Demo具體代碼

碼雲 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內機進行樣式設置。

效果圖:

image

支持類型:

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

核心代碼

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

/// @paramframeframe description
/// @paramsectionInsetsectionInset description
- (CGRect)calculateDefaultFrameWithSectionFrame:(CGRect)frame sectionInset:(UIEdgeInsets)sectionInset{
    CGRectsectionFrame = frame;
    sectionFrame.origin.x-= sectionInset.left;
      sectionFrame.origin.y-= sectionInset.top;
      if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal) {
          sectionFrame.size.width+= sectionInset.left+ sectionInset.right;
          //減去系統adjustInset的top
          if(@available(iOS11.0, *)) {
              sectionFrame.size.height = self.collectionView.frame.size.height - self.collectionView.adjustedContentInset.top;
          }else{
              sectionFrame.size.height = self.collectionView.frame.size.height - fabs(self.collectionView.contentOffset.y)/*適配iOS11以下*/;
          }
      }else{
          sectionFrame.size.width = self.collectionView.frame.size.width;
          sectionFrame.size.height+= sectionInset.top+ sectionInset.bottom;
      }
    returnsectionFrame;
}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    NSMutableArray * attrs = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
    for (UICollectionViewLayoutAttributes *attr in self.decorationViewAttrs) {
            [attrsaddObject:attr];
    }
    return[attrscopy];
}

- (void)prepareLayout代碼有點多,就不貼出來了。下面有demo。

如何使用:

pod 'JJCollectionViewRoundFlowLayout'

 //可選設置
@property (assign, nonatomic)BOOLisCalculateHeader;//是否計算header
@property (assign, nonatomic)BOOLisCalculateFooter;//是否計算footer
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout borderEdgeInsertsForSectionAtIndex:(NSInteger)section;//設置底色偏移量(該設置只設置底色,與collectionview原sectioninsets區分)
- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout configModelForSectionAtIndex:(NSInteger)section;//設置底色相關

在collectionview頁面代碼上加入代理(JJCollectionViewDelegateRoundFlowLayout)

並實現如下兩個方法:

#pragma mark - JJCollectionViewDelegateRoundFlowLayout

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout borderEdgeInsertsForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(5.f, 12, 5, 12);
}

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout configModelForSectionAtIndex:(NSInteger)section{
    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc]init];
    model.backgroundColor = [UIColor colorWithRed:233/255.0 green:233/255.0 blue:233/255.0 alpha:1.0];
    model.cornerRadius = 10;
    return model;
}

效果如下:

image

具體代碼demo如下:
GitHub Demo具體代碼

碼雲 Demo具體代碼
大家有空可star。

后續可能會單獨更新swift版本,敬請期待。

如有問題,可以直接提issues,或者發送郵件到kingjiajie@sina.com,或者直接回復。謝謝。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM