iOS开发:瀑布流效果的实现(使用UICollectionView)

简介:

iOS开发:瀑布流的实现

图片描述

效果的实现,主要是对UICollectionViewLayout进行封装,我的.h文件中:

#import <UIKit/UIKit.h>
@class CustomeViewLayout;
@protocol CustomViewLayoutDelegate <NSObject>

/**
 计算item高度的代理方法,将item的高度与indexPath传给外界
 */
- (CGFloat)customFallLayout:(CustomeViewLayout *)customFallLayout itemHeightForWidth:(CGFloat)itemWidth atIndexPath:(NSIndexPath *)indexPath;

@end

//实现了瀑布流功能,但是不能添加头部和底部视图,如项目中有添加头部或底部视图的需求,请慎用!!!
@interface CustomeViewLayout : UICollectionViewLayout

/**
 总列数,默认是2
 */
@property (nonatomic, assign) NSInteger columnCount;

/**
 列间距,默认是0
 */
@property (nonatomic, assign) float columnSpacing;

/**
 行间距,默认是0
 */
@property (nonatomic, assign) float rowSpacing;

/**
 section与CollectionView的间距,上、左、下、右,默认是(0, 0, 0, 0)
 */
@property (nonatomic, assign) UIEdgeInsets sectionInset;

/**
 同时设置列间距、行间距、sectionInset

 @param columnSpacing 列间距
 @param rowSpacing 行间距
 @param sectionInset 设置上、左、下、右的距离
 */
- (void)setColumnSpacing:(float)columnSpacing rowSpacing:(float)rowSpacing sectionInset:(UIEdgeInsets)sectionInset;

#pragma mark ====== 代理方法、block二选其一 ======
/**
 一下代理属性与block属性二选其一,用来设置每一个item的高度
 会将item的高度与indexPath传递给外界
 如果两个都设置,block的优先级高,即代理无效
 */

/**
 代理方法,用来计算item的高度
 */
@property (nonatomic, assign) id<CustomViewLayoutDelegate> delegate;

/**
 计算item高度的block,将item的高度与indexPath传递给外界
 */
@property (nonatomic, strong) CGFloat(^itemHeightBlock)(CGFloat itemHeight, NSIndexPath *indexPath);

#pragma mark ====== 构造方法 ======
+ (instancetype)customFallLayoutWithColumnCount:(float)columnCount;
- (instancetype)initWithColumCount:(float)columnCount;

@end

上面的文件主要是给外界提供一个接口,可以设置行数、行间距、列间距

实现的文件中,主要是找到UICollectionView中,最短的列数的最大Y值,把后面需要添加的item添加到这一列的下面,主要代码如下:

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    //根据indexPath获取item的attributes
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    //获取collectionView的宽度
    CGFloat collectionViewWidth = self.collectionView.frame.size.width;
    
    //item的宽度 = (collectionView的宽度 - 内边距与列间距) / 列数
    CGFloat itemWidth = (collectionViewWidth - self.sectionInset.left - self.sectionInset.right - (self.columnCount - 1) * self.columnSpacing) / self.columnCount;
    
    CGFloat itemHeight = 0;
    //获取item的高度,由外界计算得到
    if (self.itemHeightBlock) {
        itemHeight = self.itemHeightBlock(itemWidth, indexPath);
    } else {
        if ([self.delegate respondsToSelector:@selector(customFallLayout:itemHeightForWidth:atIndexPath:)]) {
            itemHeight = [self.delegate customFallLayout:self itemHeightForWidth:itemWidth atIndexPath:indexPath];
        }
    }
    
    //找出最短的那一列
    __block NSNumber *minIndex = @0;
    [self.maxYDic enumerateKeysAndObjectsUsingBlock:^(NSNumber *key, NSNumber *obj, BOOL *stop) {
        if ([self.maxYDic[minIndex] floatValue] > obj.floatValue) {
            minIndex = key;
        }
    }];
    
    //根据最短列的列数计算item的x值
    CGFloat itemX = self.sectionInset.left + (self.columnSpacing + itemWidth) * minIndex.integerValue;
    
    //item的y值 = 最短列的最大y值 + 行间距
    CGFloat itemY = [self.maxYDic[minIndex] floatValue] + self.rowSpacing;
    
    //设置attributes的frame
    attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);
    
    //更新字典中的最大y值
    self.maxYDic[minIndex] = @(CGRectGetMaxY(attributes.frame));
    
    return attributes;
}

具体实现请看demo,
demo下载地址

相关文章
|
9天前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
28 9
|
8天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
6天前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
9天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
|
12天前
|
存储 数据可视化 Swift
探索iOS开发之旅:从新手到专家
【10月更文挑战第33天】在这篇文章中,我们将一起踏上一场激动人心的iOS开发之旅。无论你是刚刚入门的新手,还是已经有一定经验的开发者,这篇文章都将为你提供宝贵的知识和技能。我们将从基础的iOS开发概念开始,逐步深入到更复杂的主题,如用户界面设计、数据存储和网络编程等。通过阅读这篇文章,你将获得成为一名优秀iOS开发者所需的全面技能和知识。让我们一起开始吧!
|
物联网 Android开发 iOS开发
iOS开发 - 蓝牙学习的总结
iOS开发 - 蓝牙学习的总结
185 0
|
iOS开发
IOS开发---菜鸟学习之路--(九)-利用PullingRefreshTableView实现下拉刷新
本章主要讲解如何利用PullingRefreshTableView实现下拉(上拉)刷新的操作  PullingRefreshTableView 实现上下拉刷新的例子百度有很多,大家可以自己搜索下,先看下那些例子(一般搜索过来的都是一样的大家反正先把那部分内容先了解一下,然后再看本文档比较好。
883 0
|
iOS开发 Android开发 存储
IOS开发---菜鸟学习之路--(十)-实现新闻详细信息浏览页面
前面已经将了上下拉刷新 实现了上下拉刷新后我们的第一级界面就做好,接下来我们就需要实现 新闻详细信息浏览了 我个人认为一般实现新闻详细页面的方法有两种(主要是数据源的不同导致了方法的不同) 第一种是本身新闻就是一个链接地址,同时是已经处理好的适应手机浏览的网页 对于这种类型的数据源,我们直接在页面中放一个WebView控件,然后将URL传递过去就好了 另一种则是普通的包含标题、时间、内容、图片等数据结构的新闻内容(我们要实现的也是这种新闻,因为实现了这种之后, 我们就可以实现任何自定义的详细信息的页面了。
883 0
|
iOS开发
IOS开发---菜鸟学习之路--(十一)-使新闻内容自适应高度
上一章当中,我们留了一个小BUG。 其实就是浏览新闻的时候,如果文字内容过长的花,UITextView 会有个下拉框,而最底层的UIScrollView也有个下拉框,那么在使用的时候就会非常的不爽。 而这章呢我们就要解决这样一个问题了 其实并不是很复杂的修改方法 我们只需要将viewDidL...
902 0
|
iOS开发
IOS开发---菜鸟学习之路--(十二)-利用ASIHTTPRequest进行异步获取数据
想要实现异步获取的话我这边了解过来有两个非常简单的方式 一个是利用ASIHTTPRequest来实现异步获取数据 另一个则是利用MBProgressHUD来实现异步获取数据 本章就先来讲解如何利用ASIHTTPRequest类来实现异步数据获取 首先大家需要百度一下ASIHTTPRequest 然后看一下百度里搜到的那些文章(不要问具体是那篇,因为我发现百度搜过来的东西全部都是一样的,所以。
1009 0