Custom table view cell image distorting

Question

I have a custom UITableViewCell, I have an image with it as well, but the image is stretching rather unusually. Here is the code:

    var count = 0
    var propic: NSString = ""
    var name: NSString = ""
    for data in listDataArray {
        if(indexPath.row == count) {
            if let pic = data["profile_pic"] as? NSString {
                propic = pic
            }
            if let n = data["full_name"] as? NSString {
                name = n
            }
        }
        count++
    }
    let decodedData = NSData(base64EncodedString: propic, options: NSDataBase64DecodingOptions(0))
    var decodedimage = UIImage(data: decodedData!)
    var  cell:TableViewCell? = tableView.dequeueReusableCellWithIdentifier("Cell") as? TableViewCell

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

    cell!.nameLabel!.text = name
    cell!.imageView!.image = decodedimage
    cell!.imageView!.layer.cornerRadius = cell!.recipeImageView!.frame.size.width / 2
    cell!.imageView!.layer.borderWidth = 5.0
    cell!.imageView!.clipsToBounds = true
    cell!.imageView!.layer.borderColor = UIColor(red: 128/225.0, green: 188/225.0, blue: 163/225.0, alpha: 0.45).CGColor;
    return cell;

Here is the .xib

xib

and the TableViewCell.swift file:

@IBOutlet var imageView : UIImageView? = UIImageView(frame: CGRectMake(10, 10, 50, 50))
@IBOutlet var nameLabel : UILabel?
@IBOutlet var timeLabel : UILabel?

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

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

    // Configure the view for the selected state
}

and the result in the simulator:

result

I need the images to be restricted to a block (and in a circle) to show up like this:

just except of being square images, I need them to be circle. How can I do this?

Do you use auto layout? If yes, what are the constraints on the imageView? — Tom, Nov 06 '14 at 13:17
To crop your images to circles, you can read here how: http://stackoverflow.com/questions/6530573/how-to-crop-uiimage-on-oval-shape-or-circle-shape. Furthermore, to see the problem in your code I need more insight. Can you send me (a part of) your code? You refer to cell!.recipeImageView! which I cannot see anywhere in your posted code. — Tom, Nov 06 '14 at 13:25

score 0 · Accepted Answer · answered Nov 18 '14 at 16:12

You can add this library to your project using Cocoapods platform :ios pod 'APAvatarImageView'

and add the class APAvatarImageView to the UIImageView in your Storyboard or XIB and it will automatically be a circle https://github.com/ankurp/APAvatarImageView

Custom table view cell image distorting

1 Answers1