将ui标签添加到collectionview上的ui imageview

Question

我是 swift 新手 - 我想在 collectionview 中的 ui 图像视图图像上添加一个标签，但是我遇到了一些问题。文本位于图像视图下方，我如何调整它使其保持在图像中间。我想在代码中做到这一点，而不是使用故事板或 nib 文件。我相信这可能是由于我设置的框架：

import UIKit

class ExploreCollectionViewCell: UICollectionViewCell {
static let identifier = "ExploreCollectionViewCell"

private let label: UILabel = {
    let label = UILabel()
    label.textColor = .white
    label.font = UIFont(name: Settings.shared.MAIN_APP_FONT_BOLD, size: 13)
    return label
}()

private let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.clipsToBounds = true
    imageView.layer.cornerRadius = 0
    imageView.contentMode = .scaleAspectFill
    return imageView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    contentView.addSubview(label)
    contentView.addSubview(imageView)
}

required init?(coder: NSCoder) {
    fatalError()
}

override func layoutSubviews() {
    super.layoutSubviews()
    label.frame = CGRect(x: 5, y: 0, width: contentView.frame.size.width-10, height: 50)
    //imageView.frame = contentView.bounds
    imageView.frame = CGRect(x: 0, y: 0, width: 250, height: 250)
}

override func prepareForReuse() {
    super.prepareForReuse()
    imageView.image = nil
}

func configure(with urlString: String, label: String) {
    guard let url = URL(string: urlString) else {
        return
    }
    
    let task = URLSession.shared.dataTask(with: url) { [weak self] data, _, error in
        guard let data = data, error == nil else {
            return
        }
        
        DispatchQueue.main.async {
            self?.label.text = label
            let image = UIImage(data: data)
            self?.imageView.image = image
        }
    }
    task.resume()
}

}

Answer 1

                private let label: UILabel = {
                    let label = UILabel()
                label.translatesAutoresizingMaskIntoConstraints = false
                    label.textColor = .white
                    label.font = UIFont(name: Settings.shared.MAIN_APP_FONT_BOLD, size: 13)
                    return label
                }()
                
                private let imageView: UIImageView = {
                    let imageView = UIImageView()
                    imageView.translatesAutoresizingMaskIntoConstraints = false
                    imageView.clipsToBounds = true
                    imageView.layer.cornerRadius = 0
                    imageView.contentMode = .scaleAspectFill
                    return imageView
                }()
                
                override init(frame: CGRect) {
                    super.init(frame: frame)
                    contentView.addSubview(label)
                    contentView.addSubview(imageView)
                   
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0).isActive = true
            imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 0).isActive = true
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 0).isActive = true
            
             label.heightAnchor.constraint(equalToConstant: 50).isActive = true
label.centerYAnchor.constraint(contentView.centerYAnchor).isActive =  true
label.centerXAnchor.constraint(contentView.centerXAnchor).isActive =  true
label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 5).isActive = true
        label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -5).isActive = true
            
                }
                
                required init?(coder: NSCoder) {
                    fatalError()
                }

Answer 2

首先，在添加标签之前添加imageView，这样它就会显示在标签后面：

override init(frame: CGRect) {
    super.init(frame: frame)
    contentView.addSubview(imageView) // behind
    contentView.addSubview(label) // front
}

其次，使用自动布局会更容易：

imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: 250).isActive = true
imageView.heightAnchor.constraint(equalToConstant: 250).isActive = true

label.translatesAutoresizingMaskIntoConstraints = false
label.centerYAnchor.constraint(equalTo: imageView.centerYAnchor).isActive =  true
label.widthAnchor.constraint(equalTo: imageView.widthAnchor).isActive =  true