如何在UITableView中将UITableViewCell Image更改为Circle

我的代码大部分工作。

  • 我遇到的问题是图像以方形开始,当我滚动表格或刷新它时变成圆形。

我错过了什么?

这是我的代码:

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

编辑 —-代码在cellForRowAtIndexPath

  • 正确的,当我启动应用程序的细胞图像是方形的。 如果我pullToRefresh更改四舍五入或者如果我开始滚动表,他们变成四舍五入。

编辑两个

我看到的另一个问题是我滚动时的图像变化。

我如何防止这种情况?

如果有人有这个问题,这里是解决scheme

迅速

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

正如你可能注意到的, 35硬编码基本上是这里70的图像大小的一半。 这里是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 } 

注意:我正在使用一个自定义的单元格类如下所示:

 import UIKit 

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

}

这真的花了我一段时间来弄清楚这一点。 首先滚动后的图像变成圆形,但是现在使用这个代码,你将在开始的时候在单元格内有圆形的图像。 希望它帮助任何人。

尝试这在覆盖 –

 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 } 

最有可能的单元格的框架(因此imageView的框架)不是第一次创build单元格。 所以根据初始帧设置imageView的图层cornerRadius不起作用。 最好的解决scheme是实现tableView:willDisplayCell:forRowAtIndexPath:委托方法,并在那里设置图层:

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

这很简单..

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

请参阅此链接了解更多信息: http : //ios-blog.co.uk/tutorials/quick-tips/how-to-create-round-avatars-in-your-ios-application/

创build一个自定义的单元格,然后添加一个图像视图(使用IBOutlet),然后按照您的需要(在我的示例中,插口是“iv”)resize和位置。 把代码放在awakeFromNib方法中(假设你的单元格是在一个笔尖或故事板中创build的)。

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

我有一个类似的问题,我的UIImageView最初是一个正方形,并且只显示为循环,当它的UITableViewCell是突出显示或select。

这是一个简单的修复:

Swift 2.0

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

这是放置在我的自定义UITableViewCell的awakeFromNib()。

这是假设imgView是通过这个自定义的UITableViewCell中的故事板连接的UIImageView的名称。

将图像视图设置为设置图像的asynchronous调用中的一个圆圈。

 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 

这里是一个完美的状态离开UITableview细胞圆形图像的解决scheme。 用下面的代码简单地修改你的UITableviewCell(自定义单元)类。

 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 } 

这也将有助于解决滚动表后(如果有的话)图像循环的问题 ![在这里输入图片描述 ] 1 )