Как изменить изображение UITableViewCell для окружения в UITableView
Мой код работает по большей части.
- Проблема заключается в том, что изображения начинаются как квадратные и меняются на круги, когда я просматриваю таблицу или обновляю ее.
Что мне не хватает?
Здесь мой код:
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 ---- Код находится в cellForRowAtIndexPath
- Когда я запускаю приложение, изображения ячеек квадратные. Если я вытягиваюToRefresh, изменение округляется или если я начну прокручивать таблицу, они меняются на раунд.
EDIT TWOstrong >
Другая проблема, которую я вижу, - это изменение изображений при прокрутке.
Как это предотвратить?
Ответы
Ответ 1
Для того, если у кого-то есть эта проблема, вот решение в
стриж
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. А вот и функция изменения размера:
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
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
}
}
Мне действительно понадобилось время, чтобы понять это. Сначала изображения прокручиваются после прокрутки, но теперь, используя этот код, вы будете иметь округленные изображения внутри ячейки с самого начала. Надеюсь, это помогло кому-нибудь.
Ответ 2
Попробуйте это переопределить -
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
}
Ответ 3
Скорее всего, кадр ячейки (и, следовательно, кадр изображения) не устанавливается в первый раз, когда создается ячейка. Поэтому настройка слоя imageView cornerRadius
на основе этого начального кадра не работает. Лучшее решение - реализовать метод делегата tableView:willDisplayCell:forRowAtIndexPath:
и установить там слой:
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
cell.imageView.layer.cornerRadius = cell.imageView.frame.size.width / 2.0;
}
Ответ 4
Создайте пользовательскую ячейку и добавьте изображение (с IBOutlet), размер и расположение, но вы хотите (выход "iv" в моем примере ниже). Поместите код, чтобы сделать просмотр изображения круглым в методе awakeFromNib (предполагая, что ваша ячейка создана в банке или раскадровке).
-(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;
}
Ответ 5
Его простой..
- (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-rounded-avatars-in-your-ios-application/
Ответ 6
У меня была аналогичная проблема, мой UIImageView был первоначально квадратом и отображался только как круговой, когда UITableViewCell, в котором он находился, был либо выделен, либо выбран.
Это было простое исправление:
Swift 2.0
imgView.layer.cornerRadius = imgView.frame.width / 2
imgView.clipsToBounds = true
Это было помещено внутри awakeFromNib() для моего пользовательского UITableViewCell.
Это предполагает, что imgView - это имя UIImageView, подключенного через раскадровку внутри этого пользовательского UITableViewCell.
Ответ 7
Установите изображение в круг внутри асинхронного вызова, где вы устанавливаете изображение.
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];
});
}
});
Ответ 8
@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
Ответ 9
Если ваша ячейка по коду:
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let myImageView = (cell as! MyCustomCell).myImageView
myImageView.layoutIfNeeded()
myImageView.layer.cornerRadius = myImageView.frame.width / 2.0
}
Ответ 10
cell.imageView?.layer.cornerRadius = 22.0
cell.imageView?.layer.masksToBounds = true
Ответ 11
Вот идеальное решение для кругового изображения в UITableview Cell.
Просто измените класс 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)