UIButton is transparent when I don't want it to be

Question

I have a button that I'm placing at the top corner of a custom UICollectionViewCell. For some reason, it is appearing translucent so that the border of the cell is being shown through the button when I would not like that to be the case.

In my CustomCollectionviewCell:

    lazy var favoriteButton: UIButton = {
        let button = UIButton(type: .system)
        button.setImage(#imageLiteral(resourceName: "star_white").withRenderingMode(.alwaysOriginal), for: .normal)
        button.addTarget(self, action: #selector(favoriteTapped), for: .touchUpInside)
        button.isEnabled = true
        return button
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        backgroundColor = UIColor.mainWhite()
        layer.borderWidth = 1.0
        layer.borderColor = UIColor.lightGray.cgColor

        setupCellLayout()
    }


    fileprivate func setupCellLayout() {
        addSubview(favoriteButton)
        favoriteButton.translatesAutoresizingMaskIntoConstraints = false
        favoriteButton.heightAnchor.constraint(equalToConstant: 32).isActive = true
        favoriteButton.widthAnchor.constraint(equalToConstant: 32).isActive = true
        favoriteButton.centerXAnchor.constraint(equalTo: rightAnchor, constant: -12).isActive = true
        favoriteButton.centerYAnchor.constraint(equalTo: topAnchor).isActive = true
        bringSubview(toFront: favoriteButton)
    }

This results in the following:

Neither of these images are translucent. They have solid backgrounds so I am confused as to why they are displaying as translucent in the app. I originally thought that maybe they were being placed behind the cell so I added that call to bringSubview(toFront: favoriteButton) in setupCellLayout() but that didn't fix it.

I also thought that using .withRenderingMode(.alwaysOriginal) should have done the trick, but no luck.

Any Ideas as to why this could be happening?

Answer 1

UIView's subviews are layers within the main CALayer of the view, and, theres obviously no way to bring them above the layer, because thats like bringing them out of the view.

You can add a background subview with border, and add all other views in front of it.

Alternatively, you can insert a background sublayer, and apply border to this layer. However, please be ware not to addSublayer, as it will get added above the subviews, but to insert it at index 0 so its at the back

    let backgroundLayer  = CALayer()
    backgroundLayer.frame  = layer.bounds
    backgroundLayer.borderColor = UIColor.lightGray.cgColor
    backgroundLayer.borderWidth = 1.0
    layer.insertSublayer(backgroundLayer, at: 0)

Another important point to look out for is to ensure the insert layer code does not get called repeatedly.