How to change UITableViewCell Image to Circle in UITableView

add image to uitableviewcell swift
uitableviewcell imageview size change swift
circular imageview ios
swift crop image to circle
circular image in tableviewcell swift
uitableviewcell corner radius
circular imageview ios swift 4
uitableview section corner radius swift

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?

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?

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.

Circular Image in UITableViewCell, Try this code override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { var cell = tableView. The best solution would be to either resize your image view to be square (using autolayout or manually set the frame) or even better you could redraw the image using an image context with a circular clipping mask, then you wouldn't have performance problems on older devices because of corner radii that you recompute on scrolling.

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
}

Rounded images on iOS UITableView, You don't need to previously edit images on Photoshop, Gimp or wathever. cell​.imageView.image = [UIImage imageWithData:current.classification.image]; get rounded corners on your list images, or get something very close to a circle. When you insert your first UITableViewCell with insertRowsAtIndexPaths:withRowAnimation:, it usually appears at the top of the UITableView. In the Periscope app, the opposite happens - the first inserted cell is bottom aligned. As new cells are pushed in, the old cells move up in the table. How is this achieved?

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;
}

Swift 5 Migration has Changed Circular Images, In each table view cell, there is a content view. In each content view, there is some text and an imageView. The image view is a round profile picture with border. Cell image view's left margin is 0. Limitation. When to use QuickTableViewController? QuickTableViewController is good for presenting static table contents, where the sections and rows don't change dynamically after viewDidLoad. It's possible to update the table contents by replacing a specific section or row.

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;
}

table cell corner radius not worki…, But if you know a way to round some UITableViewCells that isnt that let me it by setting the setting the cornerRadius on the contentView of the cell, like this. 24,861 In this swift tutorial, you are going to learn how to build a custom UITableView programmatically using Swift 4.0 with STEP by STEP instructions. Along the way, I am going to be showing you how to create a custom UITableViewCell programmatically from scratch as well. If you are new to building programmatic UI in […]

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/

iOS UITableView Custom Cell with Image, In ios we can customize tableview cell to show images in uitableview. Swift code for that click on the assistant button (overlap circle) in Xcode toolbar right side  I want to change cell text color and show image fill with blue color on click UITableView cell in xmarin.ios. This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.

Easy rounded corners on UITableViewCell image view, imageView.frame ), as well as setting the frame of the image view's layer. So, then I just do something like this in the UITableView data provider: to round the corners, but it doesn't match the borders of the cell exactly. Change the text of the text view to Tap For Details > and the label to Name. Change the mode of the image view to Aspect Fit. Select the text view, in the Attribute inspector. Then, change its alignment to Centered, set the text color to Red and disable scrolling: Disabling scrolling is of similar importance to setting a label to 0 lines.

Learning iPhone Programming: From Xcode to App Store, So, click on the description cell and go to the Size tab of the Inspector window and In the Attributes Inspector (⌘-1) change the label's text to “Add a picture:” and then switch The button should now appear as a blue circle enclosing a plus sign. *tableView; IBOutlet UITableViewCell *nameCell; IBOutlet UITableViewCell  Select the tableview from the view window and bring up size inspector change the height of the row (See the figure1 below). Again select the tableview from the view window and bring up connection inspector, you’ll see there are two connections are available delegate and datasource.Drag from the circle next to each of those connections over to the File’s Owner icon.

How to Set Round Image in UITableView, Some Times we need to make images round in UITableview (Here we have not taken any UITableviewcell) , Objective C provide default  I have a UITableView. First cell of that table is a UITableViewCell object containing a UIScrollView that I use to scroll through images left to right. When the user drags vertically that interaction should drag the UITableView up and down and up until iOS 9 it did so. Compiling from xcode 7 to ios8.4, works

Comments
  • Where do you have this code?
  • The code you posted indicates that you want the image views to be round, correct? So the problem is that they don't appear round initially?
  • it's in cellForRowAtIndexPath. Yes, I want them to always be round, but they start as square and update to round if I refresh or scroll.
  • Every thing here depends upon the row height. So if you have row height as 100, just make the cell.imageView.layer.cornerRadius=50; That means always the rowHeight/2.
  • I get the same problem.Sometimes UIImageView is circle, sometimes not.But I find if your Image height and width equal to cell's height, it will work.
  • still start as square when I implement this
  • What are you getting for cell.imageView and cell.imageView.frame?
  • cell.imageView: <UIImageView: 0xa479fe0; frame = (0 0; 0 0); clipsToBounds = YES; userInteractionEnabled = NO; layer = <CALayer: 0xa47c4a0>> and cell.imageView.frame: 0.000000
  • when I refresh: cell.imageView: <UIImageView: 0xa5a7890; frame = (15 30; 48 48); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5a7910>> and cell.imageView.frame: 4294968343.000000
  • You could set a dummy image to new cells that don't yet have an image. This should initialize the imageView frame so the cornerRadius calculation works as expected.
  • Cell's already come with an imageView property. The issue so far is that the default imageView's frame isn't set until it gets an image.
  • @rmaddy, yeah, I'm aware that cells come with an image view property. It works the way I did it here with no image present. Also, I'm generally not a fan of setting up things that are not indexPath dependent in the table view's delegate/data source. I think those things should belong to the cell, so that's why I suggested this approach.
  • This works great but only if you explicitly specify a height for the imageView in the storyboard.
  • Please describe in your answer, what was the problem, and how will this snippet solve it, to help others understand this answer