不规则排列的图片布局

一直在500px上看照片,发照片。以前看它的首页图片展示就只是觉得好看,洋气,也没想过自己在iOS上实现一下。昨天不知怎么的就开始想其中的算法了,现在我把思考的过程在这里贴出来分享一下,如果你有更好的算法欢迎探讨。

最终我做出的效果是这样的:

垂直滚动

水平滚动

算法总体思路

先说一下总体上的思路。既然图片的大小、位置各不一样,我们很自然地会想到需要算出每个item的frame,然后把这些frame赋值给当前item的UICollectionViewLayoutAttributes。

自定义UICollectionViewLayout的关键两步是先后重载下面两个方法:

  - (void)prepareLayout; 

  - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect; 

所以我们的思路是在- (void)prepareLayout;方法中算出所有item的frame,并赋值给当前item的 UICollectionViewLayoutAttributes。用图片的形式比较直观:

接下来问题就化归到了如何求每个item的frame。

这里我们抽象出一个 的概念:

除此之外,我们还需要维护一个存储高度的数组COLUMNSHEIGHTS。数组中有n个元素,n表示所有列数,如上图,n = 3。缓存的值表示当前列的高度,上图的例子中,COLUMNSHEIGHTS = [104,123,89]。

然后我们把item逐个放入列中,以这样的规则:从左到右,item优先放入COLUMNSHEIGHTS中最短的列。

打个比方,下一个item就应该放入最短的列,也就是第三列:

以此规则,循环下去,直到所有item都放置完毕。

细节

item.frame.origin:

用自然语言描述,

坐标x应该是这样的:(最短列的编号-1)x 列宽

坐标y应该是这样的:从COLUMNSHEIGHTS中取出最短列对应的高度

所以我们需要一个算法来找出当前COLUMNSHEIGHTS中的最短的列,最直接的方法就是0(n)时间复杂度的循环比较,这里还好因为数据量比较少,如果遇到数据量大的情况可能就需要考虑分治法了。

 //寻找此时高度最短的列.第一列为0
 -(NSUInteger)findShortestColumn{
 NSUInteger shortestIndex = ;
 CGFloat shortestValue = MAXFLOAT;
 NSUInteger index=;//游标
 for (NSNumber *columnHeight in self.COLUMNSHEIGHTS) {
 if ([columnHeight floatValue] < shortestValue) {
 shortestValue = [columnHeight floatValue];
 shortestIndex = index;
 }
 index++;
 }
 return shortestIndex;
 }

找到了最短列,表达出item的x坐标和y坐标就很容易了:

NSUInteger origin_x = [self findShortestColumn] * [self columnWidth];

NSUInteger origin_y = [self.COLUMNSHEIGHTS[shtIndex] integerValue] ;

item.frame.size.width:

由于列数是有用户决定的,所以是个变量,由此可以获得列宽columnWidth = self.collectionView.bounds.size.width / self.columnsCount

然后我们规定,默认情况下item的宽度等于columnWidth。当满足当前列和下一列(如上图红色方块,就是属于当前列位于列2,下一列列3)高度相等时,可以横跨两栏。(再看红色方块,因为在它放进去之前,第二列高度为0,第三列高度也为0,满足横跨的条件)

但是!

如果出现了下面的这种情况:

也就是说,单单满足当前列和下一列高度相等还不够,因为只要一旦满足这个条件,接下去将会一直是横跨的状态。所以我们还需要再加一个条件来筛选这些即使满足当前列和下一列高度相等的item。我们可以用随机数:

  NSUInteger randomOfWhetherDouble = arc4random() % ;//随机数标记是否要双行 

arc4random() % 100;会随机生成一个0~100的整数。然后我们设定一个阈值,比如40.只有当同时满足 当前列和下一列高度相等randomOfWhetherDouble < 40 的item才能真正实现跨行。换句话说,即使当前列和下一列高度相等,也只有百分之40的几率出现跨行的item,这样就很好的保证了宽度不一的item随机出现!

所以宽度的代码是:

  && [self.COLUMNSHEIGHTS[shtIndex] floatValue] == [self.COLUMNSHEIGHTS[shtIndex+] floatValue] && randomOfWhetherDouble < ) {
 size_width = *[self columnWidth];
 }else{
 size_width = [self columnWidth];
 }

item.frame.size.height:

这个可以自由规定,因为在竖直方向高度没有特别的限制。比如我规定:

1.如果是横跨的,高度 = 宽度 * (0.75~1随机)

 ;
 retVal = );
 size_height = size_width * retVal;

2.如果是单列的,高度 = 宽度 * (0.75~1.25随机)

 ;
 retVal = );
 size_height = size_width * retVal; // 高度为宽度的0.75~1.25倍

补充:

实 际测试中发现,即使把出现横跨item的阈值调成0,也就是只要满足 当前列和下一列高度相等,100%出现横跨的情况,出现横跨的情况也是少之又少。为什么呢?原因出在了数据类型上,之前我的用的数据类型全是 CGFloat或者float的浮点类型,两个浮点数要相等的概率可想而知。改成NSUInteger之后就好多了。除此之外,为了增加横跨情况出现的概 率,我还用到了四舍五入。拿图举个例子:

我们让item的高度对某个整数取余,比如以40为单位,让高度对40取余,再让item的高度剪掉这些余数。剩下的高度肯定是40的整数倍。

代码很简单:

size_height = size_height - (size_height % );

这可以把某个范围内的高度都归约到用一个高度,也就让左右两列高度相等的概率增加了,出现横跨item的可能性也变大了。

然后,在循环的过程中把每个item的frame赋值给对应的attributes,并把这些attributes保存到一个数组里。

 //给attributes.frame 赋值,并存入 self.itemsAttributes
 NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:];
 UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
 attributes.frame = CGRectMake(origin_x, origin_y, size_width, size_height);
 [self.itemsAttributes addObject:attributes];

然后在layoutAttributesForElementsInRect方法中返回:

  - (NSArray *  } 

最后

为了能让collectionView滑起来,我们还需要设置它的ContentSize.其实只要让ContentSize的高度变成COLUMNSHEIGHTS中最长列的高度即可。至于这个求数组中最长列的算法,和前面的求最短列类似。

 -(CGSize)collectionViewContentSize{
 CGSize size = self.collectionView.bounds.size;
 NSUInteger longstIndex = [self findLongestColumn];
 float columnMax = [self.COLUMNSHEIGHTS[longstIndex] floatValue];
 size.height = columnMax;
 return size;
 }

结语

如果你有兴趣,还可以试试

  1. 让图片在竖屏和横屏时拥有不同的列数,并以过渡动画切换。

  2. 实现contentView的水平滚动并实现上面的不规则布局。

以上两个功能我已经实现并进行了封装,你可以像普通的UICollectionViewLayout一样使用。可以在这里使用和学习。

 

iOS开发——UI篇OC篇&不规则排列的图片布局的更多相关文章

  1. iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

    UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...

  2. iOS开发——UI高级OC篇&自定义控件之调整按钮中子控件(图片和文字)的位置

    自定义控件之调整按钮中子控件(图片和文字)的位置 其实还有一种是在storyBoard中实现的,只需要设置对应空间的左右间距: 这里实现前面两种自定义的方式 一:imageRectForContent ...

  3. iOS开发——网络实用技术OC篇&网络爬虫-使用青花瓷抓取网络数据

    网络爬虫-使用青花瓷抓取网络数据 由于最近在研究网络爬虫相关技术,刚好看到一篇的的搬了过来! 望谅解..... 写本文的契机主要是前段时间有次用青花瓷抓包有一步忘了,在网上查了半天也没找到写的完整的教 ...

  4. ios开发——实用技术篇OC篇&iOS的主要框架

    iOS的主要框架         阅读目录 Foundation框架为所有的应用程序提供基本系统服务 UIKit框架提供创建基于触摸用户界面的类 Core Data框架管着理应用程序数据模型 Core ...

  5. iOS开发——高级技术OC篇&运行时(Runtime)机制

    运行时(Runtime)机制 本文将会以笔者个人的小小研究为例总结一下关于iOS开发中运行时的使用和常用方法的介绍,关于跟多运行时相关技术请查看笔者之前写的运行时高级用法及相关语法或者查看响应官方文档 ...

  6. iOS开发——运行时OC篇&使用运行时获取系统的属性:使用自己的手势修改系统自带的手势

    使用运行时获取系统的属性:使用自己的手势修改系统自带的手势 有的时候我需要实现一个功能,但是没有想到很好的方法或者想到了方法只是那个方法实现起来太麻烦,一或者确实为了装逼,我们就会想到iOS开发中最牛 ...

  7. iOS开发——网络实用技术OC篇&网络爬虫-使用java语言抓取网络数据

    网络爬虫-使用java语言抓取网络数据 前提:熟悉java语法(能看懂就行) 准备阶段:从网页中获取html代码 实战阶段:将对应的html代码使用java语言解析出来,最后保存到plist文件 上一 ...

  8. iOS开发——新特性OC篇&IOS9 SDK新特性

    iOS9 SDK新特性 WWDC 2015苹果开发者大会是移动开发者一年一度的盛会,InfoQ中文站除了第一时间整理Keynote内容分享给大家之外,还邀请了资深的一线开发者分享他们的收获.本文为王巍 ...

  9. iOS开发——网络编程OC篇&使用WebView构建HyBird应用

    使用WebView构建HyBird应用 HyBird是一种本地技术与Web相结合,能过实现跨平台的移动应用开发,最常用的一个框架:PhoneGap 一:首先,写好html代码 <!DOCTYPE ...

  10. iOS开发——图形编程OC篇&粘性动画以及果冻效果

    粘性动画以及果冻效果 在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲 ...

随机推荐

  1. knockout 绑定 jquery ui datepicker (转)

    ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //in ...

  2. [ahu 1248] NBA Finals

    NBA Finals Time Limit: 1000 ms   Case Time Limit: 1000 ms   Memory Limit: 64 MBTotal Submission: 251 ...

  3. SQL LEFT JOIN 关键字

    SQL LEFT JOIN 关键字 LEFT JOIN 关键字会从左表 (table_name1) 那里返回所有的行,即使在右表 (table_name2) 中没有匹配的行. LEFT JOIN 关键 ...

  4. Maven使用教程

    一.Maven介绍 我们在开发项目的过程中,会使用一些开源框架.第三方的工具等等,这些都是以jar包的方式被项目所引用,并且有些jar包还会依赖其他的jar包,我们同样需要添加到项目中,所有这些相关的 ...

  5. C# 检测机器是否有声卡设备

    有时候我们的程序需要进行音频的播放,则我们首先需要判断机器是否有声卡能够进行音频的播放.在网上找了一下没有发现太多关于如何检机器是否有声卡的例子.我在看了一些文档后自己写了一个小测试程序,如果机器装有 ...

  6. C# 发送邮件整理,包括控制台程序、WPF、WebForm 及 ASP.NET MVC

    一直想把发送邮件的功能掌握,总是各种情况拖着了,这两天终于看了一下,整理一下,希望能帮到想学的. 发送邮件使用SMTP服务器,有两种方案,一种是使用IIS的SMTP功能:另一种是直接使用邮件供应商的S ...

  7. uva 2572 Viva Confetti

    思路: 小圆面是由小圆弧围成.那么找出每条小圆弧,如果小圆弧,在小圆弧中点上下左右进行微小位移的所得的点一定在一个小圆面内. 找到最后覆盖这个小点的圆一定是可见的. 圆上的点按照相邻依次排序的关键量为 ...

  8. codeforce 609A - USB Flash Drives

    排序水题 #include<iostream> #include<cstdlib> #include<cstdio> #include<algorithm&g ...

  9. algorithm@ Divide two integers without using multiplication, division and mod operator. (Bit Operation)

    #include<bits/stdc++.h> using namespace std; int divide(int dividend, int divisor) { long long ...

  10. [C++]VS2010功能设置

    VS2010快捷键设置 工具->选项->环境->键盘->[显示命令包含] 下面输入“对齐”关键字->窗口显示关于“对齐”的所有操作命令->选中“某一个”->[ ...