Pregunta Circular UIImageView en UITableView sin impacto en el rendimiento?


tengo un UIImageView en cada uno de mis UITableView células, que muestran una imagen remota (utilizando SDWebImage) He hecho algo QuartzCore estilo de capa a la vista de imagen, como tal:

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

Entonces ahora tengo un cuadrado de 50x50 con un ligero borde gris, pero me gustaría hacerlo circular en lugar de cuadrado. La aplicación Hemoglobe usa imágenes circulares en vistas de tabla, y ese es el efecto que me gustaría lograr. Sin embargo, no quiero usar cornerRadius, ya que eso degrada mi FPS de desplazamiento.

Aquí está Hemoglobe mostrando circular UIImageViews:

enter image description here

¿Hay alguna forma de obtener este efecto? Gracias.


75
2017-07-18 11:15


origen


Respuestas:


Simplemente configura el cornerRadius a la mitad del ancho o alto (suponiendo que la vista de su objeto es cuadrada).

Por ejemplo, si el ancho y alto de la vista de su objeto son ambos 50:

itemImageView.layer.cornerRadius = 25;

Actualización: como señala el usuario atulkhatri, no funcionará si no agrega:

itemImageView.layer.masksToBounds = YES;

129
2017-08-27 19:41



Para agregar borde

self.ImageView.layer.borderWidth = 3.0f;

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

Para forma circular

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

Referir este enlace

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


32
2018-05-22 11:11



Usa este código ... Esto será útil ...

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

Funciona bien para mí. :)


14
2017-07-18 11:51



Aquí hay un método más actualizado en rápida utilización de IBDesignable e IBInspectable para la subclase 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



Sí, es posible dar layer.cornerRadius  (necesita agregar #import <QuartzCore/QuartzCore.h>)
para crear circular cualquier control, pero en su caso en lugar de establecer layer de UIImageView es el La mejor forma de crear su imagen como circular y agregarla en UIImageView Cual tiene backGroundColor es ClearColor.

También remita esta fuente de dos códigos.

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

y

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

Esto podría ser útil en tu caso:


7
2017-07-18 11:19



Establezca el alto y el ancho del UIImageView para que sea el mismo, por ejemplo:Height=60 & Width = 60, entonces el cornerRadius debería ser exactamente la mitad. Lo he mantenido 30 en mi caso. Funcionó para mí.

 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



Yo uso una clase de Vista de Imagen Redonda ... Así que solo lo uso en lugar de UIImageView, y no tengo nada que modificar ...

Esta clase también dibuja un borde opcional alrededor del círculo. A menudo hay un borde alrededor de las imágenes redondeadas.

No es una subclase UIImageView porque UIImageView tiene su propio mecanismo de representación, y no llama al método drawRect ..

Interfaz :

#import <UIKit/UIKit.h>

@interface MFRoundImageView : UIView

@property(nonatomic,strong) UIImage* image;

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

@end

Implementación:

#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



Solución utilizable en Swift utilizando extension:

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

Uso:

self.venueImageView.circleMe()

1
2018-04-12 06:29



Si usa un autolayout y diferentes alturas de celdas, mejor que lo haga de esta manera:

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

1
2018-06-23 18:45



Crear una vista de imagen circular y eso es bastante fácil con el siguiente enlace SO, solo tiene celdas personalizadas para su vista de tabla en lugar de asignar todo en su método cellForRowAtIndexPath.

cómo hacer que el botón redondo con fondo de imagen en el iPhone?

El enlace de arriba le da un ejemplo de botones, simplemente utilícelo para sus vistas de imágenes.


0
2017-07-18 11:40



Si muestra las imágenes en un color de fondo sólido, una solución fácil podría ser utilizar una imagen superpuesta con un círculo transparente en el centro.

De esta forma, aún puede usar imágenes cuadradas y agregar la imagen del círculo sobre ellas para obtener el efecto circular.

Si no necesita manipular sus imágenes o mostrarlas en un fondo de color complejo, esta puede ser una solución simple sin impacto en el rendimiento.


0
2017-07-18 12:13