//
// ViewController.swift
// UIKitTest
//
// Created by travey on 2018/11/9.
// Copyright © 2018 ZhouShijie. All rights reserved.
//
import UIKit
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// 首先方块的布局,注意这里是方块之间的,而不是方块内部的,这个layout是Table没有的哦
// 我们采用流式布局UICollectionViewFlowLayout,它继承UICollectionViewLayout
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 150, height: 150) // 设置方块长宽
layout.scrollDirection = UICollectionView.ScrollDirection.horizontal // 设置滑动的方向是水平还是竖直,这里选择的是水平
// Ps. 下面的间距是针对滑动方向而言的,是相对的而不是绝对的
layout.minimumLineSpacing = 30 // 行最小间距
layout.minimumInteritemSpacing = 10 // 列最小间距
// 创建一个网格
let collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) // 传入的第二个参数要选择布局,我们用上面设置好的布局就可以了
collectionView.register(NSClassFromString("UICollectionViewCell"), forCellWithReuseIdentifier: "cell") // 不同于TableView,网格的cell必须要注册
// 实现代理
collectionView.delegate = self
collectionView.dataSource = self
self.view.addSubview(collectionView)
}
// 返回section数
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
// 返回对应section的方块数
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
// 返回对应的cell
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) // 取一个
if indexPath.row == 5 {
cell.backgroundColor = UIColor.red
} else {
cell.backgroundColor = UIColor.green
}
return cell
}
}
我们还可以对每个cell进行大小的设置
//
// ViewController.swift
// UIKitTest
//
// Created by travey on 2018/11/9.
// Copyright © 2018 ZhouShijie. All rights reserved.
//
import UIKit
// 这里继承了UICollectionViewDelegateFlowLayout,这个类是UICollectionViewDelegate的子类,因此无需再次继承UICollectionViewDelegate
class ViewController: UIViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// 首先方块的布局,注意这里是方块之间的,而不是方块内部的,这个layout是Table没有的哦
// 我们采用流式布局UICollectionViewFlowLayout,它继承UICollectionViewLayout
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 150, height: 150) // 设置方块长宽
layout.scrollDirection = UICollectionView.ScrollDirection.vertical // 设置滑动的方向是水平还是竖直,这里选择的是水平
// Ps. 下面的间距是针对滑动方向而言的,是相对的而不是绝对的
layout.minimumLineSpacing = 10 // 行最小间距
layout.minimumInteritemSpacing = 30 // 列最小间距
// 创建一个网格
let collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) // 传入的第二个参数要选择布局,我们用上面设置好的布局就可以了
collectionView.register(NSClassFromString("UICollectionViewCell"), forCellWithReuseIdentifier: "cell") // 不同于TableView,网格的cell必须要注册
// 实现代理
collectionView.delegate = self
collectionView.dataSource = self
self.view.addSubview(collectionView)
}
// 返回section数
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
// 返回对应section的方块数
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 9
}
// 返回对应的cell
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) // 取一个
if indexPath.row == 5 {
cell.backgroundColor = UIColor.red
} else {
cell.backgroundColor = UIColor.green
}
return cell
}
// 在这里可以设置每个方块的大小
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let temp = indexPath.row % 3
// 0表示第一列,1是第二列,2是第三列
switch temp {
case 0:
return CGSize(width: 80, height: 80)
case 1:
return CGSize(width: 140, height: 140)
case 2:
return CGSize(width: 40, height: 40)
default:
return CGSize(width: 0, height: 0)
}
}
}