我正在尝试创建一个集合视图,该视图的标头每隔一行就有一个图像实现,中间的行之间有5个收集单元格,就像这样:
目前,我使用以下代码进行设置:
标题视图类:
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个单元格。我觉得我已经接近这一步了,但可以与某人解释我在这里出了错的地方。