CODEWITHSUNDEEP
swiftuiimagecalayer
Excalibur
Excalibur

Reputation: 93

Unexpected behaviour when adding CALayer as sublayer to UIImage

I have tableView with custom cells. Each cell has property "name" and "image". What I am trying to do is to add border around image. This part works. But when I try to add backgroundColor to CALayer, than all I can see in tableView is CALayer without UIImage.

Here is code for better understanding and example with setting background color.

 @IBOutlet weak var channelImage: UIImageView! {
        didSet {
            let borderLayer = CALayer()
            let borderFrame = CGRect(x: -4, y: -4, width: channelImage.frame.size.width+8, height: channelImage.frame.size.width+8)
            borderLayer.frame = borderFrame
            borderLayer.cornerRadius = 4
            borderLayer.borderWidth = 0.5
            borderLayer.borderColor = UIColor.lightGray.cgColor
            channelImage.layer.insertSublayer(borderLayer, at: 0)
            channelImage.layer.masksToBounds = false
            borderLayer.backgroundColor = UIColor.lightGray.cgColor
            self.channelImage.layoutIfNeeded()
            self.channelImage.layoutSubviews()
        }
    }

without background color:

@IBOutlet weak var channelImage: UIImageView! {
    didSet {
        let borderLayer = CALayer()
        let borderFrame = CGRect(x: -4, y: -4, width: channelImage.frame.size.width+8, height: channelImage.frame.size.width+8)
        borderLayer.frame = borderFrame
        borderLayer.cornerRadius = 4
        borderLayer.borderWidth = 0.5
        borderLayer.borderColor = UIColor.lightGray.cgColor
        channelImage.layer.insertSublayer(borderLayer, at: 0)
        channelImage.layer.masksToBounds = false
        self.channelImage.layoutIfNeeded()
        self.channelImage.layoutSubviews()
    }
}

Here are also images referenced to first and second example:

enter image description here

enter image description here

I did a lot of searching but I didnt found answer for my situation.

Here is complete code of this Cell

class ChannelCell: UITableViewCell, ChannelSettable {

    static let reusableID = "channelCell"

    var channel: Channel? = nil {
        didSet {
            self.channelName.text = channel?.channelName ?? ""
            self.channelImage.image = UIImage(named: channel?.channel ?? "") ?? UIImage(named: "TV")
            self.channelCategory.text = channel?.chCategory ?? ""
        }
    }

    @IBOutlet weak var channelName: UILabel!
    @IBOutlet weak var channelCategory: UILabel!
    @IBOutlet weak var channelImage: UIImageView! {
        didSet {
            let borderLayer = CALayer()
            let borderFrame = CGRect(x: -4, y: -4, width: channelImage.frame.size.width+8, height: channelImage.frame.size.width+8)
            borderLayer.frame = borderFrame
            borderLayer.cornerRadius = 4
            borderLayer.borderWidth = 0.5
            borderLayer.borderColor = UIColor.lightGray.cgColor
            borderLayer.backgroundColor = UIColor.lightGray.cgColor
            channelImage.layer.insertSublayer(borderLayer, at: 0)
            channelImage.layer.masksToBounds = false
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        self.channelName.font = DesignHelper.channelNameFont
        self.channelCategory.font = DesignHelper.channelCategoryFont
        self.layoutIfNeeded()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }
}

Upvotes: 1

Views: 141

Answers (2)

Parth Bhuva
Parth Bhuva

Reputation: 877

sub layer is inserted upon your image view.

if you want to set background of imageView then use 

channelImage.backgroundColor = UIColor.lightGray.cgColor

you can add Image inside your layer by using(if you want layer behind the image)

borderLayer.contents = channelImage.cgImage

Upvotes: 0

Radek
Radek

Reputation: 631

You could add a border directly to the UIImageView's layer like that:

channelImage.layer.borderWidth = 0.5
channelImage.layer.borderColor = UIColor.lightGray.cgColor

you don't have to bother with an extra layer to do that.

However if you still need to add an extra CALayer there try using these methods:

func insertSublayer(CALayer, above: CALayer?)
func insertSublayer(CALayer, below: CALayer?)

Upvotes: 1

Related Questions