Круговой UIImageView в UITableView без снижения производительности?

У меня есть UIImageViewна каждой из моих UITableViewячеек, которые отображают удаленное изображение (используя SDWebImage). Я сделал некоторые QuartzCoreстили слоя для представления изображения, как таковые:

UIImageView *itemImageView = (UIImageView *)[cell viewWithTag:100];
    itemImageView.layer.borderWidth = 1.0f;
    itemImageView.layer.borderColor = [UIColor concreteColor].CGColor;
    itemImageView.layer.masksToBounds = NO;
    itemImageView.clipsToBounds = YES;

Итак, теперь у меня есть квадрат 50x50 со слабой серой рамкой, но я бы хотел сделать его круглым, а не квадратным. Приложение Hemoglobeиспользует круглые изображения в представлениях таблиц, и я хотел бы добиться именно такого эффекта. Однако я не хочу использовать cornerRadius, так как это ухудшает мой FPS при прокрутке.

Здесь Hemoglobeпоказан циркуляр UIImageViews:

Есть ли способ добиться такого эффекта? Благодарю.

Просто установите cornerRadiusполовину ширины или высоты (при условии, что вид вашего объекта квадратный).

Например, если ширина и высота вашего объекта равны 50:

itemImageView.layer.cornerRadius = 25;

Обновление - как указывает пользователь atulkhatri, это не сработает, если вы не добавите:

itemImageView.layer.masksToBounds = YES;

Добавить границу

self.ImageView.layer.borderWidth = 3.0f;

self.ImageView.layer.borderColor = [UIColor whiteColor].CGColor;

Для круглой формы

self.ImageView.layer.cornerRadius = self.ImageView.frame.size.width / 2;
self.ImageView.clipsToBounds = YES;

Обратитесь по этой ссылке

http://www.appcoda.com/ios-programming-circular-image-calayer/

Используйте этот код .. Это будет полезно ..

    UIImage* image = ...;
    UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);
    // Add a clip before drawing anything, in the shape of an rounded rect
    [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds
                                cornerRadius:50.0] addClip];
    // Draw your image
    [image drawInRect:imageView.bounds];

    // Get the image, here setting the UIImageView image
    imageView.image = UIGraphicsGetImageFromCurrentImageContext();

    // Lets forget about that we were drawing
    UIGraphicsEndImageContext();

Он отлично работает для меня. :)

Вот более современный метод быстрого использования IBDesignable и IBInspectable для подкласса UIImageView

@IBDesignable class RoundableUIImageView: UIImageView {
    private var _round = false
    @IBInspectable var round: Bool {
        set {
            _round = newValue
            makeRound()
        }
        get {
            return self._round
        }
    }
    override internal var frame: CGRect {
        set {
            super.frame = newValue
            makeRound()
        }
        get {
            return super.frame
        }

    }

    private func makeRound() {
        if self.round == true {
            self.clipsToBounds = true
            self.layer.cornerRadius = (self.frame.width + self.frame.height) / 4
        } else {
            self.layer.cornerRadius = 0
        }
    }

    override func layoutSubviews() {
            makeRound()
    }
}

Да, можно дать layer.cornerRadius (нужно добавить #import <QuartzCore/QuartzCore.h>)
для создания кругового любого контроля , но в вместо вашего случая набора layerиз UIImageViewэто лучший способ создать свой имидж круговых и добавить его на UIImageViewкаком есть backGroundColorэто ClearColor.

Также обратитесь к этим двум источникам кода.

https://www.cocoacontrols.com/controls/circleview

и

https://www.cocoacontrols.com/controls/mhlazytableimages

Это может быть полезно в вашем случае:

Установите одинаковую высоту и ширину UIImageView, например: Height=60& Width = 60, тогда cornerRadiusдолжно быть ровно половина. В моем случае я оставил 30. У меня это сработало.

 self.imageView.layer.cornerRadius = 30;
 self.imageView.layer.borderWidth = 3;
 self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
 self.imageView.layer.masksToBounds = YES;

Если вы используете автопрокладку и разную высоту ячеек, лучше сделать это так:

   override func layoutSubviews() {
        super.layoutSubviews()
        logo.layer.cornerRadius = logo.frame.size.height / 2;
        logo.clipsToBounds      = true;
    }

Я использую класс Round Image View ... Поэтому я просто использую его вместо UIImageView, и мне нечего настраивать ...

Этот класс также рисует необязательную границу вокруг круга. Часто вокруг закругленных изображений есть рамка.

Это не подкласс UIImageView, потому что UIImageView имеет собственный механизм отрисовки и не вызывает метод drawRect.

Интерфейс:

#import <UIKit/UIKit.h>

@interface MFRoundImageView : UIView

@property(nonatomic,strong) UIImage* image;

@property(nonatomic,strong) UIColor* strokeColor;
@property(nonatomic,assign) CGFloat strokeWidth;

@end

Реализация :

#import "MFRoundImageView.h"


@implementation MFRoundImageView

-(void)setImage:(UIImage *)image
{
    _image = image;
    [self setNeedsDisplay];
}

-(void)setStrokeColor:(UIColor *)strokeColor
{
    _strokeColor = strokeColor;
    [self setNeedsDisplay];
}

-(void)setStrokeWidth:(CGFloat)strokeWidth
{
    _strokeWidth = strokeWidth;
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGPathRef path = CGPathCreateWithEllipseInRect(self.bounds, NULL);
    CGContextAddPath(ctx, path);
    CGContextClip(ctx);
    [self.image drawInRect:rect];

    if ( ( _strokeWidth > 0.0f ) && _strokeColor ) {
        CGContextSetLineWidth(ctx, _strokeWidth*2); // Half border is clipped
        [_strokeColor setStroke];
        CGContextAddPath(ctx, path);
        CGContextStrokePath(ctx);
    }
    CGPathRelease(path);
}

@end

Полезное решение при Swiftиспользовании extension:

extension UIView{
  func circleMe(){
      let radius = CGRectGetWidth(self.bounds) / 2
      self.layer.cornerRadius = radius
      self.layer.masksToBounds = true
  }
}

Применение:

self.venueImageView.circleMe()

Создание кругового представления изображения, и это довольно просто с помощью приведенной ниже ссылки SO, просто создайте настраиваемые ячейки для представления таблицы вместо того, чтобы выделять все элементы в вашем методе cellForRowAtIndexPath.

как сделать кнопку круглой с фоном изображения в IPhone?

Приведенная выше ссылка дает вам пример кнопок, просто используйте ее для просмотра изображений.

Если вы показываете изображения поверх сплошного цвета фона, простым решением может быть использование наложенного изображения с прозрачным кружком посередине.

Таким образом, вы по-прежнему можете использовать квадратные изображения и добавлять изображение круга над ними, чтобы получить эффект круга.

Если вам не нужно манипулировать изображениями или отображать их на сложном цвете фона, это может быть простое решение без снижения производительности.

Быстро , внутри вашего viewDidLoadметода, с userImageвыходом:

self.userImage.layer.borderWidth = 1;
self.userImage.layer.borderColor = UIColor.whiteColor().CGColor;
self.userImage.layer.cornerRadius = self.userImage.frame.size.width / 2;
self.userImage.clipsToBounds = true;

В Swift используйте это расширение для CircularImageView или RoundedImageView:

extension UIView {

    func circular(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) {
        let radius = CGRectGetWidth(self.bounds) / 2
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true

        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.CGColor
    }

    func roundedCorner(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) {
        let radius = CGRectGetWidth(self.bounds) / 2
        self.layer.cornerRadius = radius / 5
        self.layer.masksToBounds = true

        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.CGColor
    }

}

Применение:

self.ImageView.circular()
self.ImageView.roundedCorner()

Для кругового просмотра изображений используйте приведенный ниже код.

self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = true

Не забудьте изменить cornerRadius в методе viewDidLayoutSubviews вашего UIView.

Пример:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
    self.imageView.clipsToBounds = true
}