近段时间的学习碎片整理(29)

最近初学了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
        }
    }