在 iOS 14 正式版发布之前我写了一篇博文《iOS开发之Lists in UICollectionView》,iOS 14 正式版发布以后,经测试,Apple 改变了测试版中的 API,所以本文进行一个补充说明...(在前文的基础上做了修改,尤其是代码部分)。...学习之前需要进行说明: 本文依然使用《iOS开发之DiffableDataSource》 一文中的数据。 需要熟悉 DiffableDataSource 的基本使用。...创建UICollectionView 为 UICollectionView 配置 List 式的布局,还可以配置滑动菜单。...extension ViewController { // 创建列表式UICollectionView func makeCollectionView() -> UICollectionView
在iOS10中,苹果为UICollectionViewCell引入了Pre-Fetching预加载机制用于提升它的性能。...翻译文档)的文章很多,有干货的Demo很少,于是乎自己摸索了一下,写了一个简单的案例,在此记录并分享一下。...:prefetchItemsAtIndexPaths 方法和collectionView:cancelPrefetchItemsAtIndexPaths 方法(可选) 3、将第1步中遵从协议的类设置为...UICollectionView 的 prefetchDataSource 属性 实现 一、创建UICollectionViewFlowLayout 自己写一个类继承自UICollectionViewFlowLayout...效果演示.gif 写在后面的话 1、这个新特性仍然需要探究 2、遇到的一个坑:细心看的话可以发现我的字典是懒加载的,如果直接在viewDidLoad中初始化会在 weakSelf.imgs[currentURL
可能会在你的项目中用到这玩意,最近也是要用就简单的写了一个 Demo。...上面的控制器说完了,就到重点了,也就是继承与 UICollectionViewFlowLayout 的 zxFlowLayout ,有一点大家注意一下,就是你在初始化UICollectionView...//这个数组的主要作用是保存每一列的总高度,这样在布局时,我们可以始终将下一个Item放在最短的列下面,初始化值全都定义成零 CGFloat colHight[3]={0,0,0};...我注释掉的是两行的!!!....h 文件里面也就只有 itemcount 这一个属性了,这个属性其实在你控制器当中你刷新完数据之后就传过来。让它重新布局就OK了!挺简单的对吧。。
iOS系统的控件中,也并非没有这样的先例,UIPickerView就是很好的一个实例,这篇博客,我们就通过使用UICollectionView实现一个类似系统的UIPickerView的布局视图,来体会...二、先来实现一个炫酷的滚轮空间布局 万丈的高楼也是由一砖一瓦堆砌而成,在我们完全模拟系统pickerView前,我们应该先将视图的布局摆放这一问题解决。...而我们这次要讨论的布局则不同,pickerView会随着我们手指的拖动而进行滚动,因此UICollectionView中的每一个item的布局是在不断变化的,所以这次,我们采用动态配置的方式,在layoutAttributesForItemAtIndexPath...,并且在每个Item上添加了一个标签,标写是第几行。...,上面的逻辑刚好可以无缝对接,但是会有新的问题,一开始运行,滚轮就是出现在最后一个item的位置,而不是第一个,并且有些相关的地方,我们也需要一些适配: 在viewController中: //一开始将
用法简单介绍 ViewController就是一个首页的普通控制器,当点击+的时候,就会push到频道管理(也就是标签列表)页面。...在ViewController里自定义了两个数组,我的频道(myChannels)和更多频道(moreChannels) 在点击+跳转到频道管理页面的点击方法里面有一个回调方法,即:将选中的频道、以及自定义后的频道回传到此页面...,在将选中的Item移动到目标的Item上的时候,我的方法处理的不是太好。...我的频道里面第一个Item本意上我是不希望他可以被移动的,但是如果将其它的Item移动到第一个位置依然可以,背离了我的初衷。...仔细观察了一下,《头条》或者《搜狐》的更多频道里,如果将我的频道中的Item移动到更多频道里,《搜狐》只是放在更多频道里面的最后一个位置,《头条》是放在第一个的位置,并没有放哪里都行,我突然又感觉我自己的又有点多此一举了
介绍 UIView 会占用屏幕上一个矩形的空间。 主要处理两件事:画出矩形控件,并处理其中的事件。 UIView 是层级结构,UIView 只有一个父 View,但可以有多个子 View。...UITableViewDiffableDataSource 在 iOS 13 中引入了新的 API — Diffable Data Source,它不仅能够驱动 UITableView 和 UICollectionView...整体结构 一个 UICollectionView 由 Header + 多个 Section + Footer 组成。...介绍 UICollectionViewCompositionalLayout 是在已有的 Item 和 Section 的基础上,增加了一个 Group 的概念。...NSCollectionLayoutAnchor 在 Item 中,可能需要给其加上小红点或者未读消息数等附加视图,在 UICollectionViewCompositionalLayout 中,可以通过
更加灵活的进行布局,但都限制在系统为我们准备好的布局框架中,还是有一些局限性,例如,如果我要进行瀑布流似的不定高布局,前面的方法就很难满足我们的需求了,如下: ?...这种布局无疑在app的应用中更加广泛,商品的展示,书架书目的展示,都会倾向于采用这样的布局方式,当然,通过自定义FlowLayout,我们也很容易实现。...为了演示的方面,这里我不错更多的封装,添加一个属性,直接让外界将item个数传递进来,我们把重心方法重写布局的方法上: @interface MyLayout : UICollectionViewFlowLayout...布局的类,因此,collectionView在进行UI布局前,会通过这个类的对象获取相关的布局信息,FlowLayout类将这些布局信息全部存放在了一个数组中,数组中是UICollectionViewLayoutAttributes...总之,FlowLayout类将每个item的位置等布局信息放在一个数组中,在collectionView布局时,会调用FlowLayout类layoutAttributesForElementsInRect
这是放置广告位的 设计说目前也就四个 我为了以后可以扩展 就做成如果超出四个就可以横向滚动 按钮的高度随着后台返回尺寸自动自适应 如果返回的元素都没有则隐藏这一栏 第三部分 ?...显示促销的商品 栏目可以左右滑动切换 每一个栏目只有两个商品 倒计时结束就不显示 第六部分 ?...整体是一个 UICollectionView 上面是一个 Header 我现在使用原来框架面临的问题是 我的 Header 那么多元素 都超出两屏幕了 自然要滚动了 之前是商品列表和 Header 可以显示在一个屏幕...我下面的商品列表可以切换频道 之前不可以切换 自己当时尝试写了1.0的框架 后来无法满足我们设计这个界面需求 废弃了 我就从 Github 找了几个开源库,看到他们的首页我们的很相似 开始我是这样的...因为下面的频道是横向滚动的 设置方向之后 UICollectionView 的 Header 就是在最左边 不是我们要的结果 ?
CollectionView 中的一个 section 中的 cell。...{ return nil } 因为为了清晰的比较每个需求的变更,所以在demo里每个需求都有一个ViewController,搞了个基类来创建collectionView和adapter...那么现在该如何去做,我们直接新增一个FavorCell,和对应的一个FavorSectionController,根本不需要碰原有运行良好的代码。...这是我比较推荐的实现方式,但并不是唯一的,还有两种实现方式ListBindingSectionController(推荐实现)和只需要一个ListSectionController就能实现,已经在demo...IGListKit还能非常方便的实现多级列表、带多选功能的多级列表。 当然一样事物不可能只有优点,IGListKit同样拥有缺点,就目前为止我使用的经历来看,主要这几个可能有点坑。
拓展知识 5.代码实现:实现一个 10 行的列表,每行随机显示一个 0 – 100 之间的整数。用户可以删除、移动任何一行,下拉则列表中的数字重新刷新。...关键词:#UICollectionViewLayout 面试中当场实现一个瀑布流,在不允许上网查询的情况下算是十分困难的了。而且代码量很大,所以我们这道题重在分析思路。...该方法需要我们针对每一个 item 设定 layoutAttribute。由于我们在 prepare() 中已经完成相应计算,此时只需返回对应 indexPath 的特定属性即可。...完成这些设定之后,我们发现 UICollectionView 里每个 item 里的高度需要从含有 UICollectionView 的 ViewController 里获得。...为了避免循环引用,最好的方法就是在我们的 UICollectionViewLayout 子类中定义一个 protocol,然后让 ViewController 实现这个protocol,来完成高度的获得
平常我在业务开发中,绝大部分情况都是使用的UITableView,而UICollectionView则是在极少情况下才会去使用,这就导致了我对UICollectionView略感陌生。...本篇文章就是以二者对比的方式对UICollectionView做一个小总结。...UICollectionView的collectionCell支持横向&纵向布局,比UITableView的tableCell只有纵向布局要更加灵活。...UITableView中的row,对应到UICollectionView中就是item,因为一行可以展示多个cell,使用row(行)不能准确地表达。...UICollectionViewLayout是一个抽象类,上面我讲了UICollectionViewFlowLayout,它是系统为我们提供的继承自UICollectionViewLayout的用于流式布局的
与iOS中的UICollectionView相似,在Mac开发中,我们也会常常用到NSCollectionView来展示内容,但在使用中,与iOS有较大差别,尤其对Mac开发新手来说,不得不到头文件中慢慢搜索...创建item文件 实现代码(ViewController.swift) ? 实现代码 CustomItem.swift ? 为了能看见item,设置背景色 运行效果 ?...运行效果 Demo示例地址: Demo源码
之前每次用到UICollectionView的时候都会都需要在Controller里面去实现DataSource & Delegate方法 单独Delegate方法还好不是很多, 但是再加上DataSource...就很臃肿了, 为了避免代码臃肿也减少ViewController的代码量 我们可以将DataSource方法分离出去, 大致方法如下: -> 创建需要的Model & 自定义Cell文件 -> 创建DataSource...类, 导入 Cell头文件并实现UICollectionViewDatasource -> 在Controller中导入Model & DataSource类 -> 创建DataSource类实例, 将数据传入...DataSource中 -> 创建UICollectionView, 将CollectionView的datasource指给上面创建的Datasource实例即可 下面举例示范: 为了简单 我就只下一个自定义的...中的使用方法 1 //创建CollectionView 2 - (void)createCollectionView { 3 4 self.dataSource = ({ 5
VC处置 视图的初始样式应尽量在Storyboard上属性面板中设置,非极特殊情况,布局也应在Storyboard上使用各种约束配合完成。...,绑定上面的类 右键这个Object,在弹出的菜单中连线 右键CollectionView 设置 Delegate 和 DataSource 等的连线 在主ViewController中如需调用这个模块的方法或者传参...上拖入多个Object,并绑定不同的模块控制类,相对于占位的Container View和ChildViewController方法,Object方法在传参或互相调用方面,更加简便。...这个问题其实问的很模糊,我也是咨询了很多人才知道,他们所谓的问题不容易测试,是指如下两种情况: 修改或删除 @IBOutlet 的变量名时,对应的Storyboard上未做处理,导致运行时崩溃,崩溃内容看不懂...这时可以全局搜素一下 在搜出来的结果中可以看到,是在Main.storyboard上绑定了HomeController,Test.swift文件中定义了该类,但是因为改名所以无法找到。
主要是因为一直在跑面试。 终于还是在上海入职了! 由于项目原因最终还是入了MVVM+RAC的坑 下面是正题。 Demo效果 使用MVVM+RAC请求网络数据 ?...demo.gif ReactiveCocoa简介 在iOS开发过程中,当某些事件响应的时候,需要处理某些业务逻辑,这些事件都用不同的方式来处理。...基础的话我还是推荐这篇博文 讲的都挺细的 当然不爽的话可以试试这个视频版的,也是某培训机构流出的 Demo分析 本文使用的是豆瓣API(非官方) Demo所要做的功能很简单: 从网络中请求数据,并加载到...UI上。...代码 由于BlocksKit的使用,当我们写Delegate和Datasource时 就不用分离函数,整个逻辑都能凑在一起,比如这样定义一个collectionView: - (void)initStyle
iOS流布局UICollectionView系列七——三维中的球型布局 一、引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑布流布局,再到平面中的圆环布局,我们突破了线性布局的局限...,在后面,我们将布局扩展到了空间,在Z轴上进行了平移,我们实现了一个类似UIPickerView的布局模型,其实我们还可以再进一步,类比于平面布局,picKerView只是线性排列布局在空间上的旋转与平移...,这次,我们更加充分了利用一下空间的尺寸,来设计一个圆球的布局模型。...scrollView.contentOffset = CGPointMake(scrollView.contentOffset.x-10*320,scrollView.contentOffset.y); } } 这里面的代码比较上一篇博客中的并没有什么大的改动...在我们的layout类中,将代码修改成如下: -(void)prepareLayout{ [super prepareLayout]; } //返回的滚动范围增加了对x轴的兼容 -(CGSize
引 开发中我们最常看到的可能是表视图UITableView了,但其实还有一个视图也很常见,特别是一些图片、商品、视频的展示界面,用UICollectionView来展现往往会更加方便。...本文就介绍纯用代码创建UICollectionView的简单示例,效果如下图: 实现 如图所示,视图由一个个方块组成,每个方块中有一张图片以及一个标题文字。...首先看每个方块,也就是每个cell怎么呈现,这里的cell明显是自定义的,我们用一张图片填满cell,同时在底部居中的位置放置一个label。...为了显得真实一点,我用了一个随机数来决定每个cell显示的图片和文字,这样在呈现的时候就不会太过千篇一律。...不同之处在于UICollectionView需要一个布局参数来决定cell是如何布局的,默认是流水布局,也就是我们最常见的形式,也就是上面图里的形式;此外,UICollectionView除了垂直滚动,
当然,如果苹果开发者团队推出了关于 UICollectionView 的新的技术或者是我在开发中发现了新的技术点,我还是会持续更新这个系列,最终的目的是我希望通过这个系列的文章能把 UICollectionView...答案当然是肯定的,在 UICollectionView 控件中我们管这叫 Supplementary View, 翻译过来就是 "追加视图",那在 UICollectionView 中该怎么实现给每个...在接下来的内容中,你将会学到以下知识点: 1.如何在 UICollectionView 中创建 Decoration View2.自定义布局属性,计算 section 的背景图位置和大小3.实现 UICollectionView...(UIViewController)中呈现了,但是为了更进一步体现 UICollectionView 的强大,我还实现了一个功能,那就是使得书架里的书可以自由拖拽排序,这里就用到了另外一个知识点:手势...最后,我们来看下最终效果: 最后 关于 UICollectionView 系列的整理,到今天就要短暂的划上一个句号了,在写这个系列之前,我对 UICollectionView 的想法就是:无非就是比
大家好,又见面了,我是你们的朋友全栈君。 一、先来看看最终的效果吧 二、创建UI 1.首先我们在viewcontroller中创建一个UICollectionView....(nonatomic,assign)NSInteger cellCount;//cell的总个数 @end 在属性变量中我们定义了一个 一个delegate,一个用于存放列高度的数组,一个存放cell...:(NSIndexPath *)indexPath{ //通过delegate获取item的大小,之前在主控制器中设置过了,其中layout是uicollectionview类的,所以传自身就可以了...在这个方法中,我们首先通过delegate获得了在主控制器中设置过的itemsize。...这个方法在 prepareLayout 中进行了循环调用,循环了18次,也就是说每一个cell都需要进行布局,以便字典中存储了每一个cell的布局信息。
实现: 知道了原理,那就开始构思: 1、我的实现思路是用UICollectionView来实现滚动菜单; 2、需要两个UICollectionView,UICollectionViewCell的文字内容一样...,一个UICollectionView在遮罩下面,一个在遮罩上面; [self addSubview:self.collectionViewBottom]; [self addSubview:self.maskView...]; [self.maskView addSubview:self.collectionViewTop]; 4、在遮罩上面的UICollectionView超出遮罩的部分的内容不显示出来; self.maskView.clipsToBounds...起初我的想法是用两种图片拼接起来,一张长方形,一张三角形,后来为了自定义性更高一点,改成了用UIBezierPath来进行绘制,代码如下: 自定义一个View继承自UIView: #import "GFMaskView.h...我的初衷其实就是把这个滚动菜单封装出来,后来发现使用这个菜单的大部分情况都是和多个子控制器一起使用,所以就再进行了一步封装,把控制器的逻辑都封装到了GFPageViewController控制器中。
领取专属 10元无门槛券
手把手带您无忧上云