简单几行代码设置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内机进行样式设置。

效果图:

支持类型:

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;
}

效果如下:

具体代码demo如下:
GitHub Demo具体代码

码云 Demo具体代码
大家有空可star。

后续可能会单独更新swift版本,敬请期待。

如有问题,可以直接提issues,或者发送邮件到[email protected],或者直接回复。谢谢。

原文地址:https://www.cnblogs.com/kingjiajie/p/11809802.html

时间: 2024-10-09 09:20:45

简单几行代码设置UIcollectionView的section底色的相关文章

简单几行代码实现瀑布流

<!DOCTYPE html> <html> <!-- author : wsj aim : bky date : 2019-12 bug : no --> <body> <style> .father{ width: 100%;    box-sizing: border-box;     column-count: 2;    column-gap:15rpx;    padding: 0 20rpx; } .list{ box-sizing

jquery轮播图详解,40行代码即可简单解决。

我在两个月以前没有接触过html,css,jquery,javascript.今天我却在这里分享一篇技术贴,可能在技术大牛面前我的文章漏洞百出,也请斧正. 可以看出来,无论是div+css布局还是jquery其实真的很简单,只要不停的练习就会有很大进步.每天150行代码,会帮助我们走的更远.对于编程对于脚本语言,我们这样的学生娃没有和比人一样初中,高中就开始研究,要想走在时代的前沿需要怎样的努力和毅力,是我们一类人需要思考的方向. 下面解释下焦点图,焦点图使用范围非常广,banner和anima

100行代码实现最简单的基于FFMPEG+SDL的视频播放器(SDL1.x)【转】

转自:http://blog.csdn.net/leixiaohua1020/article/details/8652605 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 简介 流程图 simplest_ffmpeg_player标准版代码 simplest_ffmpeg_player_suSU版代码 结果 FFMPEG相关学习资料 补充问题 ===================================================== 最简单的基于FFmp

用JavaCV改写“100行代码实现最简单的基于FFMPEG+SDL的视频播放器 ”

FFMPEG的文档少,JavaCV的文档就更少了.从网上找到这篇100行代码实现最简单的基于FFMPEG+SDL的视频播放器.地址是http://blog.csdn.net/leixiaohua1020/article/details/8652605. 用JavaCV重新实现并使用opencv_highgui进行显示. 1 import com.googlecode.javacpp.IntPointer; 2 import com.googlecode.javacpp.Pointer; 3 im

C#程序代码行号设置

C#程序代码行号设置 C#程序代码行号设置

不到100行代码实现一个简单的推荐系统

似乎咱的产品七,八年前就想做个推荐系统的,就是类似根据用户的喜好,自动的找到用户喜欢的电影或者节目,给用户做推荐.可是这么多年过去了,不知道是领导忘记了还是怎么了,连个影子还没见到. 而市场上各种产品的都有了推荐系统了.比如常见的各种购物网站京东,亚马逊,淘宝之类的商品推荐,视频网站优酷的的类似影片推荐,豆瓣音乐的音乐推荐...... 一个好的推荐系统推荐的精度必然很高,能够真的发现用户的潜在需求或喜好,提高购物网詀的销量,让视频网站发现用户喜欢的收费电影... 可是要实现一个高精度的推荐系统不

Python实现3行代码解简单的一元一次方程

Python实现3行代码解简单的一元一次方程 class Solution(object): def exec(self, equation): vars = None eqList = list(equation) denth = 0 for i,each in enumerate(equation): if each in "abcdefghijklmnopqrstuvwxyz": vars = each if i == 0: continue if equation[i-1] i

不写1行代码,在Mac上体验ASP.NET 5的最简单方法

昨天微软发布了ASP.NET 5 beta2(详见ASP.NET 5 Beta2 发布),对ASP.NET 5的好奇心又被激发了. 今天下午在Mac OS X上体验了一下ASP.NET 5 beta2,而且借助Yeoman generators for ASP.NET 5,可以不用写1行代码,连project.json都不用写.有一种Mac下用Visual Studio的感觉. 下面分享一下实际的操作步骤: 1. 安装OS X的包包管理器:Homebrew 2. 将ASP.NET 5在githu

简单手机端头部设置 及css代码

<html> <head> <title>今日报表</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> </he