Добавление изображения в UICollection Header Swift

Question

Я ищу реализацию изображения в заголовке представления коллекции.Это код, который у меня есть, но заголовок при тестировании не появляется.Я что-то упустил?

    func collectionView(_ collectionView: UICollectionView, viewForHeaderInSection section: Int) -> UIView? {
    let view = UIView()
    let image = UIImageView()
    image.frame = CGRect(x: collectionView.frame.width - 10 , y: 0, width: 20, height: 20)
    image.image = UIImage.init(named: "trophyCase")
    view.addSubview(image)
    return view
}

Answer 1

Создание подкласса представления UICollectionReusableView:

class HeaderView: UICollectionReusableView {

    let imageView: UIImageView = {
        let iv = UIImageView(image: /*put your image here*/)
        iv.clipsToBounds = true
        iv.contentMode = .scaleAspectFill
        return iv
    }()

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


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

Затем в вашем ViewController сначала создайте reuseIdentifier для вашего представления:

fileprivate let headerId = "headerId"

После этого зарегистрируйте свое настраиваемое представление в collectionView.(давайте сделаем это в viewDidLoad):

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

Объявите свой пользовательский вид необязательным в вашем vc:

var headerView: HeaderView?

Затем переопределите viewForSupplementaryElementOfKind метод collectionView дляинициализировать headerView:

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!
}

Затем реализовать другой метод collectionView, чтобы дать вашему headerView размер:

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

Расширение для fillSuperView, используемое при инициализации пользовательского представления:

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
        }
    }
}

Теперь он должен работать как заголовок для вашего collectionView.

Answer 2

UICollectionViewDelegate не предлагает такой метод, как viewForHeaderInSection

Вместо этого вы можете использовать viewForSupplementaryElementOfKind метод UICollectionViewDataSource

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    guard kind == UICollectionView.elementKindSectionHeader else {
        fatalError("Unrecognized element of kind: \(kind)")
    }

    let view: ReusableHeaderView = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: kind, for: indexPath) as! ReusableHeaderView
    view.imageView.image = UIImage.init(named: "trophyCase")
    view.imageView.frame = CGRect(x: collectionView.frame.width - 10 , y: 0, width: 20, height: 20)
    return view
}

Вы также должны зарегистрироватьсяelementKindSectionHeader

collectionView.register(ReusableHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: UICollectionView.elementKindSectionHeader)

Ниже будет ваш ReusableHeaderView

class ReusableHeaderView: UICollectionReusableView {
    let imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupUI()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setupUI()
    }

    private func setupUI() {
        self.addSubview(imageView)

        // Instead of settings imageView.frame, add following to use autolayout constraints
        self.imageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: self.topAnchor),
            imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -10.0),
            imageView.widthAnchor.constraint(equalToConstant: 20.0),
            imageView.heightAnchor.constraint(equalToConstant: 20.0)
        ])
    }

}