Collection View的构成,我们能看到的有三个部分: Cells Supplementary Views 追加视图 (类似Header或者Footer) Decoration Views 装饰视图...@property (nonatomic) CGSize itemSize; @property (nonatomic) CGSize estimatedItemSize // 滚动方向,默认是水平...// 垂直滚动时section间宽度为该尺寸的高,而水平滚动时为宽度起作用, @property (nonatomic) CGSize headerReferenceSize; @property (nonatomic...:(NSInteger)section; // 设定指定区内Cell的最小行距,也可以直接设置UICollectionViewFlowLayout的minimumLineSpacing属性 - (CGFloat...didSelectItemAtIndexPath:(NSIndexPath *)indexPath //返回这个UICollectionView是否可以被选择 -(BOOL)collectionView
目前,有四种不同的开关可用: • TKSimpleSwitch:可在 iOS 上使用的传统开关。 • TKExchangeSwitch:通过触摸更改的开关。...AnimatedCollectionViewLayout 在项目之间滚动时,UICollectionView没有默认的过渡效果动画。...AnimatedCollectionViewLayout 是一个 UICollectionViewLayout 子类,可在不影响您现有代码的情况下向您的 UICollectionView 添加自定义过渡和动画...要使用它,您需要将库导入到您的项目中。然后,您必须创建一个 AnimatedCollectionViewLayout 对象,设置其动画设计器,并将其分配给您的 UICollectionView。...该库可用于每个 UICollectionView,水平和垂直具有动态单元格高度。 在可配置的项目中,可以配置倾斜大小,倾斜方向,倾斜角度,滚动方向,行距,项目大小以及排除第一个或最后一个单元倾斜。
前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方法。...在判断滚动条的同时也需要计算滚动条的宽度,通过本篇文章一并与大家分享。 为什么要判断滚动条 ?...为了增强用户体验,通过判断是否有滚动条而添加 margin-left 属性以抵消 overflow: hidden 之后的滚动条位置。...判断是否有滚动条的方法 其实只需要一行 JS 就可以,测试兼容 IE7 function hasScrollbar() { return document.body.scrollHeight >...计算滚动条宽度的方法 还是以弹窗为例,因为 IE 10 以上以及移动端浏览器的滚动条都是不占据页面宽度的透明样式(其中 IE 10 以上浏览器可以通过 CSS 属性还原原始的滚动条样式),所以为了进一步增强用户体验
:重用标识符]; 刷新数据:[collectionView reloadData]; 设置代理:delegate; 设置数据源:dataSource; 是否有反弹效果:bounces,默认是YES; 设置垂直方向的反弹是否有效...:alwaysBounceVertical; 设置水平方向的反弹是否有效:alwaysBounceHorizontal; 是否允许滚动:scrollEnabled; 是否显示垂直方向的滚动条:showsVerticalScrollIndicator...; 是否显示水平方向的滚动条:showsHorizontalScrollIndicator; 是否允许多选:allowsMultipleSelection; #####数据源与委托协议 集合视图的委托协议是...UICollectionViewDataSource中提供的方法如下: //提供视图中节的个数,这个方法需要注意数据的行是否能与每一行有几个单元格整除,不能整除时要多加一行 - (NSInteger)numberOfSectionsInCollectionView...为水平滚动。
: 是否应该高亮? ...这次Apple给我们带来的好康是被选中cell的自动变化,所有的cell中的子view,也包括contentView中的子view,在当cell被选中时,会自动去查找view是否有被选中状态下的改变。...比如在contentView里加了一个normal和selected指定了不同图片的imageView,那么选中这个cell的同时这张图片也会从normal变成selected,而不需要额外的任何代码。...需要注意根据滚动方向不同,header和footer的高和宽中只有一个会起作用。垂直滚动时section间宽度为该尺寸的高,而水平滚动时为宽度起作用,如图。 ...* kMyInfoCollectionCellHeight + 10; //确定是水平滚动,还是垂直滚动 UICollectionViewFlowLayout *flowLayout=
iOS UICollectionView实现跑马灯和轮播效果.gif 功能描述:WSL_RollView 是基于UICollectionView实现的支持水平和垂直两个方向上的的分页和渐进循环轮播效果...,可以设置时间间隔、渐进速率、是否循环、分页宽度和间隔,还支持高度自定义分页视图的控件。...一、实现方法 ①、 首先用UICollectionView和计时器实现一个基本的水平滚动效果,如下图,这个太简单就不在此详述。...iOS UICollectionView ②、对比上面的效果图,我们还需要解决分页的宽度和循环滚动的问题。...,示例代码请看这儿WSL_RollView;如果小伙伴们有其他的实现方法,欢迎再此留言交流?????
在上篇博客中,给大家演示了如何利用 UICollectionView 这个强大的控件去实现一个卡片轮播的效果,后来有网友联系我说:"他遇到一个问题,当他滚动的 item 宽度与屏幕宽度一致时,滚动效果是正常的...这个问题确实是存在的,因为在 UICollectionView 的属性中,有一个分页的属性:isPagingEnabled,当设置成 true 时,每次滚动的位移量等于屏幕的宽度;当不设置这个分页属性,...有人要问那是不是 UICollectionView 这个控件就只能按照屏幕的大小来分页呢!答案当然是否定的。 那自定义滚动分页该如何实现呢!...,决定了 UICollectionView 停止滚动时的偏移量,可以通过重写这个函数来实现自定义的分页滚动,重写这个函数的逻辑思路如下: 1.定义一个坐标点 CGPoint 来记录最新滚动的偏移坐标2...proposedContentOffset 记录了滚动的目标位移坐标,通过这个坐标和记录的上次滚动的坐标可以判断出是向左滚动还是向右滚动4.如果俩坐标的水平方向相减的绝对值大于某个固定值(譬如说 item
ViewController () @end @implementation ViewController (void)viewDidLoad { [super viewDidLoad]; //确定是水平滚动...{ return 10; } //定义展示的Section的个数 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)...collectionView { return 2; } //每个UICollectionView展示的内容 -(UICollectionViewCell )collectionView:(UICollectionView...被选中时调用的方法 -(void)collectionView:(UICollectionView )collectionView didSelectItemAtIndexPath:(NSIndexPath...是否可以被选择 -(BOOL)collectionView:(UICollectionView )collectionView shouldSelectItemAtIndexPath:(NSIndexPath
不同之处在于UICollectionView需要一个布局参数来决定cell是如何布局的,默认是流水布局,也就是我们最常见的形式,也就是上面图里的形式;此外,UICollectionView除了垂直滚动,...还可以设置为水平滚动,只需要改变布局参数的设置就可以了;UICollectionView的cell只能通过注册来确定重用标识符,什么叫注册,我们还是看代码: - (void)viewDidLoad {...*layout = [[UICollectionViewFlowLayout alloc] init]; // 设置滚动方式为水平,默认是垂直滚动 // [layout setScrollDirection...代码中注释了一行,就是用来设置滚动方向为水平的,效果如下: 同样的内容,滚动方式变化后,呈现的效果也会变化。...的使用方式,就像UITableView可以简单也可以做的非常多样,UICollectionView也是一种乍看很平常但可以容纳非常多想象力的布局方式,只要善加利用就可以做出很好的效果,当然,什么时候用UICollectionView
;相比 UITbleView,UICollectionView 的功能比它要强大的多,它支持水平与垂直俩种方向的布局,开发者可以完全自定义一套 layout 布局方案,实现出意想不到的效果。...思路分析 通过观察上面的图我们可以得出,这个网易云的轮播控件有三个特点,分别是: 1.支持图片手动横向滚动2.支持图片自动的滚动播放3.底部的分页控件会高亮显示出当前的图片是哪一张 好了,既然已经分析出来了它的特点...JUST DO IT 想到滚动,大家首先想到的肯定是用 UIScrollView + UIImageView 的方式来实现,但是 UICollectionView 给我们提供了更好的选择,因为它本身继承自...UIScrollView 然后又支持横向滚动,所以使用 UICollectionView 来实现横向滚动效果是最好不过的。...,但是如果要正式在 app 中使用,并且达到很好的用户体验还是有很大的优化空间的。
是一个全新的升级,它将赋予 UICollectionView 更多的可能性。...细节.jpg 布局核心 NSCollectionLayoutSize 决定了一个元素的大小。表达一个元素的 Size 有三种方法: fractional:表示一个元素相对于他的父视图的比例。...,它有三种形式 水平(horizontal) 垂直(vertical) 自定义(custom) Group 的大小页需要通过 NSCollectionLayoutSize 决定。...效果.jpg 滚动Section 通过设置 Section 的 orthogonalScrollingBehavior 参数,可以实现 Section 的不同的滚动方式。...= .continuous 总结 UICollectionViewCompositionalLayout 彻底颠覆了 UICollectionView 的布局体验,大大拓展了 UICollectionView
UICollectionView横向分页的问题 情况 直接看图 滚前 滚后 已经设置collectionView的isPagingEnabled为true了,可是出现了这种情况,原因就是collectionView...的contentSize不够。...layer = ; contentOffset: {187.5, 0}; contentSize: {562.5, 192.25} > 解决方案 有两种方式可以解决...),让UICollectionView在创建的时候使用了它 在 LXFChatMoreCollectionLayout.swift 中我们需要重写父类的collectionViewContentSize...ceil(2)=ceil(1.2)=cei(1.5)=2.00 效果 至于如何让item水平布局,请参考《iOS - Swift UICollectionView横向分页滚动,cell左右排版》 附上相关项目
今天有个需求需要实现Excel的效果:如图 ? image.png 提醒 这只是一个demo,没有考虑那么多需求,也只是提供一个学习的思路。有具体的需求可以修改代码,避免重复造轮子。...实现的思路 顶部的Header 最左侧[左上头]放的是一个UILabel,后面就放的是一个UICollectionView。...头部下面 头部下面整体是一个UITableView,然后每个Cell的Header部分也是UlLabel,后面也是一个UICollectionView 难的部分 左右滚动 左右滚动的时候左边Header...和顶部Header最左边固定,其他部分跟随滚动 上下滚动 顶部Header固定,其他部分跟随滚动 滚动部分核心代码 整个滚动Demo就这部分难一点,其他的都很简单,看看都懂的。...class]]) { UICollectionView *collectionView = (UICollectionView *)view;
我们知道在 UICollectionView 的属性中,有一个分页的属性:isPagingEnabled,当设置成 true 时,每次滚动的位移量等于它自身 frame 的宽度;当不设置这个分页属性,它的默认值是...image 有人要问那是不是 UICollectionView 这个控件就只能按照屏幕的大小来分页呢!答案当然是否定的。我们还可以用自定义的方式来实现分页滚动。...,决定了 UICollectionView 停止滚动时的偏移量,可以通过重写这个函数来实现自定义的分页滚动,重写这个函数的逻辑思路如下: 定义一个坐标点 CGPoint 来记录最新滚动的偏移坐标 定义俩个值分别为...记录了滚动的目标位移坐标,通过这个坐标和记录的上次滚动的坐标可以判断出是向左滚动还是向右滚动 如果俩坐标的水平方向相减的绝对值大于某个固定值(譬如说 item 宽度的 8 分之一),则可以判断发生了分页...Cell 的样式有不同之处但也有相似的地方,所以我们创建了一个基类 BaseViewCell, 用于展示 Cell 中相同的地方;然后我们在各个 Cell 中构建不同样式的 UI,利用 UICollectionView
1.2 UIScrollView常见的几个重要控件 UITableView UICollectionView UITextView 1.3 UIScrollView常见的重要属性 属性名 作用 contentSize...设置UIScrollView的滚动范围 contentOffset UIScrollView当前滚动的位置 contentInset 增加滚动视图四周的增加滚动范围 bounces 是否有弹簧效果,默认是开启的...scrollEnabled 是否能滚动 showsHorizontalScrollIndicator 是否显示水平方向的滚动条 showsVerticalScrollIndicator 是否显示垂直方向的滚动条...决定了水平方向滚动距离 contentSize 的 height 决定了垂直方向滚动距离 2.3 contenInset contentInset是用来设置内边距。...有一个重要属性: UIEdgeInsetsMake 用来描述内部控件最终可以弹回的位置属性,里面的值是上、左、下右
最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。...由于习惯用SDCycleScrollView来做广告图的无限循环滚动,所以这里文字无限滚动的核心是源于此。 效果如下: ?...demo效果 考虑到这种滚动需求样式的多变性,这里的封装还是基于 UICollectionView,提供上下和左右滚动两种方式,而且基于UICollectionView的复用特性,性能也是不错的。...didScrollToIndex:(NSInteger)index; 平时用习惯了,所以控制滚动的属性也是参照SDCycleScrollView。...BOOL infiniteLoop; /** 是否自动滚动,默认Yes */ @property (nonatomic,assign) BOOL autoScroll; /** 是否允许用户拖动,默认
HorizontalScrollCell - HorizontalScrollCell是一款使用方便的水平方向可滚动的单元格,适用于UICollectionView中实现水片方向滚动视图。 。...VOMetroLayoutDemo - Metro风格的UICollectionView, 目前只支持横向布局,仅在iPad上应用。...LxTabBarController - 改变了原生tabbar切换tab时的生硬效果,并加入滑动切换手势(有和界面上的其它手势发生冲突的风险,可根据具体项目予以关闭),swift版本。...横向展示文本内容的自定义cell - 可以横向展示文本内容的自定义cell,根据文本无限滚动。...XLPlainFlowLayout - 可以让UICollectionView的header也支持悬停效果,类似于tableView的Plain风格。
iOS流布局UICollectionView系列六——将布局从平面应用到空间 一、引言 前面,我们将布局由线性的瀑布流布局扩展到了圆环布局,这使我们使用UICollectionView的布局思路大大迈进了一步...,这次,我们玩的更加炫一些,想办法将布局应用的空间,你是否还记得,在管理布局的item的具体属性的类UICollectionViewLayoutAttributrs类中,有transform3D这个属性...UICollectionView在3D控件布局的魅力。...而我们这次要讨论的布局则不同,pickerView会随着我们手指的拖动而进行滚动,因此UICollectionView中的每一个item的布局是在不断变化的,所以这次,我们采用动态配置的方式,在layoutAttributesForItemAtIndexPath...四、让其循环滚动的逻辑 我们再进一步,如果滚动可以循环,这个控件将更加炫酷,添加这样的逻辑也很简单,通过监测scrollView的偏移量,我们可以对齐进行处理,因为collectionView
数据联动 在某一列滚动的时候,重新设置联动列的显示数据,然后进行刷新操作。...UIScrollView、UIPageControl UIScrollView 滚动控件 三个重要属性 contentSize:UIScrollView 滚动的范围。...banner = UIScrollView(frame: CGRect(x: 0, y: 0, width: Int(bannerW), height: bannerH)) // 是否显示滚动条...UICollectionViewFlowLayout 与 UITableView 不同,UICollectionView 需要提供布局参数,常用的有UICollectionViewFlowLayout,...,它有三种形式: 水平(horizontal) 垂直(vertical) 自定义(custom) Group 的大小页需要通过 NSCollectionLayoutSize 决定。
UICollectionViewDataSource 用来管控 UICollectionView 的实际数据:例如有多少 section,每个 section 有多少个 item,每个 item 对应的...比如具体 item 的尺寸大小, item 之间的间距,header 和 footer 的大小和间距,以及 UICollectionView 的滚动方向。...首先检查 UITableViewCell 是否进行了复用。对于复杂视图的创建,可以采用惰性加载来推迟创建时间。尽量减少视图层级也是很好的优化方法。...假设我们已经有了 UICollectionView,现在要做的就是定制化每一个 cell,让他们的高度根据其实际内容设定,从而实现瀑布流。...网上对于瀑布流有很多实现,大家不妨借鉴的同时,亲自动手,以加深对 UICollectionView 的理解。 访问我的Github仓库查看更多精彩分享
领取专属 10元无门槛券
手把手带您无忧上云