最近初学了IOS相关,对一些相关知识进行整理
一、UICollectionView的使用
这一次需求需要实现的是类似于安卓网格布局的效果,为2X2的网格布局
(1)首先定义一个layout,这个就类似于安卓的LayoutManager
let layout = NoCenterLineFlowLayout()
layout.scrollDirection = .vertical //垂直滑动
layout.itemSize = CGSizeMake(Screen_Width / 2, 157)
//取消item间的间距
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
这里的NoCenterLineFlowLayout是为了去除中间多余的分割线,所以自定义了一个Layout,继承UICollectionViewFlowLayout,如下:
//去除多余分割线的FlowLayout
class NoCenterLineFlowLayout: UICollectionViewFlowLayout {
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let attributes = super.layoutAttributesForElements(in: rect)
guard attributes != nil else { return nil }
for i in 1..<attributes!.count {
let current = attributes![i]
let original = attributes![i-1].frame.maxX
if original + current.frame.width <= collectionViewContentSize.width {
current.frame.origin.x = original
}
}
return attributes
}
}
(2)定义一个UICollectionView,并添加到视图中
class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
private var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
collectionView = UICollectionView(frame: CGRect(x: 0, y:titleLabel.frame.maxY, width: Screen_Width, height: 314), collectionViewLayout: layout)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.delaysContentTouches = false
collectionView.register(WeatherCollectionViewCell.self, forCellWithReuseIdentifier: "Weather")
view.addSubview(collectionView)
}
}
WeatherCollectionViewCell则是自定义的item视图,这里我是纯代码写法(其实可以托拉拽的),继承UICollectionViewCell,如下:
import UIKit
class WeatherCollectionViewCell: UICollectionViewCell {
var imageView: UIImageView!
var title: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.white
imageView = UIImageView(frame: CGRect(x: 9, y: 0, width: 162, height: 122))
title = UILabel(frame: CGRect(x: imageView.frame.minX, y: self.imageView.frame.maxY, width: 162, height: 35))
title.textColor = UIColor.black
title.font = UIFont.systemFont(ofSize: 14)
self.addSubview(imageView)
self.addSubview(title)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
ViewController还实现了UICollectionViewDelegate, UICollectionViewDataSource两个类,此时就可以在ViewController中对UICollectionView进行设置,例如点击事件、点暗效果、分区个数以及分区包含多少个item等,如下:
//一个分区中的item个数
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//当一个ViewController中有多个UICollectionView时,可以做如下判断
if collectionView == WeatherCollectionView {
return 4
} else {
return weatherImgData.count
}
}
//分区个数
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
//点击事件
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
....
}
//点暗效果 点击背景色为灰色
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
if collectionView == WeatherCollectionView {
collectionView.cellForItem(at: indexPath)?.backgroundColor = UIColor.lightGray
}
}
//点暗效果 松开背景色恢复为白色
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
if collectionView == WeatherCollectionView {
collectionView.cellForItem(at: indexPath)?.backgroundColor = UIColor.white
}
}
//设置数据,注意withReuseIdentifier要和上面的UICollectionView.register时设置的一致
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == WeatherCollectionView {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Weather", for: indexPath) as! WeatherCollectionViewCell
cell.imageView.image = UIImage(named: ["img_xxx_1", "img_xxx_2", "img_xxx_3", "img_xxx_4"][indexPath.row])
cell.title.text = ["xxx", "xxxx", "xxx", "xxx"][indexPath.row]
return cell
}
}