如何在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 )