每隔一行使用自定义标头实现集合视图

时间:2019-03-30 09:22:22

标签: swift uicollectionview

我正在尝试创建一个集合视图,该视图的标头每隔一行就有一个图像实现,中间的行之间有5个收集单元格,就像这样:

enter image description here

目前,我使用以下代码进行设置:

标题视图类:

class HeaderView: UICollectionReusableView {

let imageView: UIImageView = {
    let image = UIImage.init(named: "trophyCase")
    let iv = UIImageView(image: image)
    iv.clipsToBounds = true
    iv.contentMode = .scaleAspectFill
    return iv
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = .white
    addSubview(imageView)
    imageView.fillSuperview()
}


required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

}

ViewController:

class TrophyListViewController: UICollectionViewController{

fileprivate let headerId = "headerId"
var headerView: HeaderView?

override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.register(HeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: headerId)

}

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 5
}

override func numberOfSections(in collectionView: UICollectionView) -> Int {
    return progressAchievements.count / 5 
}

override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: headerId, for: indexPath) as? HeaderView
    return headerView!
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    return .init(width: view.frame.width, height: 340)
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "trophyCell", for: indexPath) as! TrophyListCell


    //achievementImage
    cell.trophyImage.image = UIImage(named:progressAchievements[indexPath.row][1])
    cell.trophyImage.frame = CGRect(x:12, y:11, width:100, height:100)


    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let wid = ( collectionView.frame.width - 20 ) / 5
    return CGSize(width:wid,height:160)
}

}

UIView的扩展名:

extension UIView {
func fillSuperview(withPadding padding: UIEdgeInsets = .zero) {
    translatesAutoresizingMaskIntoConstraints = false
    if let superview = superview {
        topAnchor.constraint(equalTo: superview.topAnchor, constant: padding.top).isActive = true
        leftAnchor.constraint(equalTo: superview.leftAnchor, constant: padding.left).isActive = true
        rightAnchor.constraint(equalTo: superview.rightAnchor, constant: -padding.right).isActive = true
        bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: -padding.bottom).isActive = true
    }
}

}

当我去测试代码时,所有部分都会出现,但是我缺少每一行的标题,并且每一行只出现3个单元格。我觉得我已经接近这一步了,但可以与某人解释我在这里出了错的地方。

0 个答案:

没有答案