分组的自定义流布局方法二

最新推荐文章于 2021-01-14 16:53:52 发布
最新推荐文章于 2021-01-14 16:53:52 发布
阅读量601 收藏
点赞数 1
分类专栏： iOS开发 文章标签： UICollectionView ios ios开发 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iOS_mark/article/details/53788321
版权

上次介绍了分组自定义流布局方法一，这次介绍方法二，这次的主要思路是在layout里直接解决。好了废话不多说，直接上代码。

.h文件中：

#import <UIKit/UIKit.h>


@protocol JYCollectionViewFlowLayoutDelegate <UICollectionViewDelegateFlowLayout>

@optional


-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout heightForHeaderInSection:(NSInteger)section;

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout heightForFooterInSection:(NSInteger)section;


@end

@interface JYCollectionViewFlowLayout :UICollectionViewFlowLayout

@property (nonatomic,weak) id<JYCollectionViewFlowLayoutDelegate> delegate;

@property (nonatomic,assign) CGFloat headerHeight;// default 0

@property (nonatomic,assign) CGFloat footerHeight;// default 0

@end

.m文件中：

#import "JYCollectionViewFlowLayout.h"

#define WIDTH self.collectionView.frame.size.width

@interface JYCollectionViewFlowLayout ()


@property(nonatomic,strong)NSArray <UICollectionViewLayoutAttributes *> *itemsAttributes;

@property (nonatomic,assign) CGFloat contentHeight;

@property (nonatomic,strong) NSMutableArray *supplementaryAttributes;

@end

@implementation JYCollectionViewFlowLayout

-(instancetype)init{

    if (self = [superinit]) {

        self.minimumLineSpacing =0;

        self.minimumInteritemSpacing =0;

        _supplementaryAttributes = [[NSMutableArrayalloc]init];

    }

    returnself;

}

-(void)prepareLayout{

    NSInteger countSection = [self.collectionViewnumberOfSections];

    

    //创建一个临时可变数组暂时盛放布局

    NSMutableArray *arr=[[NSMutableArrayalloc]init];

    for (NSInteger section =0; section < countSection; section++) {//

        NSInteger count = [self.collectionViewnumberOfItemsInSection:section];

    //这个属性，这里暂时用不到

//        CGFloat minimumInteritemSpacing = [self minimumInteritemSpacingForSection:section];

//        CGFloat minimumLineSpacing = [self minimumLineSpacingForSection:section];

        UIEdgeInsets sectionInset = [selfsectionInsetForSection:section];

        CGFloat headerHeight = [selfheaderHeightForSection:section];

        CGFloat footerHeight = [selffooterHeightForSection:section];

        

        self.contentHeight += sectionInset.top;

        NSMutableDictionary *supplementary = [[NSMutableDictionaryalloc] initWithCapacity:2];

        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributeslayoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithIndexPath:[NSIndexPathindexPathForItem:0inSection:section]];

        

        attributes.frame =CGRectMake(0,self.contentHeight,self.collectionView.frame.size.width, headerHeight);

        self.contentHeight += headerHeight;

        [arr addObject:attributes];

        [supplementary setObject:attributesforKey:UICollectionElementKindSectionHeader];

        

        

        for (NSInteger row =0; row<count; row++) {

            //创建布局属性

            UICollectionViewLayoutAttributes *att = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:[NSIndexPathindexPathForItem:rowinSection:section]];

            CGRect itemFrame;

            switch (count) {

                case1:

                    itemFrame = [selfimagesOfOneWith:row];

                    break;

                case2:

                    itemFrame = [selfimagesOfTwoWith:row];

                    break;

                case3:

                    itemFrame = [selfimagesOfThreeWith:row];

                    break;

                case4:

                    itemFrame = [selfimagesOfFourWith:row];

                    break;

                case5:

                    itemFrame = [selfimagesOfFiveWith:row];

                    break;

                case6:

                    itemFrame = [selfimagesOfSixWith:row];

                    break;

                case7:

                    itemFrame = [selfimagesOfSevenWith:row];

                    break;

                case8:

                    itemFrame = [selfimagesOfEightWith:row];

                    break;

                case9:

                    itemFrame = [selfimagesOfNineWith:row];

                    break;

                case10:

                    itemFrame = [selfimagesOfTenWith:row];

                    break;

                default:

                    break;

            }

            CGRect rect = itemFrame;

            att.frame =CGRectMake(rect.origin.x, rect.origin.y+self.contentHeight, rect.size.width, rect.size.height);

            [arr addObject:att];

        }

        switch (count) {

            case1:

                self.contentHeight+=WIDTH/2;

                break;

            case2:

                self.contentHeight+=WIDTH/2;

                break;

            case3:

                self.contentHeight+=WIDTH;

                break;

            case4:

                self.contentHeight+=WIDTH*5/6;

                break;

            case5:

                self.contentHeight+=WIDTH*7/6;

                break;

            case6:

                self.contentHeight+=WIDTH;

                break;

            case7:

                self.contentHeight+=WIDTH*7/6;

                break;

            case8:

                self.contentHeight+=WIDTH*7/6;

                break;

            case9:

                self.contentHeight+=WIDTH;

                break;

            case10:

                self.contentHeight+=WIDTH;

                break;

            default:

                break;

        }

        UICollectionViewLayoutAttributes *attributes1 = [UICollectionViewLayoutAttributeslayoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooterwithIndexPath:[NSIndexPathindexPathForItem:0inSection:section]];

        attributes1.frame =CGRectMake(0,self.contentHeight,self.collectionView.frame.size.width, footerHeight);

        self.contentHeight +=footerHeight;

        [arr addObject:attributes1];

        [supplementary setObject:attributes1forKey:UICollectionElementKindSectionFooter];

        [self.supplementaryAttributesaddObject:supplementary];

        self.contentHeight += sectionInset.bottom;

//        self.contentHeight += minimumLineSpacing;

    }


    self.itemsAttributes = [arrcopy];

}


- (CGSize)collectionViewContentSize

{

    returnCGSizeMake(self.collectionView.frame.size.width,self.contentHeight);

}


- (nullableNSArray<__kindofUICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

{

    NSPredicate *pred = [NSPredicatepredicateWithBlock:^BOOL(UICollectionViewLayoutAttributes *evaluatedObject,NSDictionary<NSString *,id> *_Nullable bindings) {

        returnCGRectIntersectsRect(rect, evaluatedObject.frame);

    }];

    NSArray *arr = [self.itemsAttributesfilteredArrayUsingPredicate:pred];

    return arr;

    returnself.itemsAttributes;

}

- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

    returnself.supplementaryAttributes[indexPath.section][kind];

}

#pragma mark-不同数量的布局

-(CGRect)imagesOfOneWith:(NSInteger)row{

    returnCGRectMake(0,0, WIDTH,WIDTH/2);

}



-(CGRect)imagesOfTwoWith:(NSInteger)row{

    CGFloat _w =WIDTH/2;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, _w, WIDTH/2);

            break;

        case1:

            itemFrame = CGRectMake(_w,0, _w, WIDTH/2);

            break;

        default:

            break;

    }

    return itemFrame;

}


-(CGRect)imagesOfThreeWith:(NSInteger)row{

    CGFloat bigH =WIDTH/2;

    CGFloat smallH = bigH;

    CGFloat smallW =WIDTH/2;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, WIDTH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(0, bigH, smallW, smallH);

            break;

        case2:

            itemFrame = CGRectMake(smallW, bigH, smallW, smallH);

            break;

        default:

            break;

    }

    return itemFrame;

}


-(CGRect)imagesOfFourWith:(NSInteger)row{

    CGFloat bigH =WIDTH/2;

    CGFloat smallW =WIDTH/3;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, WIDTH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(0, bigH, smallW, smallW);

            break;

        case2:

            itemFrame = CGRectMake(smallW, bigH, smallW, smallW);

            break;

        case3:

            itemFrame = CGRectMake(smallW*2, bigH, smallW, smallW);

            break;

        default:

            break;

    }

    return itemFrame;

}


-(CGRect)imagesOfFiveWith:(NSInteger)row{

    CGFloat rightW =WIDTH/3;

    CGFloat bigH = rightW *2;

    CGFloat downW =WIDTH/2;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, bigH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(bigH,0, rightW, rightW);

            break;

        case2:

            itemFrame = CGRectMake(bigH, rightW, rightW, rightW);

            break;

        case3:

            itemFrame = CGRectMake(0, bigH, downW, downW);

            break;

        case4:

            itemFrame = CGRectMake(downW, bigH, downW, downW);

            break;

        default:

            break;

    }

    return itemFrame;

}


-(CGRect)imagesOfSixWith:(NSInteger)row{

    CGFloat small =WIDTH/3;

    CGFloat bigH = small *2;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, bigH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(bigH,0, small, small);

            break;

        case2:

            itemFrame = CGRectMake(bigH, small, small, small);

            break;

        case3:

            itemFrame = CGRectMake(0, bigH, small, small);

            break;

        case4:

            itemFrame = CGRectMake(small, bigH, small, small);

            break;

        case5:

            itemFrame = CGRectMake(small*2, bigH, small, small);

            break;

        default:

            break;

    }

    return itemFrame;

}


-(CGRect)imagesOfSevenWith:(NSInteger)row{

    CGFloat bigH =WIDTH/2;

    CGFloat small =WIDTH/3;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, WIDTH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(0, bigH, small, small);

            break;

        case2:

            itemFrame = CGRectMake(small, bigH, small, small);

            break;

        case3:

            itemFrame = CGRectMake(small*2, bigH, small, small);

            break;

        case4:

            itemFrame = CGRectMake(0, bigH+small, small, small);

            break;

        case5:

            itemFrame = CGRectMake(small, bigH+small, small, small);

            break;

        case6:

            itemFrame = CGRectMake(small*2, bigH+small, small, small);

            break;

        default:

            break;

    }

    return itemFrame;

}


-(CGRect)imagesOfEightWith:(NSInteger)row{

    CGFloat bigH =WIDTH/2;

    CGFloat small =WIDTH/3;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, bigH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(bigH,0, bigH, bigH);

            break;

        case2:

            itemFrame = CGRectMake(0, bigH, small, small);

            break;

        case3:

            itemFrame = CGRectMake(small, bigH, small, small);

            break;

        case4:

            itemFrame = CGRectMake(small*2, bigH, small, small);

            break;

        case5:

            itemFrame = CGRectMake(0, bigH+small, small, small);

            break;

        case6:

            itemFrame = CGRectMake(small, bigH+small, small, small);

            break;

        case7:

            itemFrame = CGRectMake(small*2, bigH+small, small, small);

            break;

        default:

            break;

    }

    return itemFrame;

}


-(CGRect)imagesOfNineWith:(NSInteger)row{

    CGFloat bigH =WIDTH/2;

    CGFloat small =WIDTH/4;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, WIDTH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(0, bigH, small, small);

            break;

        case2:

            itemFrame = CGRectMake(small, bigH, small, small);

            break;

        case3:

            itemFrame = CGRectMake(small*2, bigH, small, small);

            break;

        case4:

            itemFrame = CGRectMake(small*3, bigH, small, small);

            break;

        case5:

            itemFrame = CGRectMake(0, bigH+small, small, small);

            break;

        case6:

            itemFrame = CGRectMake(small, bigH+small, small, small);

            break;

        case7:

            itemFrame = CGRectMake(small*2, bigH+small, small, small);

            break;

        case8:

            itemFrame = CGRectMake(small*3, bigH+small, small, small);

            break;

        default:

            break;

    }

    return itemFrame;

}

-(CGRect)imagesOfTenWith:(NSInteger)row{

    CGFloat bigH =WIDTH/2;

    CGFloat small =WIDTH/4;

    CGRect itemFrame;

    switch (row) {

        case0:

            itemFrame = CGRectMake(0,0, bigH, bigH);

            break;

        case1:

            itemFrame = CGRectMake(bigH,0, bigH, bigH);

            break;

        case2:

            itemFrame = CGRectMake(0, bigH, small, small);

            break;

        case3:

            itemFrame = CGRectMake(small, bigH, small, small);

            break;

        case4:

            itemFrame = CGRectMake(small*2, bigH, small, small);

            break;

        case5:

            itemFrame = CGRectMake(small*3, bigH, small, small);

            break;

        case6:

            itemFrame = CGRectMake(0, bigH+small, small, small);

            break;

        case7:

            itemFrame = CGRectMake(small, bigH+small, small, small);

            break;

        case8:

            itemFrame = CGRectMake(small*2, bigH+small, small, small);

            break;

        case9:

            itemFrame = CGRectMake(small*3, bigH+small, small, small);

            break;

        default:

            break;

    }

    return itemFrame;

}

#pragma mark -

- (CGFloat)headerHeightForSection:(NSInteger)section

{

    if ([self.delegaterespondsToSelector:@selector(collectionView:layout:heightForHeaderInSection:)]) {

        self.headerHeight = [self.delegatecollectionView:self.collectionViewlayout:selfheightForHeaderInSection:section];

    }

    

    returnself.headerHeight;

}

- (CGFloat)footerHeightForSection:(NSInteger)section

{

    if ([self.delegaterespondsToSelector:@selector(collectionView:layout:heightForFooterInSection:)]) {

        self.footerHeight = [self.delegatecollectionView:self.collectionViewlayout:selfheightForFooterInSection:section];

    }

    

    returnself.footerHeight;

}

- (UIEdgeInsets)sectionInsetForSection:(NSInteger)section

{

    if ([self.delegaterespondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)]) {

        self.sectionInset = [self.delegatecollectionView:self.collectionViewlayout:selfinsetForSectionAtIndex:section];

    }

    

    returnself.sectionInset;

}

#pragma mark -这个demo里面用不到，这里先先写上

- (CGFloat)minimumLineSpacingForSection:(NSInteger)section

{

    if ([self.delegaterespondsToSelector:@selector(collectionView:layout:minimumLineSpacingForSectionAtIndex:)]) {

        self.minimumLineSpacing = [self.delegatecollectionView:self.collectionViewlayout:selfminimumLineSpacingForSectionAtIndex:section];

    }

    

    returnself.minimumLineSpacing;

}

- (CGFloat)minimumInteritemSpacingForSection:(NSInteger)section

{

    if ([self.delegaterespondsToSelector:@selector(collectionView:layout:minimumInteritemSpacingForSectionAtIndex:)]) {

        self.minimumInteritemSpacing = [self.delegatecollectionView:self.collectionViewlayout:selfminimumInteritemSpacingForSectionAtIndex:section];

    }

    

    returnself.minimumInteritemSpacing;

}

@end

下面是效果图：


下面是下载地址：https://github.com/markwangjy/SectionCollectionView_two.git

谢谢大家阅读，我是ios_mark  qq：1124728522  欢迎大家多多批评指正。




wjymark
关注
专栏目录
UICollectionView的使用（补充）——大小间距
番薯大佬的专栏
12-10 727
1、行间距 示例代码 1）协议方法实现 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { retu...
vs2017Android设计窗口布局,自定义窗口布局 - Visual Studio | Microsoft Docs
weixin_28559803的博客
05-26 2315
在 Visual Studio 中自定义窗口布局03/02/2021本文内容在 Visual Studio 中，可以自定义窗口的位置、大小和行为，为各种开发工作流创建最佳窗口布局。 自定义布局时，IDE 会记住它。 例如，如果更改了“解决方案资源管理器”的停靠位置，然后关闭 Visual Studio，则下次打开 Visual Studio 时，即使你在另一台计算机上工作，“解决方案资源管理器”也...
QtFlowlayout Qt流式布局器
02-01
QtFlowlayout 流式布局器 源代码，可根据QWidget控件内的数量自动布局界面
ios UICollectionViewController集合视图（三）
ChasingDreamsCoder的博客
12-06 577
流式布局 由UICollectionViewFlowLayout类所提供的流式布局会在应用程序里创建出网格状的界面。他们有一些内置的属性，开发者既可以直接设置这些属性，也可以通过委托回调来提供属性的值。这些属性用来指定布局对象应该如何配置自己，才能把各条目适当的显示在屏幕上面。从最简单的角度来说，这些布局属性可以看作一份与几何特征有关的字典，他们描述了行间、缩进，以及条目之间的留白等特性。 1
UICollectionView基础
weixin_30482181的博客
10-09 122
初始化部分： UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init]; self.myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(20, 20, 250, 350) collectionView...
自定义UICollectionView布局
了凡
04-18 2727
记录ray上学习自定义UICollectionView布局学习笔记自定义UICollectionView布局UICollectionViewFlowLayoutUICollectionViewFlowLayout是UICollectionView的默认的布局方式UICollectionViewDelegateFlowLayout代理方法1.func collectionView(_:layout:s
swift-自定义瀑布流可添加自定义header和footer
08-15
在Swift编程中，自定义瀑布流布局是一种常见的UI设计，特别是在构建类似电商应用的商品展示页面时。瀑布流布局，也称为“Pinterest布局”，因为它模仿了Pinterest网站的视觉效果，其中每个元素都按照不同高度排列，...
Android版的瀑布流布局
04-13
在Android中，实现瀑布流布局有多种方法： 1. 使用第三方库：最常用的是`StaggeredGridLayoutManager`，它是Android Support Library的一部分。这个布局管理器支持不规则的网格布局，可以轻松创建瀑布流效果。通过...
CollectionVIew瀑布流布局
06-30
【UICollectionView瀑布流布局】 在iOS应用开发中，UICollectionView是一个强大的组件，它允许...通过自定义UICollectionViewFlowLayout和适配数据源方法，我们可以灵活地构建出适应性强、视觉效果出色的瀑布流布局。
Android 自定义ListView和RecycleView实现多级树功能
09-22
2. RecyclerView：RecyclerView是Android Lollipop引入的新组件，它继承了ListView的优点并增加了更多的灵活性，如网格布局、瀑布流布局等，并且提供了更强大的布局管理器和动画支持。 二、实现多级树结构的关键...
仿小米，IOS桌面图标拖拽分组效果源码，已在实际项目上应用，很稳定
07-13
这是仿IOS，仿小米桌面图标拖动分组的源码，分组后以文件夹形式展示，已经在实际应用上应用，是很好的源码，可以直接使用
【IOS开发基础系列】UICollectionView专题
junbaozi的专栏
03-22 98
1 定义1.1 什么是UICollectionViewUICollectionView是一种新的数据展示方式，简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最简单的形式)。最简单的UICollectionView就是一个GridView，可以以多列的方式将数据进行展示。标准的UICollectionView包含...
CollectionView Gird布局及基本使用
江苏小白龙
08-05 203
CollectionViewOS6之后出现的视图控件，与UITableView类似,最大的特点是可以对cell实现灵活的布局 一UICollectionViewFlowLayout 介绍 介绍：UICollectionViewFlowLayout系统提供的，能够实现cell的网格布局 UICollectionViewFlowLayout的父类是UICollectionViewLayout，UICo...
iOS开发实战——CollectionView中cell的间距设置
乞力马扎罗的雪CYF的博客
06-21 2万+
我在前面多篇博客中详细讲解了CollectionView的使用与自定义CollectionViewCell的设计，可以参考《iOS开发实战——CollectionView点击事件与键盘隐藏结合案例》《iOS高级开发——CollectionView修改cell的文本及模型重构》这几篇博客。但是今天还是需要来讲讲CollectionView实现中的一个小小的坑，这是我最近在网上浏览时发现很多开发者经常
多分组多列的不规则布局实现原理(复杂首页布局)
die_word的博客
07-18 1177
在常见的UI布局中，往往会含有广告栏banner，按钮，商品信息展示等等元素。例如如下的布局格式 其解决方式优先想到的是采用瀑布流自定义布局去实现类似的布局格式 自定义CollectionViewLayout 自定义CollectionViewLayout需要去实现如下的基础方法 1、prepareLayout预先布局方法 2、collectionViewContentSize 返回...
IOS UICollectionView 分组使用
夏天的风轻轻吹过～～
01-16 3984
需要实现如下图的效果： 写个简单的demo，数据是本地的，不是从网络获取的～～#import "MyCell.h"#define BgColor [UIColor colorWithRed:242/255.0 green:243/255.0 blue:248/255.0 alpha:1] @interface MyCollectionViewLayout : UICollectionViewFlo
uicollectionView
lvchaman的专栏
02-29 442
- (UICollectionView *)collectionView{     if (_collectionView == nil) {         UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];         _collectionView = [[UICollect
oc 协议 回调 静态成员_iOS-UICollectionViewController协议及回调
weixin_29587591的博客
01-14 197
一.UICollectionViewDataSource1.返回Section数量的方法- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {return 5;}2.返回每个Section中Cell的数量的方法- (NSInteger)collectionView: (UICollect...
iOS UICollectionView简单使用
热门推荐
程序猿
08-27 12万+
NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionView : UIScrollView
Bootstrap CSS布局：深度解析表单设计
"Bootstrap CSS布局之表单" Bootstrap是一个流行的前端框架，用于快速构建响应式且易用的网站。在Bootstrap中，表单是构建交互式网页的重要组成部分，提供了多种样式选项来适应不同设计需求。本节将详细介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值