加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Swift - 使用网格(UICollectionView)的自定义布局实现复杂页面

发布时间:2020-12-14 07:20:45 所属栏目:百科 来源:网络整理
导读:网格UICollectionView除了使用流布局,还可以使用自定义布局。实现自定义布局需要继承UICollectionViewLayout,同时还要重载下面的三个方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 // 这个方法返回每个单元格的位置和大小 override func layoutAttributesForItemA
网格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" "pic" "swift.png" ],
"OC" "oc.jpg" "Java" "java.png" "PHP" "php.jpeg" "JS" "js.jpeg" "HTML" "html.jpeg" "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 . forCellWithReuseIdentifier: "ViewCell" )
//默认背景是黑色和label一致
.collectionView.backgroundColor = UIColor .whiteColor()
.view.addSubview(collectionView)
}
didReceiveMemoryWarning() {
.didReceiveMemoryWarning()
}
// CollectionView行数
collectionView(collectionView: 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: 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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!