How to add custom imageview in tableview cell in Swift?

Question

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?'

Piracy

just replace last line. cell.imageView = imageView and then check – Chitin

it says "cannot assign 'imageView' in cell" – Piracy

ok replace last line like that, cell.imageView.image = image abd then check – Chitin

cell. imageView! . image = image || Just replace imageView to Image – Wayland

Answer 1

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:

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.

Mulatto

Note the extension here does not preserve UIImage scale, and it might be relevant. You can create a new UIImage from the result with the original scale if you wish. – Timmy

Answer 2

 can you just replace imageView to image 

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 = image 

Wayland

if it's like that ,it's just take the "let image". And the image remain as it is – Piracy

ioscreator.com/tutorials/… just take a look – Wayland

Answer 3

Make one class of Cell which want to load in your TableView.

Class CellComment :

class CellComment: UITableViewCell 
{
  @IBOutlet weak var imageV_profile: UIImageView!

    override func awakeFromNib() {

          super.awakeFromNib()

          imageV_profile.layer.cornerRadius = 25

         imageV_profile.layer.masksToBounds = true
    }
}

Now Load This Cell in your tableview as below.

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{

       var  cell:CellPost! = tableView.dequeueReusableCellWithIdentifier("CellPost") as? CellPost

       if (cell == nil)
       {
          let nib:Array = NSBundle.mainBundle().loadNibNamed("CellPost", owner: self, options: nil)
          cell = nib[0] as? CellPost
       }

      cell.imageV_profile.image = UIImage(named: "Your image name")

      return cell
}

Gallicize

Answer 4

Try this code. This gives exactly what you want....

let imageName = "person.png"
let image1 = UIImage(named: imageName)

var imageView = UIImageView(frame: CGRectMake(5, 5, 100, 100))
imageView.layer.borderWidth=1.0
imageView.layer.masksToBounds = true
imageView.layer.borderColor = UIColor.whiteColor().CGColor
imageView.layer.cornerRadius = 50;// Corner radius should be half of the height and width.
imageView.image = image1
cell.addSubview(imageView)

Azole

Hey, Ega Setya Putra... This is a very shrot modified code of your code. And a simple way to do. – Azole

it does give me round image, but the image is larger than the tableview cell. Thanks btw – Piracy

then change the size of imageview like, "var imageView = UIImageView(frame: CGRectMake(5, 5, 60, 60))" and imageView.layer.cornerRadius = 30; – Azole

Answer 5

Extension for Swift 5

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 = UIView.ContentMode.scaleAspectFill
    imageView.image = self
    imageView.layer.cornerRadius = square.width/2
    imageView.layer.borderColor = UIColor.white.cgColor
    imageView.layer.borderWidth = 5
    imageView.layer.masksToBounds = true
    UIGraphicsBeginImageContext(imageView.bounds.size)
    imageView.layer.render(in: UIGraphicsGetCurrentContext()!)
    let result = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return result
    }
}

Populace