add ui label to ui imageview on collectionview-CodePudding

I am new to swift - I want to add a label ONTO the ui image view image in a collectionview, however i am having some issues. The text sits below the image view, how can i adjust it so it stays in the middle of the image. I want to do this in code and not use storyboards or a nib file. I believe it may be due to my frames i have set:

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

}

CodePudding user response：

First, add the imageView before adding the label, so that it will be shown behind the label:

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

Second, it would be easier to use auto layout:

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

CodePudding user response：

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