目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLayout  类,实现瀑布流效果.效果如右图. 依赖工具: 我们需要一个图片大小和图片地址的Josn数据, 和 SDWebImage图片加载的第三方工具 RootViewController.m #import "RootViewController.h" #import "Data…

目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLayout  类,实现瀑布流效果.效果如右图. 依赖工具: 我们需要一个图片大小和图片地址的Josn数据, 和 SDWebImage图片加载的第三方工具 RootViewController.m 1 #import "RootViewController.h" 2 #import "…

今天研究了一下自定义UICollectionViewLayout. 看了看官方文档,要自定义UICollectionViewLayout,需要创建一个UICollectionViewLayout的子类.同时,可以通过一下3个方法传递布局信息.contentSize.cells的信息等. 一.继承UICollectionViewLayout,重写以下方法 1.通过prepareLayout方法来计算预先计算需要提供的布局信息. 2.通过collectionViewContentSize方法来返回c…

1.地图坐标转换那些事 (1)投影坐标系与地理坐标系 地理坐标系使用三维球面来定义地球上的位置,单位即经纬度.但经纬度无法精确测量距离戒面积,也难以在平面地图戒计算机屏幕上显示数据.通过投影的方式可以将其转换成平面的投影坐标系,不同的投影方式可能会带来不同的变形及误差,类似于把一个橘子的橘子皮剥开摊平到桌面. GPS以及iOS系统定位获得的坐标是地理坐标系WGS1984,Web地图一般用的坐标细是投影坐标系WGS 1984 Web Mercator,国内出于相关法律法规要求,对国内所有GPS设备…

概述 瀑布流是电商应用展示商品通常采用的一种方式,如图示例 瀑布流的实现方式,通常有以下几种 通过UITableView实现(不常用) 通过UIScrollView实现(工作量较大) 通过UICollectionView实现(通常采用的方式) UICollectionView基础 UICollectionView与UITableView有很多相似的地方,如 都通过数据源提供数据 都通过代理执行相关的事件 都可以自定义cell,且涉及到cell的重用 都继承自UIScrollView,具有滚动效果…

自定义布局,实现瀑布流效果 自定义流水布局,继承UICollectionViewLayout 实现一下方法 // 每次布局之前的准备 - (void)prepareLayout; // 返回所有的尺寸 - (CGSize)collectionViewContentSize; // 返回indexPath这个位置Item的布局属性 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPat…

移动端访问不佳,请访问我的个人博客 最近项目中需要用到瀑布流的效果,但是用UICollectionViewFlowLayout又达不到效果,自己动手写了一个瀑布流的layout,下面是我的心路路程 先先上效果图与demo地址: 因为是用UICollectionView来实现瀑布流的,决定继承UICollectionViewLayout来自定义一个layout来实现一个简单瀑布流的布局,下面是需要重写的方法: 重写这个属性得出UICollectionView的ContentSize:collect…

瀑布流已经有点年代了吧,不过wp上还真是挺少资料的.今天抽空把自己之前搞过的东西写出来,避免大家重复劳动. 一.简单的瀑布流排版加入ui虚拟化. 最近看了 段博琼  ui虚拟化的一篇博文,链接:http://www.cnblogs.com/hebeiDGL/p/3410575.html 觉得还不错,于是下载了他的demo稍微改了一下瀑布流效果. demo截图如下:        主要改动: 1:自定义WaterFallPanel继承Panel,用于实现瀑布流排版,并保持容器children距离顶…

最近刚写的一个简单的瀑布流. 整体思路可能不是很完善. 不过也算是实现效果了. 高手勿喷 思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. 先说简单的,width值 = (CollectionView的整体宽度 - 左右边距 - 每列的间距 )/列数 height = 按照原图比例缩放就行 x 需要定位 在哪一列上 = 左边距 + (列间距 + width) * 最小列的列号 y 永远是在列高最小的那列下添加 = 最小列高 + 行间距…

自定义 UICollectionViewLayout 布局,实现瀑布流:UICollectionView和UICollectionViewCell 另行创建,这只是布局文件, 外界控制器只要遵守协议并成为他的代理并实现代理方法heightForItemAtIndex:返回每个cell的高就可以实现温布流效果,也 可以实现相应的代理方法设置总共有多少列或是行间距列间距与边框间距. ViewLayout.h 文件: #import <UIKit/UIKit.h>   @class ViewLayo…

上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调>.UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的.本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流.自定义的瀑布流可以配置其参数: 每个Cell的边距…

一.思路 思路一:比较每一行所有列的cell的高度,从上到下(也就是从第一行开始),从最短的开始计算,(记录下b的高度和索引,从开始计算,依次类推) 思路二:设置上.下.左.右间距和行间距.列间距及列数. 思路三:实现的重要的方法. 二.代码先行. 1.自定义layout类. //入口 #import <UIKit/UIKit.h> @protocol STRWaterLayoutDelegate; @interface STRWaterLayout : UICollectionViewLay…

如图所示,通过实现不规则的网格分布,来显示出不同的效果.因为集合视图必须要指定布局还可以显示,所以自定义布局就可以实现瀑布流的效果. //创建布局对象 WaterFlowLayout *flowLayout = [[WaterFlowLayout alloc] init]; flowLayout.delegate = self; flowLayout.numberOfColumn = ; //创建集合视图 UICollectionView *collectionView = [[UICollec…

前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较’高级’的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, 如果不是很熟悉, 建议在以后熟悉一下. 那么在本篇结束后, 你也能够很轻松的使用collectionView来实现, 当下比较流行和比较炫酷的效果以及你想要自己实现的其他的效果.这里就实现三种比较常用的效果: 线性布局, 瀑布流布局, 圆形布局, 其他的各种自定义的布局你将是会有能力自己实现的.…

在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,Cell的最大以及最小高度是在我们的布局文件中是写死的,换句话说也就是不可配置的.为了循序渐进,由浅入深呢,上篇博客暂且那么写.不过那样写太过死板,本来使用起来比较灵活的自定义布局,如果把其配置参数给写死了,就相当于在笼中的猛兽,再厉害不也白扯蛮. 在今天这篇博客中我们要接着上篇博客中的Demo,使其自定义布局…

先看效果图吧, 继上一篇<android自定义viewgroup实现等分格子布局>中实现的布局效果,这里稍微有些区别,每个格子的高度不规则,就是传说的瀑布流布局,一般实现这种效果,要么用第三方控件,如果不是加载图片还可以直接写在xml中实现,不过代码会很多的: 下面我重写了viewgroup,实现onMeasure,onLayout方法,动态设置每个布局的高度,这里有一个小的技巧,一般我们自定义的控件,嵌套在scrollview中显示不全,这个问题也纠结我一小会,不过当你打开scrollvie…

1. Touch事件的传递:   图解Touch事件的传递,如下: 当我们点击子View 02内部的Button控件时候,我们就触发了Touch事件. • 这个Touch事件首先传递给了顶级父View,于是这个顶级父View开始遍历自己的子view(父View 01 和 父View 02 是顶级父View的子View), 判断这个Touch点击事件是在 父View 01上面 还是在 父View 02上面,判断知道在父 View 02上面. • 父View 02再次遍历自己的子View(子View…

公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我github点个免费star,你轻轻的来,不要悄悄的走嘛.感谢大佬- - 下面介绍一下(也可以去github看) jquery-waterfall 一款简单jq插件,配载es6语法的竖向瀑布流 插件特点: 数据灵活,可以后台请求数据载入页面也可以直接在html中加入元素,一般放第一页 同个页面可以放置…

页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板渲染 def img(req): img = models.Img.objects.all() return render(req,"images.html",{'img':img}) 服务端数据分发 from django import template register = templ…

在iOS团队开发中,我见过一些人的代码,也修改过他们的代码.有的人的代码写的非常之规范.通用,几乎不用交流,就可以知道如何修改以及在它基础上扩展延生.有的人的代码写的很垃圾,一眼看过去,简直会怀疑自己和他是用两种语言在开发,代码可复用性极差,往往一个已写好的功能遇到要扩展(或者让我自己写,在稍微改动的情况下就可以移动其他地方使用)的情况下,需要把他代码全部清掉,自己重新写一个类或者方法出来,反正,改起来,简直就是不能令人愉快的玩耍了. 如果,进入了一家代码不规范的公司,个人建议早走为妙.不然要么…

前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较'高级'的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, 如果不是很熟悉, 建议在以后熟悉一下. 那么在本篇结束后, 你也能够很轻松的使用collectionView来实现, 当下比较流行和比较炫酷的效果以及你想要自己实现的其他的效果.这里就实现三种比较常用的效果: 线性布局, 瀑布流布局, 圆形布局, 其他的各种自定义的布局你将是会有能力自己实现的 最…

iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... iOS可自定义图表库 - PNChart 开源一款曾是运营级的B2B服务平台APP<云采> 使用ffmpeg解码最简iOS播放器 注释得非常清楚的瀑布流,和自己的一些想法 iOS日志框架学习分享 在iOS App中录制MP3和AMR:ZWAudioRecordTool 一套应用于swift项目的空白页组件EmptyPage 2.0 扫雷简单实现 iOS优质博客 iOS…

最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码可复用的原则(其实就是懒,不想再写一遍而已--),干脆把水平和竖直模式都集成到一个文件中,通过protocol去控制瀑布流的显示模式. 首先我们需要了解一下UICollectionViewLayout是个啥玩意,为什么通过它可以进行瀑布流的实现呢?在苹果官方Api Reference中我们可以看到,…

这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及会介绍第一种实现的bug. <1>第一种 效果图如下所示: 这种实现方法的思路: 1)首先调用随机函数,产生随机高度,并把它保存到数组中 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollection…

本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectionView的用法,这些用法不仅包括SDK中自带的流式布局(UICollectionViewDelegateFlowLayout)而且介绍了如何根据你的需求去自定义属于你自己的CollectionView.自定义的CollectionView可谓是非常灵活,其灵活性也决定了其功能的强大.Collect…

前言 : 在写这篇文章之前, 先祝贺自己, 属于我的GitHub终于来了. 这也是我的GitHub的第一份代码, 以下文章的代码均可以在Demo clone或下载. 欢迎大家给予意见. 觉得写得不错的也请不要吝惜你们的star. 瀑布流 先普及下什么叫瀑布流 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来. UICollectio…

UICollectionView实现瀑布流 在iOS中可以实现瀑布流的目前已知的有2种方案: 使用UIScrollView自己封装一套,这种方案是应用于iOS6之前的,因为iOS6才出来UICollectionView,不过现在这种方案已经不怎么用了,还得自己封装.而且自己封装的性能不一定有系统的要好. 使用系统自带的UICollectionView,然后自定义layout,自己实现瀑布流效果 本文中我们介绍第二种实现方案首先我们需要自定义一个继承于UICollectionViewLayout的…

代码地址如下:http://www.demodashi.com/demo/14760.html 一 .效果预览 二.确定需求 由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的四等份,而每个模块的样式有小正方形(1:1).大正方形(2:2).横长方形(2:1).纵长方形(1:2),动态的根据服务器下发模块样式绘制布局,可以横向滑动,限定为两行的高度. 注意:上面的示意宽高比是约等于,忽略了间距,计算的时候千万别忘了. 三.实现思路 由上需求分析可知,我们可以让后台每个模块…

UICollectionView 瀑布流 添加表头视图的坑 首先是,需求加了个头视图在顶部,在collectionView中的头视图跟TableView的不一样,TableView的表头只要设置tableview.tableHeaderView就可以了. collectionView 怎么添加这样的效果的呢 有两种思路 第一种:在collectionView的段头代理中设置 (只在第一段中设置) 第二种:改变 collectionView 的内延距离, 然后添加在内延空白的位置. 第一种 //…

创建瀑布流有三种方式:   第一种方式:在一个ScrollView里面放入三个单元格高度一样的tableView,禁止tableView滚动,只需让tableView随着ScrollView滚动即可.这种方式太奇葩,不太推荐使用...   第二种方式:在一个ScrollView里面从左到右依次放入三个UIView,当ScrollView滚动时,如果之前的三个view消失就将它们存入自定义的缓冲池,即数组中,下拉时再从数组中取出这三个view放到之前三个view位置的下面.但是,切记,每次要依次计…