Search code examples
iosiphoneuitableviewswiftcell

How to add custom imageview in tableview cell in Swift?


What i need to do is adding circle image to cell on uitableview.How can i do that?

I've tried some code but i doesn't work at all,here is my code:

let imageName = "person.png"
    let image = UIImage(named: imageName)
    var imageView = UIImageView(image: image!)

    imageView = UIImageView(frame: CGRectMake(0, 0, 100, 100))
    imageView.layer.borderWidth=1.0
    imageView.layer.masksToBounds = false
    imageView.layer.borderColor = UIColor.whiteColor().CGColor
    imageView.layer.cornerRadius = 13;
    imageView.clipsToBounds = true

    cell.imageView!.image = imageView

I got this error:

cannot assign a value of type ‘UIImageView’ to a value of type ‘UIImage?'


Solution

  • You can not assign Image that way. But U can do it this way.

    First add function which will resize your Image:

    func resizeImage(image:UIImage, toTheSize size:CGSize)->UIImage{
    
    
        var scale = CGFloat(max(size.width/image.size.width,
            size.height/image.size.height))
        var width:CGFloat  = image.size.width * scale
        var height:CGFloat = image.size.height * scale;
    
        var rr:CGRect = CGRectMake( 0, 0, width, height);
    
        UIGraphicsBeginImageContextWithOptions(size, false, 0);
        image.drawInRect(rr)
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext();
        return newImage
    }
    

    After that you can assign image:

    let imageName = "11749-simple.jpg"
    let image = UIImage(named: imageName)
    let newImage = resizeImage(image!, toTheSize: CGSizeMake(70, 70))
    var cellImageLayer: CALayer?  = cell.cellImage.layer
    cellImageLayer!.cornerRadius = cellImageLayer!.frame.size.width / 2
    cellImageLayer!.masksToBounds = true
    cell.cellImage.image = newImage
    

    And the result will be:

    enter image description here

    Or you can try this extension:

    extension UIImage {
    var circleMask: UIImage {
        let square = size.width < size.height ? CGSize(width: size.width, height: size.width) : CGSize(width: size.height, height: size.height)
        let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
        imageView.contentMode = UIViewContentMode.ScaleAspectFill
        imageView.image = self
        imageView.layer.cornerRadius = square.width/2
        imageView.layer.borderColor = UIColor.whiteColor().CGColor
        imageView.layer.borderWidth = 5
        imageView.layer.masksToBounds = true
        UIGraphicsBeginImageContext(imageView.bounds.size)
        imageView.layer.renderInContext(UIGraphicsGetCurrentContext())
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result
        }
    }
    

    and you can assign image:

    let imageName = "11749-simple.jpg"
    let image = UIImage(named: imageName)
    cell.cellImage.image = image?.circleMask
    

    Extension credits to THIS answer.