How to change UITableViewCell Image to Circle in UITableView

My code works for the most part.

  • The issue I am having is the images start out as square, and change to circle when I scroll the table or refresh it.

What am I missing?

  • Depth Page transform on iOS
  • Creating an autolayout-based metrics view
  • Google Drive Sdk- Audio & Video Streaming in iOS Application
  • iOS 10.3 beta 3 doesn't persist data of KeychainItem
  • show the textField in the alertController in swift
  • iOS App Today Extension not uploaded to physical device
  • Here’s my code:

        cell.imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2.0;
        cell.imageView.layer.borderWidth = 3.0;
        cell.imageView.layer.borderColor = [UIColor colorWithRed:157.0/255.0 green:34.0/255.0 blue:53.0/255.0 alpha:1.0]
        .CGColor;
        cell.imageView.clipsToBounds = YES;
    
        NSDictionary *tweet = (self.results)[indexPath.row];
    
        dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
        dispatch_async(queue, ^{
    
            NSString * imageString = [tweet valueForKeyPath:@"user.profile_image_url"];
            NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:imageString]];
    
            if (imageData != nil)
            {
                dispatch_async(dispatch_get_main_queue(), ^{
    
                    cell.imageView.image = [UIImage imageWithData: imageData];
    
                    [cell setNeedsLayout];
                });
            }
        });
    

    EDIT —- The code is in cellForRowAtIndexPath

    • Right when I launch the app the cell images are square. If I pullToRefresh the change to round or if I start scrolling the table they change to round.

    EDIT TWO

    Another issue I am seeing is the images change as I scroll.

    How do I prevent this?

    9 Solutions Collect From Internet About “How to change UITableViewCell Image to Circle in UITableView”

    In order if anyone having this problem, here is the solution in

    Swift

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cell:ContactCellTableViewCell? = tableView.dequeueReusableCellWithIdentifier("contactCell", forIndexPath: indexPath) as? ContactCellTableViewCell
    
    
    
        var contact : ContactStruct
        image = searchResults[indexPath.row]
        let newImage = resizeImage(image, toTheSize: CGSizeMake(70, 70))
        var cellImageLayer: CALayer?  = cell?.imageView.layer
        cellImageLayer!.cornerRadius = 35
        cellImageLayer!.masksToBounds = true
        cell?.imageView.image = newImage
    
    
        return cell!
    }
    

    As you might noticed the 35 hardcode is basically half of the image size which is 70 in here.
    And here is the resize function:

    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
    }
    

    Note: I am using a custom cell class as below:

    import UIKit
    

    class ContactCellTableViewCell: UITableViewCell {

    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var contactImage: UIImageView!
    @IBOutlet weak var phoneLabel: UILabel!
    
    
    
    
    override func awakeFromNib() {
        super.awakeFromNib()
    
    }
    
    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    
        // Configure the view for the selected state
    }
    

    }

    It really took me a while to figure this one out. The images become rounded after scrolling at first, but now using this code you are going to have the rounded images inside the cell from beginning.
    Hope it helped anyone.

    Try this in override-

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    
        // image Width(84) / 2 = 42
                cell.CellImage.layer.cornerRadius = 42.0
                cell.CellImage.layer.masksToBounds = true
             //or   
    
            cell.CellImage.layer.cornerRadius = cell.CellImage.frame.width / 2
            cell.CellImage.clipsToBounds = true
    }
    

    Most likely the cell’s frame (and hence the imageView’s frame) isn’t set the very first time the cell is created. So setting the imageView’s layer’s cornerRadius based on that initial frame doesn’t work. The best solution is to implement the tableView:willDisplayCell:forRowAtIndexPath: delegate method and set the layer there:

    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
        cell.imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2.0;
    }
    

    Its simple..

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        cell.ImageView.layer.cornerRadius = 150.0f;
        cell.ImageView.layer.borderWidth = 2.0f;
        cell.ImageView.layer.borderColor = [UIColor blackColor].CGColor;
        cell.ImageView.clipsToBounds = YES;
    }
    

    Refer this link for more information: http://ios-blog.co.uk/tutorials/quick-tips/how-to-create-rounded-avatars-in-your-ios-application/

    Create a custom cell, and add an image view (with an IBOutlet), sized and positioned however you want (the outlet is “iv” in my example below). Put the code to make image view round in the awakeFromNib method (assuming your cell is created in a nib or storyboard).

    -(void)awakeFromNib {
        self.iv.layer.cornerRadius = self.iv.frame.size.width / 2.0;
        self.iv.layer.borderWidth = 3.0;
        self.iv.layer.borderColor = [UIColor colorWithRed:157.0/255.0 green:34.0/255.0 blue:53.0/255.0 alpha:1.0].CGColor;
        self.iv.clipsToBounds = YES;
    }
    

    I had a similar issue, my UIImageView was initially a square and would only show as circular when the UITableViewCell it was within was either highlighted or selected.

    It was a simple fix:

    Swift 2.0

    imgView.layer.cornerRadius = imgView.frame.width / 2
    imgView.clipsToBounds = true
    

    This was placed inside the awakeFromNib() for my custom UITableViewCell.

    This is assuming imgView is the name of the UIImageView hooked up via storyboard inside this custom UITableViewCell.

    Set the image view to a circle inside the async call where you set the image.

    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    dispatch_async(queue, ^{
    
        NSString * imageString = [tweet valueForKeyPath:@"user.profile_image_url"];
        NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString:imageString]];
    
        if (imageData != nil)
        {
            dispatch_async(dispatch_get_main_queue(), ^{
    
                cell.imageView.image = [UIImage imageWithData: imageData];
    cell.imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2.0;
    cell.imageView.layer.borderWidth = 3.0;
    cell.imageView.layer.borderColor = [UIColor colorWithRed:157.0/255.0 green:34.0/255.0 blue:53.0/255.0 alpha:1.0]
    .CGColor;
    cell.imageView.clipsToBounds = YES;
                [cell setNeedsLayout];
            });
        }
    });
    
    @interface MyCell : UITableViewCell
    @end
    
    @implementation MyCell
    
    - (void)awakeFromNib
    {
        [super awakeFromNib];
        self.imageView.layer.masksToBounds = YES;
        self.textLabel.font = [UIFont systemFontOfSize:17];
        self.textLabel.textColor = [UIColor darkTextColor];
    }
    
    // --- image view frame is empty rect inside tableView: willDisplayCell:
    // +++ set cornerRadius inside layoutSubviews works. 
    - (void)layoutSubviews
    {
        [super layoutSubviews];
    
        // layout image view
        CGRect vfr = self.frame;
        CGRect imgvr = self.imageView.frame;
        imgvr.origin.x = 16;
        imgvr.size.width = CGRectGetHeight(vfr);
        self.imageView.frame = imgvr;
    
        // update corner radius
        self.imageView.layer.cornerRadius = imgvr.size.width * 0.5f;
    
        // layout label
        CGRect lblr = self.textLabel.frame;
        lblr.origin.x = CGRectGetMaxX(imgvr) + 16;
        lblr.size.width = CGRectGetWidth(vfr) - CGRectGetMaxX(imgvr) - 32;
        self.textLabel.frame = lblr;
    }
    
    @end
    

    Here is a perfect and state away solution for circular image in UITableview Cell.
    Simply modify your UITableviewCell (custom cell) class with below code.

    override func awakeFromNib() {
        super.awakeFromNib()
        imgEvent.layer.frame = (imgEvent.layer.frame).insetBy(dx: 0, dy: 0)
        imgEvent.layer.borderColor = UIColor.gray.cgColor
        imgEvent.layer.cornerRadius = (imgEvent.frame.height)/2
        imgEvent.layer.masksToBounds = false
        imgEvent.clipsToBounds = true
        imgEvent.layer.borderWidth = 0.5
        imgEvent.contentMode = UIViewContentMode.scaleAspectFill
      }
    

    It will also helps to solve the problem of image circular only after scrolling table..(if any![enter image description here]1)