網(wǎng)格UICollectionView除了使用流布局，還可以使用自定義布局。實(shí)現(xiàn)自定義布局需要繼承UICollectionViewLayout，同時(shí)還要重載下面的三個(gè)方法：
// 內(nèi)容區(qū)域總大小，不是可見區(qū)域
override var collectionViewContentSize: CGSize {
}
// 所有單元格位置屬性
override func layoutAttributesForElements(in rect: CGRect)
-> [UICollectionViewLayoutAttributes]? {
}
// 這個(gè)方法返回每個(gè)單元格的位置和大小
override func layoutAttributesForItem(at indexPath: IndexPath)
-> UICollectionViewLayoutAttributes? {
}
下面實(shí)現(xiàn)一個(gè)自定義布局的例子，單元格有大小兩種。網(wǎng)格從上到下，先是左邊一個(gè)大單元格右邊兩個(gè)小單元格，接著左邊兩個(gè)小單元格右邊一個(gè)大單元格，依次同上循環(huán)排列。
效果圖如下：
Simulator Screen Shot - iPhone SE (2nd generation) - 2020-06-28 at 16.29.08.png
自定義布局 CustomLayout.swift
import UIKit
class CustomLayout: UICollectionViewLayout {
// 內(nèi)容區(qū)域總大小，不是可見區(qū)域
override var collectionViewContentSize: CGSize {
// 寬度就是屏幕寬度減去左右邊距
let width = collectionView!.bounds.size.width - collectionView!.contentInset.left
- collectionView!.contentInset.right
// 一行三個(gè)，一個(gè)大的兩個(gè)小的，
let height = CGFloat((collectionView!.numberOfItems(inSection: 0) + 1) / 3)
* (width / 3 * 2)
return CGSize(width: width, height: height)
}
// 所有單元格位置屬性
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
// 創(chuàng)建屬性數(shù)組
var attributesArray = [UICollectionViewLayoutAttributes]()
// 獲取單元格個(gè)數(shù)
let itemCount = self.collectionView!.numberOfItems(inSection: 0)
// 循環(huán)創(chuàng)建單元格的屬性
for i in 0..<itemCount {
let indexPath = IndexPath(item: i, section: 0)
let layoutAttributes = self.layoutAttributesForItem(at: indexPath)
attributesArray.append(layoutAttributes!)
}
return attributesArray
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
// 獲取當(dāng)前的布局屬性
let attribute = UICollectionViewLayoutAttributes(forCellWith: indexPath)
// 單元格邊長
let largeCellSide = collectionViewContentSize.width / 3 * 2
let smallCellSide = collectionViewContentSize.width / 3
// 當(dāng)前行數(shù),每行顯示3個(gè)圖片，1大2小
let line: Int = indexPath.item / 3
// 當(dāng)前y坐標(biāo)的值
let lineOriginY = CGFloat(line) * largeCellSide
//右側(cè)單元格X坐標(biāo)，這里按左右對(duì)齊，所以中間空隙大
// 大單元格在左
let rightLargeX = collectionViewContentSize.width - largeCellSide
// 大單元格在右
let rightSmallX = collectionViewContentSize.width - smallCellSide
// 每行2個(gè)圖片，2行循環(huán)一次，一共6種位置
if (indexPath.item % 6 == 0) {
attribute.frame = CGRect(x:0, y:lineOriginY, width:largeCellSide,
height:largeCellSide)
} else if (indexPath.item % 6 == 1) {
attribute.frame = CGRect(x:rightSmallX, y:lineOriginY, width:smallCellSide,
height:smallCellSide)
} else if (indexPath.item % 6 == 2) {
attribute.frame = CGRect(x:rightSmallX,
y:lineOriginY + smallCellSide,
width:smallCellSide, height:smallCellSide)
} else if (indexPath.item % 6 == 3) {
attribute.frame = CGRect(x:0, y:lineOriginY, width:smallCellSide,
height:smallCellSide )
} else if (indexPath.item % 6 == 4) {
attribute.frame = CGRect(x:0,
y:lineOriginY + smallCellSide,
width:smallCellSide, height:smallCellSide)
} else if (indexPath.item % 6 == 5) {
attribute.frame = CGRect(x:rightLargeX, y:lineOriginY,
width:largeCellSide,
height:largeCellSide)
}
return attribute
}
}
/*
//如果有頁眉、頁腳或者背景，可以用下面的方法實(shí)現(xiàn)更多效果
func layoutAttributesForSupplementaryViewOfKind(elementKind: String!,
atIndexPath indexPath: NSIndexPath!) -> UICollectionViewLayoutAttributes!
func layoutAttributesForDecorationViewOfKind(elementKind: String!,
atIndexPath indexPath: NSIndexPath!) -> UICollectionViewLayoutAttributes!
*/
主頁面 ViewController.swift
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource
{
var collectionView: UICollectionView!
//課程名稱和圖片，每一門課程用字典來表示
let dateSource = [
["name":"Swift","pic":"swift.png"],
["name":"Xcode","pic":"xcode.png"],
["name":"Java","pic":"java.png"],
["name":"PHP","pic":"php.png"],
["name":"JS","pic":"js.png"],
["name":"React","pic":"react.png"],
["name":"Ruby","pic":"ruby.png"],
["name":"HTML","pic":"html.png"],
["name":"C#","pic":"c#.png"]
]
override func viewDidLoad() {
super.viewDidLoad()
/// 設(shè)置UI
setupUI()
}
/// 設(shè)置UI
func setupUI()
{
let layout = CustomLayout()
let frame = CGRect(x:0, y:20, width: view.bounds.size.width,
height:view.bounds.height-20)
collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)
collectionView.register(collectionViewCell.self, forCellWithReuseIdentifier: "collectionViewCell")
collectionView.delegate = self
collectionView.dataSource = self
collectionView.backgroundColor = UIColor.white
view.addSubview(collectionView)
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return dateSource.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "collectionViewCell", for: indexPath) as! collectionViewCell
let data = dateSource[indexPath.row]
cell.imageView.image = UIImage(named: data["pic"] ?? "");
cell.titleLabel.text = data["name"] ?? ""
return cell
}
}
class collectionViewCell: UICollectionViewCell
{
var titleLabel: UILabel!
var imageView: UIImageView!
override init(frame: CGRect) {
super.init(frame: frame)
imageView = UIImageView()
imageView.frame = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height)
imageView.contentMode = .scaleAspectFit
titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: self.bounds.size.width, height: 20))
titleLabel.textAlignment = .center
titleLabel.textAlignment = .center
titleLabel.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.2)
addSubview(imageView)
addSubview(titleLabel)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
原文出自：www.hangge.com 轉(zhuǎn)載請(qǐng)保留原文鏈接：https://www.hangge.com/blog/cache/detail_591.html
