平常我在业务开发中,绝大部分情况都是使用的UITableView,而UICollectionView则是在极少情况下才会去使用,这就导致了我对UICollectionView略感陌生。...UITableView中的row,对应到UICollectionView中就是item,因为一行可以展示多个cell,使用row(行)不能准确地表达。...例如,UITableView中的如下代理方法: - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger...中的代理方法: @protocol UICollectionViewDelegateFlowLayout @optional - (CGSize)collectionView...,这是UITableView和UICollectionView的最大的不同。
引 开发中我们最常看到的可能是表视图UITableView了,但其实还有一个视图也很常见,特别是一些图片、商品、视频的展示界面,用UICollectionView来展现往往会更加方便。...如果熟悉UITableView的话,其实很多地方都是类似的,甚至可以说UITableView是一种特殊的UICollectionView,正如正方形是一种特殊的矩形一样,UITableView就是一种每行只放一个方块的...首先看每个方块,也就是每个cell怎么呈现,这里的cell明显是自定义的,我们用一张图片填满cell,同时在底部居中的位置放置一个label。...为了显得真实一点,我用了一个随机数来决定每个cell显示的图片和文字,这样在呈现的时候就不会太过千篇一律。...和DataSource方法中的Identifier保持一致,cell只能通过注册来确定重用标识符 [collectionView registerClass:[CollectionViewCell
子 View 的顺序和子 View 返回的数组中的位置有关(storyboard 中左侧的树形结构图中的先后顺序)。...数据联动 在某一列滚动的时候,重新设置联动列的显示数据,然后进行刷新操作。...UITableViewDiffableDataSource 在 iOS 13 中引入了新的 API — Diffable Data Source,它不仅能够驱动 UITableView 和 UICollectionView...)") } } UICollectionViewCompositionalLayout 在 iOS 13 中 UICollectionView 推出了一种新的组合布局 UICollectionViewCompositionalLayout...NSCollectionLayoutAnchor 在 Item 中,可能需要给其加上小红点或者未读消息数等附加视图,在 UICollectionViewCompositionalLayout 中,可以通过
场景需求 一个表格视图(或者宫格视图)中,当一个单元格被选中时设置彩色样式,选中其它单元格时设置灰色样式。 2. 一个思路 通过实现选中和非选择的代理,以在适当的时机进行UI更新操作。 3....UITableView 3.1 通过屏幕点击改变的选中状态回调给代理 //选中 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath...// animate between regular and selected state 注意的是: 这种方法改变cell的选中状态时,当通过屏幕点击选中其它cell的时候,UITableView并不会执行...UICollectionView 4.1 通过屏幕点击改变的选中状态回调给代理 //选中 - (void)collectionView:(UICollectionView *)collectionView...cell的时候,UITableView并不会执行- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath
把当前的控制器作为一个父控制器,添加三个UITableViewController的实例作为子控制器,把父控制器中的 scrollView 作为容器,然后添加子控制器中的 tableView 作为子视图...首先新建个HomeContainerViewController,继承自UICollectionViewController,然后在viewDidLoad里面加上这两句: collectionView?...因为这边只是个 Demo,所以我直接在 cell 中显示cellData的值,那cellData 的值在哪里设置呢?...显然是在HomeContainerViewController中: let tableViewDataList = ["first table", "second table", "third table...这边 cell 是会被复用的,在翻到第三页时,会复用第一页的 cell ,第四页复用第二页的 cell……依此类推,所以需要给 cell 中的tableView调用 reloadData方法,不然就算改变了表中的数据
1.3 关于重用 为了得到高效的View,对于cell的重用是必须的,避免了不断生成和销毁对象的操作,这与在UITableView中的情况是一致的。...但值得注意的时,在UICollectionView中,不仅cell可以重用,Supplementary View和Decoration View也是可以并且应当被重用的。...在iOS5中,Apple对UITableView的重用做了简化,以往要写类似这样的代码: UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier...这个特性很受欢迎,因此在UICollectionView中Apple继承使用了这个特性,并且把其进行了一些扩展。...return cell; } 需要吐槽的是,对collection view,取重用队列的方法的名字和UITableView里面不一样了,在Identifier前面多加了Reuse五个字母
虽然抛弃UITableView是不存在的,但是看完这篇文章确实能让90%的列表页抛弃UITableView,让界面易实现易复用。...reload这一行,在heightForRow代理方法中判断isExpand,返回小明已在FeedCellModel中已经计算的两个高度(初始高度和全部高度)。...第二个需求:点赞 在第二版的计划中,产品经理设计了点赞的功能,如图 于是小明又在FeedCell里加上了这几行代码 var favorBtn: UIButton var favorLable...CollectionView 中的一个 section 中的 cell。...相信看到这里,诸位看官已经能明显感觉到IGListKit强大的能力,它充分展现了OOP的高内聚低耦合的思想,拥有高易用性、可扩展性、可维护性,体现了化整为零、化繁为简的哲学。
iOS中,UICollectionView和UITableView已经有系统默认选中颜色设置,但是只有无色,蓝色,灰色,三种颜色设置,如果想要其他的颜色效果,我们可以自由自定义设置。...前言 先观赏一下典型的UITableView控件案例 ? image.png 典型的UICollectionView控件案例 ?...cell的代理方法中作如下设置: cell.selectedBackgroundView = [[UIView alloc] initWithFrame:cell.frame]; cell.selectedBackgroundView.backgroundColor...cell.selectedBackgroundView.backgroundColor = [UIColor groupTableViewBackgroundColor]; return cell; } 3.单元格自定义选中效果方案(二) 通用方案: [x] 在自己自定义的...cell文件中重写如下方法: 示例: UITableViewCell.m - (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated
二、UICollectionViewDataSource介绍 1、在UICollectionViewDataSource回调方法中有一个返回Section数量的方法,如下所示,该方法和UITableView...: (UICollectionView *)collectionView { return 5; } 2、在UICollectionViewDataSource的回调方法中,还有一个是返回每个...在UICollectionView中的Section中我们可以为其增加Header View和Footer View, 也就是官方文档上提到的Supplementary View(追加视图)。...高亮就是触摸Cell时该Cell变为高亮状态,在代码中的反应就是Cell的Highligth属性变为YES。而触摸结束时,Cell的Highligth属性就变为NO。...属性,下面的代码是在ViewDidLoad中添加的,如下所示: Objective-C //设置Cell多选 self.collectionView.allowsMultipleSelection
方案选择 通常业务都需要加埋点统计事件,但在每个业务类里埋点会导致每个页面内耦合了大量的无关业务的埋点代码使得代码不够整洁,所以放弃了代码埋点。...利用 Runtime 在底层进行方法拦截,从而添加埋点代码。 结合AOP的核心思想:将应用程序中的业务逻辑同对其提供支持的通用服务进行分离,最后采用了第2种方案。...因此,在 viewTree 中,由一个 view 到根节点之间的每个节点的名称与深度(层次)共同组成的信息构成了此 view 的 viewPath。...对于手势,我们在创建的时候进行 hook,方法为 initWithTarget:action:。 3.3.3 实现原理 用运行时方法替换方法实现无侵入的埋点方法。 实现原理图: ?...和 UIViewController 生命周期埋点不同的是,一个类中可能有许多不同的 UIButton 子类,相同的 UIButton 子类在不同的视图中的埋点也要区分出来,所以我们通过 NSStringFromClass
可以在VC中具体实现对应的方法: 定义每个Section的约束,具体作用是靠近左右边缘的距离,这里定义的上下距离约束会被其他协议覆盖掉 -(UIEdgeInsets)collectionView:(...---- 也可以自定义一个 继承于 UICollectionViewFlowLayout 的约束,在自定义的约束中实现更强大的功能。比如这样的: ?...item 的具体Frame attri.frame = CGRectMake(cellX, cellY, cellWidth, cellHeight); 实例中在自定义的方法中高度返回的是随机值:...使用UITableView,这种方式应该是最易想到的,因为需要展现几列就用几个tabelview就ok了,而且不需要考虑重用,因为苹果已经做好了,只需要考虑如何在几列tabelView滑动的时候,保持同步不出现...使用UICollectionView,UICollectionView在iOS6中第一次被介绍,它与UITableView有许多相似点,但它多了一个布局类,而实现瀑布流,就与这个布局类有关。
二、UICollectionViewDataSource介绍 1、在UICollectionViewDataSource回调方法中有一个返回Section数量的方法,如下所示,该方法和UITableView...8 } 2、在UICollectionViewDataSource的回调方法中,还有一个是返回每个Section中Cell的数量的方法,在这我们返回30个Cell, 如下代码所示: 1 /** 2 *...在UICollectionView中的Section中我们可以为其增加Header View和Footer View, 也就是官方文档上提到的Supplementary View(追加视图)。...高亮就是触摸Cell时该Cell变为高亮状态,在代码中的反应就是Cell的Highligth属性变为YES。而触摸结束时,Cell的Highligth属性就变为NO。...如果想让你的Cell支持多选,就需要设定一下CollectionView的allowsMultipleSelection属性,下面的代码是在ViewDidLoad中添加的,如下所示: 1 //设置
其实它和 UITableView 相比较的话,但从创建使用看的话,是挺相似的,但其实它真的比 UITableView 要强大好多!很值得大家去好好的学习学习!...你要占我它的基本创建的话,可以参考 UITableView ,参考对比也有利于学习。...*) 这个方法中,UICollectionViewLayout 这里需要的参数看上去是 UICollectionViewLayout 类型的,其实你创建的时候是要用继承与它的 UICollectionViewFlowLayout...#import "zxFlowLayout.h" @implementation zxFlowLayout // 数组相关的属性在这里重写 // 在布局之前会调用的这个方法 -(void)prepareLayout...//这个数组的主要作用是保存每一列的总高度,这样在布局时,我们可以始终将下一个Item放在最短的列下面,初始化值全都定义成零 CGFloat colHight[3]={0,0,0};
//定义展示的UICollectionViewCell的个数 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection...:(NSInteger)section { return 10; } //定义展示的Section的个数 -(NSInteger)numberOfSectionsInCollectionView:(...UICollectionView *)collectionView { return 2; } //每个UICollectionView展示的内容 -(UICollectionViewCell )collectionView...]; //临时改变个颜色,看好,只是临时改变的。...如果要永久改变,可以先改数据源,然后在cellForItemAtIndexPath中控制。(和UITableView差不多吧!
Supplementary View 用过 UITableView 控件的同学肯定都知道我们可以给它的每个 section 加上 headerView 和 footerView,那在 UICollectionView...答案当然是肯定的,在 UICollectionView 控件中我们管这叫 Supplementary View, 翻译过来就是 "追加视图",那在 UICollectionView 中该怎么实现给每个...在接下来的内容中,你将会学到以下知识点: 1.如何在 UICollectionView 中创建 Decoration View2.自定义布局属性,计算 section 的背景图位置和大小3.实现 UICollectionView...数组内的熟悉,只返回与 rect 位置相交的属性 attrs!....UITableView 稍微复杂一些。
』详解(一)基础知识 中,讲解了 iOS 运行时机制(Runtime 系统)的工作原理。...: 在运行时,Class(类) 维护了一个 method list(方法列表) 来确定消息的正确发送。...异常加载占位图 在项目中遇到网络异常,或者其他各种原因造成 TableView、CollectionView 数据为空的时候,通常需要加载占位图显示。...当返回数据,刷新 TableView、CollectionView 时候,进行判断,如果数据为空,则加载占位图。如果数据不为空,则移除占位图,显示数据。...在分类中实现一个自定义的 xxx_reloadData 方法,在其中添加判断是否为空,以及加载占位图、隐藏占位图的相关代码。
在直播卖货小程序源码中,一般都包含商品分类页面,如下图,那么这个页面是如何通过代码实现的呢?下面,小编以iOS版本的开发过程为例,来讲述下实现过程。...图片1.png 左边一级分类使用tableview来展示,右边的耳机分类使用collectionview来展示,主要就是实现一二级分类的联动。下面主要讲下点击和滑动。...1、左侧一级分类的点击实现 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath...* NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ isClickLeft = NO; }); } } 2、在collectionview...的代理方法中更改一级分类的选中 ///collectionview将要加载头尾视图调用的方法 - (void)collectionView:(UICollectionView *)collectionView
前言 在iOS开发过程中,UICollectionView的使用仅次于UITableView的使用,而且UICollectionView的使用也很重要,需要很好的运用掌握相关知识点。...本篇博文就来讲解一下UICollectionView使用中,删除UICollectionViewCell的步骤方法,仅供参考。...使用场景:在UICollectionView的cell中,点击长按手势删除列表中的其中一个UICollectionViewCell的方法。具体实现步骤如下所示。...代理方法cellForItemAtIndexPath:中给UICollectionViewCell添加长按手势,添加长按手势的时候需要添加代理方法 UILongPressGestureRecognizer...:中获取被点击选中的NSIndexPath,给selectedIndexPath赋值 - (void)collectionView:(UICollectionView *)collectionView
一直以来,无论是Web还是iOS、Android的应用中,为了提升应用的加载等待这段时间的用户感知体验,各种技术层出不穷。其中,尤以菊花图以及由它衍生各种加载动画最为突出。...所谓Skeleton Screen Loading,即表示在页面完全渲染完成之前,用户会看到一个占位的样式,用以描绘了当前页面的大致框架,加载完成后,最终骨架屏中各个占位部分将被真实的数据替换。...对于想要显示占位效果的View,需实现协议,在协议方法中返回SomoView列表。将这些SomoView添加到somoContainer,并显示。...// CollectionView 结束动画 }; // UITableView枚举 typedef NS_ENUM(NSInteger,TABViewAnimationStyle...源码地址:https://github.com/willowtreeapps/spruce-android 前端 在前端中,通过 puppeteer 在服务端操控 headless Chrome 打开开发中的需要生成骨架屏的页面
处于绿色区域内的cell加载压力都是很小的。这就是时而掉帧时而顺滑的场景。这种场景下,用户体验是很糟糕的。 ? 那怎么解决这么问题的呢?...在iOS 10 当中,系统会把cell保持一段时间。在iOS中,如果用户把cell滑出屏幕后,如果突然又想回来,这个时候cell并不需要再走一段的生命周期了。...我们可以利用这个方法来处理在滑动中取消或者降低提前加载数据的优先级。...在iOS 9中,引入了UICollectionView的Interactive Reordering,在今年的iOS 10中,又加入了一些新的API。...六.UIRefreshControl UIRefreshControl现在可以直接在CollectionView里面使用,同样的,也可以直接在UITableView里面使用,并且可以脱离UITableViewController