功能特点 实现了菜单切换的视觉差,效果棒棒哒; 使用简单,创建一个控制器直接继承GFPageViewController,设置需要添加的子控制器、标题、副标题就搞定; 菜单大部分的样式都可进行自定义;...组件使用 ▐ 4.1 基本使用方式 创建一个控制器继承自GFPageViewController,创建完之后给控制器设置需要添加的子控制器(Array)、标题(Array)、副标题(Array): #...; /** 标题未选中时的颜色 */ @property (nonatomic, strong) UIColor *normalTitleColor; /** 标题选中时的颜色 */ @property...实现: 知道了原理,那就开始构思: 1、我的实现思路是用UICollectionView来实现滚动菜单; 2、需要两个UICollectionView,UICollectionViewCell的文字内容一样...我的初衷其实就是把这个滚动菜单封装出来,后来发现使用这个菜单的大部分情况都是和多个子控制器一起使用,所以就再进行了一步封装,把控制器的逻辑都封装到了GFPageViewController控制器中。
(nonatomic, strong) Class cellClass; //单个collectionView中使用的cell类型, 需要实现TBCollectionViewCellProtocol...UICollectionView 红色的是UICollectionViewCell 下方小点点是TBScrollPageControl 关键代码: 根据setDataList传入的数据创建CollectionView...并为其布局 - (void)initCollectionViews { _bgScrollView.contentSize = CGSizeMake(TBHorizontalItemListViewWidth...= 0; for (NSInteger i = 0; i < _listData.count; i++) { UICollectionViewFlowLayout *flowLayout...*collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:flowLayout];
标准的UICollectionView包含三个部分,它们都是UIView的子类: • Cells 用于展示内容的主体,对于不同的cell可以指定不同尺寸和不同的内容,这个稍后再说 • Supplementary...但值得注意的时,在UICollectionView中,不仅cell可以重用,Supplementary View和Decoration View也是可以并且应当被重用的。...1.6 UICollectionViewLayout 这是UICollectionView和UITableView最大的不同。...需要注意根据滚动方向不同,header和footer的高和宽中只有一个会起作用。垂直滚动时section间宽度为该尺寸的高,而水平滚动时为宽度起作用,如图。 ...[[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout: _flowLayout]; 要点1:单元格尺寸计算时要来考虑间隔线宽度的影响
这个控件的核心技术点汇总齐全,毕竟 UICollectionView 使用的范围太广泛了。...,分别是: 1.UICollectionView 对象2.追加视图类型,用于区别是 header 还是 footer3.IndexPath 对象,用于判断是哪个 section,从而初始化不同的 headerView...section 设置不同的背景颜色的。...事实上,它既不是 Cell 视图,也不是 Supplementary View,而是 UICollectionView 的 Decoration View;Decoration View 不同与前两者,...但当我真正的去整理它的一些技术点时,我发现它实在是太灵活了,以前觉得追加视图,装饰视图这些东西很简单,几行代码的事情,但事实上,当你想要去实现一些高度自定义的界面的时候,你才会认识到自己的不足,你并没有对这些知识有更深层次的认知
UICollectionView横向分页的问题 情况 直接看图 滚前 滚后 已经设置collectionView的isPagingEnabled为true了,可是出现了这种情况,原因就是collectionView...的contentSize不够。...: {562.5, 192.25} > 解决方案 有两种方式可以解决,数据只有11个,要分两页需要16个,那我们可以直接添加数据到16个,然后在dataSource中返回cell时进行判断及处理即可。...),让UICollectionView在创建的时候使用了它 在 LXFChatMoreCollectionLayout.swift 中我们需要重写父类的collectionViewContentSize...,将contentSize取出来修改为我们自己创建的newSize就可以了代码如下 override var collectionViewContentSize: CGSize { let size
使用流式布局 继承 UICollectionViewDataSource,UICollectionViewDelegateFlowLayout 设置 Swift self.collectionView.register...; flowLayout.minimumInteritemSpacing = 0; flowLayout.minimumLineSpacing = 0; self.collectionView.collectionViewLayout...; flowLayout.minimumInteritemSpacing = 0; flowLayout.minimumLineSpacing = 0; self.collectionView.collectionViewLayout...的下标 NSIndexPath *firstIndexPath = [[self.collectionView indexPathsForVisibleItems] firstObject];...{ header.titleLabel.text = "推荐分类" } return header } 使用自定义布局 继承 UICollectionViewDataSource
在这里插入图片描述 I 、UICollectionView 从右向左对齐 本文按钮的视图结构 bottomV 内部采用UICollectionView进行布局。...UICollectionViewCell内部包含子视图自定义按钮ERPbtn4Radius 1.1 核心步骤 首先,在创建UICollectionView时,对其进行了水平翻转: [_...collectionView setTransform:CGAffineTransformMakeScale(-1,1)]; 在更新UICollectionViewCell的数据模型时,对它的contentView...//.设置每一行之间的间距 flowLayout.minimumLineSpacing = 0; flowLayout.minimumInteritemSpacing =...上从右向左对齐(Aligning right to left on UICollectionView) //1、首先,在创建UICollectionView时,我对其进行了水平翻转:
iOS流布局UICollectionView系列四——自定义FlowLayout进行瀑布流布局 一、引言 前几篇博客从UICollectionView的基础应用到设置UICollectionViewFlowLayout...这种布局无疑在app的应用中更加广泛,商品的展示,书架书目的展示,都会倾向于采用这样的布局方式,当然,通过自定义FlowLayout,我们也很容易实现。...总之,FlowLayout类将每个item的位置等布局信息放在一个数组中,在collectionView布局时,会调用FlowLayout类layoutAttributesForElementsInRect... //这个数组的主要作用是保存每一列的总高度,这样在布局时,我们可以始终将下一个Item放在最短的列下面 CGFloat colHight[2]={self.sectionInset.top...后,我们在ViewController中进行使用: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup
[1240] 当一个屏幕无法展示 App 需要展示的所有内容时,就是 UIScrollView 大展拳脚的时候:通过使用 UIScrollView,用户可以滑动或是缩放屏幕,来看单个屏幕无法展示的内容。...如何定制不同 Cell 的 UI、如何与用户交互、如何与服务器端数据同步、如何在滑动时最大限度保证界面的流畅,这些都是考察的要点,是一个 iOS 工程师必备的基本技能。...绝大多数 UITableViewCell 的构图都一样,只是内容不同而已。...所以我们将同一类型的 UITableViewCell 标记为相同的 Identifier,然后用reuseIdentifier 去进行构建,配合不同内容进行批量使用。...我们知道要定制化 UICollectionView 的 layout 就一定要使用 UICollectionViewLayout。
iOS UICollectionView实现跑马灯和轮播效果.gif 功能描述:WSL_RollView 是基于UICollectionView实现的支持水平和垂直两个方向上的的分页和渐进循环轮播效果...iOS UICollectionView ②、对比上面的效果图,我们还需要解决分页的宽度和循环滚动的问题。...自定义分页宽度:默认的分页宽度是UICollectionView的宽度,所以当分页宽度的不等于UICollectionView的宽度或分页间隔不等于0时会出现错误,这时就需要我们通过自定义UICollectionViewFlowLayout.../** 返回值决定了collectionView停止滚动时的偏移量 手指松开后执行 * proposedContentOffset:原本情况下,collectionView停止滚动时最终的偏移量 *...,前边尾首相连需要UICollectionView可见范围内的数据源后边的元素cell,后边首尾相连需要UICollectionView可见范围内的数据源前边的元素cell //获取首尾相连循环滚动时需要用到的元素
iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局 一、引言 前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类...UICollectionView的简单使用:http://my.oschina.net/u/2340880/blog/522613 UICollectionView相关协议方法:http://my.oschina.net...二、将九宫格式的布局进行升级 在第一篇博客中,通过UICollectionView,我们很轻松的完成了一个九宫格的布局,但是如此中规中矩的布局方式,有时候并不能满足我们的需求,有时我们需要每一个...Item展示不同的大小,代码如下: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after...的相关属性UICollectionViewDelegateFlowLayout 上面的方法在创建FlowLayout时静态的进行设置,如果我们需要动态的设置这些属性,就像我们例子中的,每个
在上篇博客中,给大家演示了如何利用 UICollectionView 这个强大的控件去实现一个卡片轮播的效果,后来有网友联系我说:"他遇到一个问题,当他滚动的 item 宽度与屏幕宽度一致时,滚动效果是正常的...这个问题确实是存在的,因为在 UICollectionView 的属性中,有一个分页的属性:isPagingEnabled,当设置成 true 时,每次滚动的位移量等于屏幕的宽度;当不设置这个分页属性,...,决定了 UICollectionView 停止滚动时的偏移量,可以通过重写这个函数来实现自定义的分页滚动,重写这个函数的逻辑思路如下: 1.定义一个坐标点 CGPoint 来记录最新滚动的偏移坐标2...,然后返回 UICollectionView 停止滚动时的偏移量 Talk is cheap, show me the code, 代码实现如下: class RowStyleLayout: UICollectionViewFlowLayout...: CGFloat = 0 // 修改之前记录的位置,如果小于最小的contentsize或者最大的contentsize则重置值 if lastOffset.x <
UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的。本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流。...一.先入为主 先来看一下不同配置参数下运行后的效果吧,每张截图的列数和Cell之间的边距都有所不同,瀑布流的列数依次为2,3,8。有密集恐惧证的童鞋就不要看这些运行效果图了,真的会看晕的。...下面这些运行效果就是修改不同的配置参数来进行布局的。看图吧,关于瀑布流的效果就不啰嗦了。以下的效果就是使用自定义布局做的,接下来将会介绍一下其实现原理。 ? 二....Cell的高度,把每个Cell的高度记录在数组中,便于Cell加载时使用。...参考文章: iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流
UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的。本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流。...一.先入为主 先来看一下不同配置参数下运行后的效果吧,每张截图的列数和Cell之间的边距都有所不同,瀑布流的列数依次为2,3,8。有密集恐惧证的童鞋就不要看这些运行效果图了,真的会看晕的。...下面这些运行效果就是修改不同的配置参数来进行布局的。看图吧,关于瀑布流的效果就不啰嗦了。以下的效果就是使用自定义布局做的,接下来将会介绍一下其实现原理。 ? 二. ...ContentSize的Width就是屏幕的宽度,而ContentSize的高度是一列中最后一个Cell的Y坐标加上其自身高度的最大值。在此函数中会调用求CellY数组中的最大值。...根据Cell的最小高度和最大高度来利用随机数计算每个Cell的高度,把每个Cell的高度记录在数组中,便于Cell加载时使用。
在使用UICollectionView开发无缝隙或者间隙为1px的页面的时候应该会遇到这样的问题(iPhone 5s 没有问题),明明是把屏幕四等分了,但为什么会有下图的空白间隙呢?...; flowLayout.itemSize = CGSizeMake(Wi/4.0, 60);//算出来的宽度是93.75 flowLayout.minimumLineSpacing = 0...; flowLayout.minimumInteritemSpacing = 0; _collectionView = [[UICollectionView alloc] initWithFrame...:CGRectMake(0, 0, Wi, He) collectionViewLayout:flowLayout]; 发现代码也是没有问题啊,可为什么会有这样呢?...果然还是从简书找到解决方法UICollectionView 缝隙修复,这里我结合我的理解做进一步解释。
的滚动方向是横向的 随着 UICollectionView 滚动,Cell 会自动的进行缩放,当 Cell 的中心点与 UICollectionView 的中心点重合时放大,偏离中心点时缩小 Cell...第二步,要实现 Cell 随 UICollectionView 滚动时具有缩放效果,就需要找一个合适的时机对 Cell 进行缩放,我的思路是先计算出 UICollectionView 整体滚动内容的中心点的...同学你讲的没错,但是当我们 Cell 的 width 加上边距等如果不占满 UICollectionView,那么就会出现一个问题,虽然你实现了分页效果,但是你的 Cell 在滚动的过程中是不会居中的....读过我前几篇 UICollectionView 系列的小伙伴们,不知道你们还有没有印象,我写过一篇教程叫做 "使用 UICollectionView 实现分页滑动效果" 这里附上链接(使用 UICollectionView...UICollectionView 停止滚动时,返回一个新的偏移点坐标,它有俩个参数,第一个参数 proposedContentOffset 指的是滚动将要停止时的偏移点坐标,第二个参数 velocity
这里就不绕弯子了,当然是用最常用的内容展示神器 UICollectionView 这个控件了,读完本篇文章你会发现真是万物皆可使用 UICollectionView。...我们知道在 UICollectionView 的属性中,有一个分页的属性:isPagingEnabled,当设置成 true 时,每次滚动的位移量等于它自身 frame 的宽度;当不设置这个分页属性,它的默认值是...,决定了 UICollectionView 停止滚动时的偏移量,可以通过重写这个函数来实现自定义的分页滚动,重写这个函数的逻辑思路如下: 定义一个坐标点 CGPoint 来记录最新滚动的偏移坐标 定义俩个值分别为...frame.size.width - r.width - 40)/2, vertical: 0) self.setPositionAdjustment(offset, for: .search) } } 当我们点击顶部的搜索框时..., 用于展示 Cell 中相同的地方;然后我们在各个 Cell 中构建不同样式的 UI,利用 UICollectionView 这一神器实现了这些效果;最后,实现了简单的搜索功能。
1 简介 UIScrollView 是负责滚动的视图。苹果最强大的地方就在于其良好的UI展示,和UE体验。如果不会很好的使用UIScrollView,就等于丧失了苹果一般的法力。...移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限。当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容。...1.2 UIScrollView常见的几个重要控件 UITableView UICollectionView UITextView 1.3 UIScrollView常见的重要属性 属性名 作用 contentSize...,不会滚动 如果指定的区域完全超出contentSize的范围,不会滚动 如果指定的区域超越了当前可视区域,但没有超出contentSize的区域,可以滚动 -(void)scrollRectToVisible...scrollView 要滚动就必须设置了滚动视图的 contentSize contentSize 的 width 决定了水平方向滚动距离 contentSize 的 height 决定了垂直方向滚动距离
问题反馈 线上突发一个Top1的crash告警,场景是UICollectionView在删除的时候触发。...用户点击cell跳转界面后,又触发了原来UICollectionView的cell删除动画; 从slardar(APM)的聚合信息,可以看到: 4、最后页面是并不是原来UICollectionView...用iOS 12设备找到复现路径: 先正常触发UICollectionView的初始化和cell加载 => 从UICollectionView触发界面跳转,进入下一级界面 => 触发删除Cell的业务逻辑...有一个逻辑是会把最近使用的cell排在最前面,于是从UICollectionView点击cell发生界面跳转后会触发UICollectionView刷新并调reloadData。...= ; layer = ; contentOffset: {0, 0}; contentSize:
自定义的CollectionView可谓是非常灵活,其灵活性也决定了其功能的强大。CollectionView的自定义就是其Cell高度可定制的属性,通过对Cell赋值不同的属性来达到自定义的目的。...切换图片时进行一个360度的旋转,并且修改Cell的层级,当前显示的图片层级最高。并且移动时,如果要显示的图片不在屏幕中央就做一个位置矫正。点击图片时,使用仿射变换使其放大,再点击使其缩小。...接下来将会详细的介绍其实现方案。 ? 二.该自定义布局的使用方式 我们先看一下该自定义布局是如何使用的,然后再通过使用方式来逐步介绍它是如何实现的。...预加载布局方法, 该方法会在UICollectionView加载数据时执行一次,在该方法中负责调用一些初始化函数。具体如下所示。...重写这个方法是为了为每个Cell设定不同的属性值。
领取专属 10元无门槛券
手把手带您无忧上云