Циркуляр 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:

enter image description here

Есть ли способ получить этот эффект? Спасибо.

Ответ 1

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

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

itemImageView.layer.cornerRadius = 25;

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

itemImageView.layer.masksToBounds = YES;

Ответ 2

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

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/

Ответ 3

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

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

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

Ответ 4

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

Также ссылайтесь на этот два источника кода.

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

и

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

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

Ответ 5

Ниже приведен более современный метод с быстрым использованием 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()
    }
}

Ответ 6

Задайте высоту и ширину UIImageView одинаковыми, например: Height=60 и Width = 60, тогда cornerRadius должна быть точно равна половине. Я сохранил ее в моем случае. Он работал для я.

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

Ответ 7

Я использую класс 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

Ответ 8

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

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

Использование:

self.venueImageView.circleMe()

Ответ 9

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

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

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

Ответ 10

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

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

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

Ответ 11

В быстрой, внутри вашего метода 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;

Ответ 12

В 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()

Ответ 13

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

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