Frage Circular UIImageView in UITableView ohne Performance-Treffer?


Ich habe ein UIImageView auf jedem meiner UITableView Zellen, die ein Remote - Bild anzeigen (unter Verwendung von SDWebImage). Ich habe was gemacht QuartzCore Layerstyling für die Bildansicht als solches:

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

Jetzt habe ich ein 50x50 Quadrat mit einer schwachen grauen Umrandung, aber ich möchte es kreisförmig statt quadratisch machen. Die App Hemoglobe verwendet kreisförmige Bilder in Tabellenansichten, und das ist der Effekt, den ich erreichen möchte. Ich möchte jedoch nicht verwenden cornerRadius, da dies meine scrollende FPS verschlechtert.

Hier ist Hemoglobe kreisförmig anzeigen UIImageViews:

enter image description here

Gibt es eine Möglichkeit, diesen Effekt zu bekommen? Vielen Dank.


75
2017-07-18 11:15


Ursprung


Antworten:


Setzen Sie einfach die cornerRadius auf die Hälfte der Breite oder Höhe (vorausgesetzt, die Ansicht Ihres Objekts ist quadratisch).

Wenn beispielsweise die Breite und Höhe des Objekts in der Ansicht 50 sind:

itemImageView.layer.cornerRadius = 25;

Update - Wie Benutzer atulkhatri darauf hinweist, wird es nicht funktionieren, wenn Sie nicht hinzufügen:

itemImageView.layer.masksToBounds = YES;

129
2017-08-27 19:41



Um Rahmen hinzuzufügen

self.ImageView.layer.borderWidth = 3.0f;

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

Für kreisförmige Form

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

Siehe diesen Link

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


32
2018-05-22 11:11



Benutze diesen Code .. Dies wird hilfreich sein ..

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

Es funktioniert gut für mich. :)


14
2017-07-18 11:51



Hier ist eine aktuellere Methode in swift mit IBDesignable und IBInspectable zu Unterklasse 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()
    }
}

9
2018-06-24 10:38



Ja, es ist möglich zu geben layer.cornerRadius  (muss hinzufügen #import <QuartzCore/QuartzCore.h>)
Zum Erstellen von zirkulären Steuerelementen, aber in Ihrem Fall anstelle von set layer von UIImageView es ist der Beste Möglichkeit, um Ihr Bild als rund zu erstellen und fügen Sie es an UIImageView Welche haben backGroundColor ist ClearColor.

Beziehen Sie auch diese Zwei Quellcode.

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

und

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

Dies könnte in Ihrem Fall hilfreich sein:


7
2017-07-18 11:19



Stellen Sie die Höhe und Breite des UIImageView so ein, dass sie identisch sind.Height=60 & Width = 60, dann ist die cornerRadius sollte genau die Hälfte sein. Ich habe es 30 in meinem Fall gehalten. Es hat für mich funktioniert.

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

3
2018-04-01 09:58



Ich verwende eine Round Image View-Klasse ... Also benutze ich es einfach anstelle von UIImageView und habe nichts zu ändern ...

Diese Klasse zeichnet auch einen optionalen Rahmen um den Kreis. Um abgerundete Bilder gibt es oft eine Grenze.

Es ist keine UIImageView-Unterklasse, da UIImageView über einen eigenen Rendermechanismus verfügt und die drawRect-Methode nicht aufruft.

Schnittstelle:

#import <UIKit/UIKit.h>

@interface MFRoundImageView : UIView

@property(nonatomic,strong) UIImage* image;

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

@end

Implementierung :

#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

1
2017-09-19 14:19



Nutzbare Lösung in Swift verwenden extension:

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

Verwendung:

self.venueImageView.circleMe()

1
2018-04-12 06:29



Wenn Sie etwas Autolayout und verschiedene Zellenhöhen verwenden, machen Sie es besser so:

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

1
2018-06-23 18:45