iOS 瀑布流之栅格布局

实现的栅格布局效果示意图

需求示意图

确定需求

由上面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的四等份,而每个模块的样式有小正方形(1:1)、大正方形(2:2)、横长方形(2:1)、纵长方形(1:2),动态的根据服务器下发模块样式绘制布局,可以横向滑动,限定为两行的高度。 注意:上面的示意宽高比是约等于,忽略了间距,计算的时候千万别忘了。

实现思路

由上需求分析可知,我们可以让后台每个模块下发width和height两个字段,字段的值是1或2就行了,然后我们就能根据宽高字段来确定模块的宽高了。现在宽高有了,我们怎么来绘制模块呢? 答案当然是用UICollectionView了,然后自定义流水布局UICollectionViewLayout,主要代码如下:计算记录每一个cell对应的布局属性。这个样式的栅格布局我已封装集成在WSLWaterFlowLayout 中,详情可以前往下载。

/** 返回indexPath位置cell对应的布局属性*/
- (CGRect)itemFrameOfHorizontalGridWaterFlow:(NSIndexPath *)indexPath{
    //collectionView的高度
    CGFloat collectionH = self.collectionView.frame.size.height;
    //设置布局属性item的frame
    CGFloat h = [self.delegate waterFlowLayout:self sizeForItemAtIndexPath:indexPath].height;
    CGFloat w = [self.delegate waterFlowLayout:self sizeForItemAtIndexPath:indexPath].width;
    
    CGFloat x = 0;
    CGFloat y = 0;
  
    //找出宽度最短的那一行
    NSInteger destRow = 0;
    CGFloat minRowWidth = [self.rowWidths[destRow] doubleValue];
    for (NSInteger i = 1; i < self.rowWidths.count; i++) {
        //取出第i行
        CGFloat rowWidth = [self.rowWidths[i] doubleValue];
        if (minRowWidth > rowWidth) {
            minRowWidth = rowWidth;
            destRow = i;
        }
    }
    
    y = destRow == 0 ? self.edgeInsets.top : self.edgeInsets.top + h + self.rowMargin;
    
    x = [self.rowWidths[destRow] doubleValue] == self.edgeInsets.left ? self.edgeInsets.left : [self.rowWidths[destRow] doubleValue] + self.columnMargin;
    //更新最短那行的宽度
    if (h >= collectionH - self.edgeInsets.bottom - self.edgeInsets.top) {
        x = [self.rowWidths[destRow] doubleValue] == self.edgeInsets.left ? self.edgeInsets.left : self.maxRowWidth + self.columnMargin;
        for (NSInteger i = 0; i < 2; i++) {
            self.rowWidths[i] = @(x + w);
        }
    }else{
        self.rowWidths[destRow] = @(x + w);
    }
    //记录最大宽度
    if (self.maxRowWidth < x + w) {
        self.maxRowWidth = x + w ;
    }
    return CGRectMake(x, y, w, h);
}

后台下发字段格式示意图

功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。

WSLWaterFlowLayout

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个小程序员的成长笔记

HTML5标签学习笔记

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="content-type" cont...

35260
来自专栏滕先生的博客

UINavigationController 导航控制器概念属性方法

30660
来自专栏ASP.NET MVC5 后台权限管理系统

FullCalendar 日历插件中文说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalend...

1.4K80
来自专栏MixLab科技+设计实验室

字符画生成01

14410
来自专栏青玉伏案

IOS开发之视图和视图控制器

        视图(View), 视图控制器(ViewController)是IOS开发UI部分比较重要的东西。在学习视图这一块的东西的时候,感觉和Java ...

18970
来自专栏MasiMaro 的技术博文

SDK平台三态按钮的实现

Windows平台提供了丰富的控件,但是在使用中我们不会使用它提供的默认风格,有时候需要对控件进行改写,让它展现出更友好的一面,这次主要是说明三态按钮的实现。

14740
来自专栏一“技”之长

iOS开发UINavigation系列四——导航控制器UINavigationController

        在前面的博客中,我么你介绍了UINavigationBar,UINavigationItem和UIToolBar,UINavigationCon...

11820
来自专栏進无尽的文章

UI篇-关于单个页面屏幕旋转要注意的问题

有时候,我们会需要在整个项目中,使某一个ViewController支持屏幕旋转,而其他的ViewController并不能自动旋转。这是一个很常见的需求,下面...

25020
来自专栏陈满iOS

iOS·为WKWebView实现夜间模式切换/网页背景颜色切换功能

42130
来自专栏進无尽的文章

实践-小效果 II

UIApplication *app = [UIApplication sharedApplication]; // 应用程序右上角数字 app.applica...

11010

扫码关注云+社区

领取腾讯云代金券