网格UICollectionView除了使用流布局,还可以使用自定义布局。实现自定义布局需要继承UICollectionViewLayout,同时还要重载下面的三个方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 这个方法返回每个单元格的位置和大小
override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath )
-> UICollectionViewLayoutAttributes ? {
}
// 返回内容区域总大小,不是可见区域
collectionViewContentSize() -> CGSize {
}
// 返回所有单元格位置属性
layoutAttributesForElementsInRect(rect: CGRect )
-> [ ]? {
}

下面实现一个自定义布局的例子,单元格有大小两种。网格从上到下,先是左边一个大单元格右边两个小单元格,接着左边两个小单元格右边一个大单元格,依次同上循环排列。
效果图如下:


--- 自定义布局CustomLayout.swift ---
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import UIKit
/**
* 这个类只简单定义了一个section的布局
*/
class CustomLayout : UICollectionViewLayout {
// 内容区域总大小,不是可见区域
{
return CGSizeMake (collectionView!.bounds.size.width,
CGFloat (collectionView!.numberOfItemsInSection(0) * 200 / 3 + 200))
}
// 所有单元格位置属性
)
]? {
var attributesArray = [ ]()
let cellCount = self .collectionView!.numberOfItemsInSection(0)
for i in 0..<cellCount {
indexPath = (forItem:i,inSection:0)
attributes = .layoutAttributesForItemAtIndexPath(indexPath)
attributesArray.append(attributes!)
}
return attributesArray
}
// 这个方法返回每个单元格的位置和大小
)
? {
//当前单元格布局属性
attribute = (forCellWithIndexPath:indexPath)
//单元格外部空隙,简单起见,这些常量都在方法内部定义了,没有共享为类成员
//let itemSpacing = 2
linespacing = 5
//单元格边长
largeCellSide: = 200
smallCellSide: = 100
//内部间隙,左右5
insets = UIEdgeInsetsMake (2,5,2,5)
//当前行数,每行显示3个图片,1大2小
line: Int = indexPath.item / 3
//当前行的Y坐标
lineOriginY = largeCellSide * (line) + (linespacing * line)
+ insets.top
//右侧单元格X坐标,这里按左右对齐,所以中间空隙大
rightLargeX = collectionView!.bounds.size.width - largeCellSide - insets.right
rightSmallX = collectionView!.bounds.size.width - smallCellSide - insets.right
// 每行2个图片,2行循环一次,一共6种位置
if (indexPath.item % 6 == 0) {
attribute.frame = CGRectMake (insets.left,lineOriginY,largeCellSide,
largeCellSide)
} else (indexPath.item % 6 == 1) {
(rightSmallX,smallCellSide,
smallCellSide)
(indexPath.item % 6 == 2) {
lineOriginY + smallCellSide + insets.top,smallCellSide)
(indexPath.item % 6 == 3) {
smallCellSide )
(indexPath.item % 6 == 4) {
(indexPath.item % 6 == 5) {
(rightLargeX,
largeCellSide)
}
attribute
}
/*
//如果有页眉、页脚或者背景,可以用下面的方法实现更多效果
func layoutAttributesForSupplementaryViewOfKind(elementKind: String!,
atIndexPath indexPath: NSIndexPath!) -> UICollectionViewLayoutAttributes!
func layoutAttributesFordecorationViewOfKind(elementKind: String!,
atIndexPath indexPath: NSIndexPath!) -> UICollectionViewLayoutAttributes!
*/
--- 主页面 ViewController.swift ---
76
ViewController UIViewController , UICollectionViewDelegate UICollectionViewDataSource
{
collectionView: UICollectionView !
//课程名称和图片,每一门课程用字典来表示
courses = [
[ "name" : "Swift" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, "pic" "swift.png" ],
"OC" "oc.jpg" "Java" "java.png" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
"PHP" "PHP.jpeg" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
"JS" "js.jpeg" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
"HTML" "html.jpeg" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
"Ruby" "ruby.png" ]
]
viewDidLoad() {
super .viewDidLoad()
layout = ()
//let layout = UICollectionViewFlowLayout()
.collectionView = (
frame: (0,view.bounds.size.width,view.bounds.height-20),
collectionViewLayout:layout)
.collectionView.delegate = self
.collectionView.dataSource = self
// 注册CollectionViewCell
.collectionView.registerClass( UICollectionViewCell . ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
forCellWithReuseIdentifier: "ViewCell" )
//默认背景是黑色和label一致
.collectionView.backgroundColor = UIColor .whiteColor()
.view.addSubview(collectionView)
}
didReceiveMemoryWarning() {
.didReceiveMemoryWarning()
}
// CollectionView行数
collectionView(collectionView: ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
numberOfItemsInSection section: ) -> {
courses.count;
}
// 获取单元格
cellForItemAtIndexPath indexPath: ) -> {
// storyboard里设计的单元格
identify: String = "ViewCell"
// 获取设计的单元格,不需要再动态添加界面元素
cell = .collectionView.dequeueReusableCellWithReuseIdentifier(
identify,forIndexPath: indexPath) as UICollectionViewCell
// 添加图片
img = UIImageView (image: UIImage (named: courses[indexPath.item][ ]!))
img.frame = cell.bounds
// 图片上面显示课程名称,居中显示
lbl = UILabel (frame: ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,cell.bounds.size.width,20))
lbl.textAlignment = NSTextAlignment . Center
lbl.text = courses[indexPath.item][ ]
cell.addSubview(img)
cell.addSubview(lbl)
cell
}
/* 自定义布局不需要调用
//单元格大小
func collectionView(collectionView: UICollectionView!,
layout collectionViewLayout: UICollectionViewLayout!,0)!important">sizeforItemAtIndexPath indexPath: NSIndexPath!) -> CGSize {
let size:Float = indexPath.item % 3 == 0 ? 200 : 100
return CGSize(width:size,height:size)
}
*/
原文出自: www.hangge.com 转载请保留原文链接: http://www.hangge.com/blog/cache/detail_591.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


效率成吨提升之代码生成器-蓝湖工具神器iOS,Android,Swift,Flutter
软件简介:蓝湖辅助工具,减少移动端开发中控件属性的复制和粘贴.待开发的功能:1.支持自动生成约束2.开发设置页面3.做一个浏览器插件,支持不需要下载整个工程,可即时操作当前蓝湖浏览页面4.支持Flutter语言模板生成5.支持更多平台,如Sketch等6.支持用户自定义语言模板
【Audio音频开发】音频基础知识及PCM技术详解
现实生活中,我们听到的声音都是时间连续的,我们称为这种信号叫模拟信号。模拟信号需要进行数字化以后才能在计算机中使用。目前我们在计算机上进行音频播放都需要依赖于音频文件。那么音频文件如何生成的呢?音频文件的生成过程是将声音信息采样、量化和编码产生的数字信号的过程,我们人耳所能听到的声音频率范围为(20Hz~20KHz),因此音频文件格式的最大带宽是20KHZ。根据奈奎斯特的理论,音频文件的采样率一般在40~50KHZ之间。奈奎斯特采样定律,又称香农采样定律。...............
见过仙女蹦迪吗?一起用python做个小仙女代码蹦迪视频
前言最近在B站上看到一个漂亮的仙女姐姐跳舞视频,循环看了亿遍又亿遍,久久不能离开!看着小仙紫姐姐的蹦迪视频,除了一键三连还能做什么?突发奇想,能不能把舞蹈视频转成代码舞呢?说干就干,今天就手把手教大家如何把跳舞视频转成代码舞,跟着仙女姐姐一起蹦起来~视频来源:【紫颜】见过仙女蹦迪吗 【千盏】一、核心功能设计总体来说,我们需要分为以下几步完成:从B站上把小姐姐的视频下载下来对视频进行截取GIF,把截取的GIF通过ASCII Animator进行ASCII字符转换把转换的字符gif根据每
自定义ava数据集及训练与测试 完整版 时空动作/行为 视频数据集制作 yolov5, deep sort, VIA MMAction, SlowFast
前言这一篇博客应该是我花时间最多的一次了,从2022年1月底至2022年4月底。我已经将这篇博客的内容写为论文,上传至arxiv:https://arxiv.org/pdf/2204.10160.pdf欢迎大家指出我论文中的问题,特别是语法与用词问题在github上,我也上传了完整的项目:https://github.com/Whiffe/Custom-ava-dataset_Custom-Spatio-Temporally-Action-Video-Dataset关于自定义ava数据集,也是后台
【视频+源码】登录鉴权的三种方式:token、jwt、session实战分享
因为我既对接过session、cookie,也对接过JWT,今年因为工作需要也对接了gtoken的2个版本,对这方面的理解还算深入。尤其是看到官方文档评论区又小伙伴表示看不懂,所以做了这期视频内容出来:视频在这里:本期内容对应B站的开源视频因为涉及的知识点比较多,视频内容比较长。如果你觉得看视频浪费时间,可以直接阅读源码:goframe v2版本集成gtokengoframe v1版本集成gtokengoframe v2版本集成jwtgoframe v2版本session登录官方调用示例文档jwt和sess
【Android App】实战项目之仿微信的私信和群聊App附源码和演示视频 超详细必看
【Android App】实战项目之仿微信的私信和群聊App(附源码和演示视频 超详细必看)
采用MATLAB对正弦信号,语音信号进行生成、采样和恢复,利用MATLAB工具箱对混杂噪声的音频信号进行滤波
采用MATLAB对正弦信号,语音信号进行生成、采样和内插恢复,利用MATLAB工具箱对混杂噪声的音频信号进行滤波
Keras深度学习实战40——音频生成
随着移动互联网、云端存储等技术的快速发展,包含丰富信息的音频数据呈现几何级速率增长。这些海量数据在为人工分析带来困难的同时,也为音频认知、创新学习研究提供了数据基础。在本节中,我们通过构建生成模型来生成音频序列文件,从而进一步加深对序列数据处理问题的了解。
  • • 效率成吨提升之代码生成器-蓝湖工具神器…
  • • 【Audio音频开发】音频基础知识及PCM技…
  • • 见过仙女蹦迪吗?一起用python做个小仙…
  • • 【Android App】实战项目之仿抖音的短视…
  • • 自定义ava数据集及训练与测试 完整版 时…
  • • 【视频+源码】登录鉴权的三种方式:tok…
  • • 【Android App】实战项目之仿微信的私信…
  • • 零基础用Android Studio实现简单的本地…
  • • 采用MATLAB对正弦信号,语音信号进行生…
  • • Keras深度学习实战40——音频生成
  • • 视频实时行为检测——基于yolov5+deeps…
  • • 数电实验 数字电子钟设计 基于quartus …
  • • 腾讯会议使用OBS虚拟摄像头
  • • 文本生成视频Make-A-Video,根据一句话…
  • • 信号处理——MATLAB音频信号加噪、滤波
  • • 【新知实验室 - TRTC 实践】音视频互动…
  • • Keras深度学习实战39——音乐音频分类
  • • C++游戏game | 井字棋游戏坤坤版配资源…

Swift - 使用网格UICollectionView的自定义布局实现复杂页面的更多相关文章

  1. html5教你做炫酷的碎片式图片切换 (canvas)

    本篇文章主要介绍了html5教你做炫酷的碎片式图片切换 (canvas) ,具有一定参考价值,有兴趣的可以了解一下

  2. ios – UICollectionView在帧更改后错误地显示单元格

    我错过了什么吗?

  3. ios – 如何将UICollectionViewCell从一个UICollectionView拖到另一个UICollectionView?

    如果是这样,我将如何实施它?

  4. xcode – 在自定义表视图单元格中嵌入集合视图

    我有一个故事板的图像,你可以看到自定义表格单元格然后底部是一个集合视图,我想填充图像–只是不知道如何?我也不确定哪些信息可能会有所帮助,所以如果有信息遗失,我很抱歉.解决方法您应该将UICollectionView的Delagate和DataSource放在自定义UITableViewCell类中.这是一个nicetutorial.它是关于tableview单元格中的tableview,但这个想法非常相似.祝好运!

  5. ios – 使用动态单元格高度时,将表格视图滚动到底部

    使用动态单元格高度时,如何将表格视图滚动到底部?出于某种原因,此代码在此方案中不起作用:谢谢!

  6. ios – 渲染模式设置为图像目录中的矢量pdf模板,但UIImageView不会在自定义单元格中设置图像

    我已将所有图像文件迁移到资产目录.所有这些都是大小为1x的pdf向量.它们设置为呈现为模板.它们在大小和颜色方面都显得很好.但是有一个来自xib的自定义TableViewCell,我有6个UIImageView链接到目录中的6个这些图像.不知何故,他们不尊重色调,既不是默认也不是自定义.尝试以编程方式更改它们,但也没有工作.这些相同的图像在主故事板内的静态单元格的另一个tableview中显示正常

  7. ios – 我的表视图在滚动时在SWIFT中重用所选单元格

    实例变量

  8. ios – 带图像而不是标题的UITableViewRowAction

    可以告诉我如何解决它,或者其他方式来做到这一点?

  9. iOS – 自定义表格单元格不是UITableView的全宽度

    我可能会犯这个错误.所以我创建了一个UITableView,它基本上有一个设置为主视图的自动布局尾随空间.我正在为这个表创建一个自定义单元格,所以我在原型单元格上进行了定制,定制了它,并为它创建了我的类.这一切都很好.我似乎无法解决的是自定义单元格不是实际表格单元格的全宽,因此只显示白色背景.如果我不使用自定义单元格,则可以使用整个宽度表单元格.我为单元格内容设置了约束,以便背景图像填充单元格.我究竟做错了什么?

  10. UITableViewCellAccessoryCheckmark涵盖iOS 7上的单元格分隔符

    在iOS7上使用此代码会导致分隔符视图被覆盖或缩短:如何修复分隔符视图?

随机推荐

  1. Swift UITextField,UITextView,UISegmentedControl,UISwitch

    下面我们通过一个demo来简单的实现下这些控件的功能.首先,我们拖将这几个控件拖到storyboard,并关联上相应的属性和动作.如图:关联上属性和动作后,看看实现的代码:

  2. swift UISlider,UIStepper

    我们用两个label来显示slider和stepper的值.再用张图片来显示改变stepper值的效果.首先,这三个控件需要全局变量声明如下然后,我们对所有的控件做个简单的布局:最后,当slider的值改变时,我们用一个label来显示值的变化,同样,用另一个label来显示stepper值的变化,并改变图片的大小:实现效果如下:

  3. preferredFontForTextStyle字体设置之更改

    即:

  4. Swift没有异常处理,遇到功能性错误怎么办?

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  5. 字典实战和UIKit初探

    ios中数组和字典的应用Applicationschedule类别子项类别名称优先级数据包contactsentertainment接触UIKit学习用Swift调用CocoaTouchimportUIKitletcolors=[]varbackView=UIView(frame:CGRectMake(0.0,0.0,320.0,CGFloat(colors.count*50)))backView

  6. swift语言IOS8开发战记21 Core Data2

    上一话中我们简单地介绍了一些coredata的基本知识,这一话我们通过编程来实现coredata的使用。还记得我们在coredata中定义的那个Model么,上面这段代码会加载这个Model。定义完方法之后,我们对coredata的准备都已经完成了。最后强调一点,coredata并不是数据库,它只是一个框架,协助我们进行数据库操作,它并不关心我们把数据存到哪里。

  7. swift语言IOS8开发战记22 Core Data3

    上一话我们定义了与coredata有关的变量和方法,做足了准备工作,这一话我们来试试能不能成功。首先打开上一话中生成的Info类,在其中引用头文件的地方添加一个@objc,不然后面会报错,我也不知道为什么。

  8. swift实战小程序1天气预报

    在有一定swift基础的情况下,让我们来做一些小程序练练手,今天来试试做一个简单地天气预报。然后在btnpressed方法中依旧增加loadWeather方法.在loadWeather方法中加上信息的显示语句:运行一下看看效果,如图:虽然显示出来了,但是我们的text是可编辑状态的,在storyboard中勾选Editable,再次运行:大功告成,而且现在每次单击按钮,就会重新请求天气情况,大家也来试试吧。

  9. 【iOS学习01】swift ? and !  的学习

    如果不初始化就会报错。

  10. swift语言IOS8开发战记23 Core Data4

    接着我们需要把我们的Rest类变成一个被coredata管理的类,点开Rest类,作如下修改:关键字@NSManaged的作用是与实体中对应的属性通信,BinaryData对应的类型是NSData,CoreData没有布尔属性,只能用0和1来区分。进行如下操作,输入类名:建立好之后因为我们之前写的代码有些地方并不适用于coredata,所以编译器会报错,现在来一一解决。

返回
顶部