IOS: crie um UIImage ou UIImageView com cantos arredondados

98

É possível criar um UIImageou um UIImageViewcom cantos arredondados? Porque eu quero pegar um UIImagee mostrar dentro de um UIImageView, mas não sei como fazer.

cyclingIsBetter
fonte

Respostas:

235

Sim, é possível.
Importe o cabeçalho QuartzCore ( #import <QuartzCore/QuartzCore.h>) e brinque com a layerpropriedade do UIImageView.

yourImageView.layer.cornerRadius = yourRadius;
yourImageView.clipsToBounds = YES;

Consulte a referência de classe CALayer para obter mais informações.

yinkou
fonte
1
ok funciona para um UIImageView mas se eu colocar dentro deste UIImageView um UIImage não funciona como posso resolver?
cyclingIsBetter,
9
Não se esqueça de ativar clipToBounds. yourImageView.clipsToBounds = YES;
yinkou,
1
Se ImageView estava dentro da célula scrollView ou tableView, clipsToBounds tem um desempenho de rolagem ruim.
OzBoz
Eu testo assim! Custa muita memória!
LE SANG
Usei esse código no Swift 2.0 e funcionou corretamente, obrigado. A propósito, mudei SIM por verdadeiro.
lmiguelvargasf
54

Experimente este código para importação de imagens redondas, estrutura QuartzCore maneira simples de criar imagens redondas

imageView.layer.backgroundColor=[[UIColor clearColor] CGColor];
imageView.layer.cornerRadius=20;
imageView.layer.borderWidth=2.0;
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor=[[UIColor redColor] CGColor];

insira a descrição da imagem aqui

Muralikrishna
fonte
47

Objective-C

-(UIImage *)makeRoundedImage:(UIImage *) image 
                      radius: (float) radius;
{
  CALayer *imageLayer = [CALayer layer];
  imageLayer.frame = CGRectMake(0, 0, image.size.width, image.size.height);
  imageLayer.contents = (id) image.CGImage;

  imageLayer.masksToBounds = YES;
  imageLayer.cornerRadius = radius;

  UIGraphicsBeginImageContext(image.size);
  [imageLayer renderInContext:UIGraphicsGetCurrentContext()];
  UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

  return roundedImage;
}

Swift 3

func makeRoundedImage(image: UIImage, radius: Float) -> UIImage {
    var imageLayer = CALayer()
    imageLayer.frame = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)
    imageLayer.contents = image.cgImage

    imageLayer.masksToBounds = true
    imageLayer.cornerRadius = radius

    UIGraphicsBeginImageContext(image.size)
    imageLayer.render(in: UIGraphicsGetCurrentContext())
    var roundedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return roundedImage
}
Savas Adar
fonte
como fazer a parte central da imagem criar a forma da curva slim como tornar possível esse conceito, por favor, me avise para linguagem c objetiva
Ramani Hitesh
10
uiimageview.layer.cornerRadius = uiimageview.frame.size.height/2;
uiimageview.clipToBounds = YES;

#import <QuartzCore/QuartzCore.h>
Abdul Rehman Butt
fonte
2
Como isso difere de outras respostas?
mmmmmm
3
@Mark uiimageview.frame.size.height/2;é uma verdadeira jóia para fazer uma imagem de formato redondo perfeito, um círculo completo.
Ans
Como você criou uiimageview.frame.size.height / 2? Você pode explicar, por favor?
Idrees Ashraf
@IdreesAshraf uma lógica simples envolvida aqui .... raio de meia altura começará do meio superior até o meio esquerdo. fazendo arco de 45 graus. portanto, ter esse arco nos 4 lados fará um círculo perfeito de vista.
Resposta de
1
@Ans Irá falhar se eu tiver uma imagem com largura e altura diferentes. Você pode tentar isso ..
Idrees Ashraf
3
// UIImageView+OSExt.h
#import <UIKit/UIKit.h>

@interface UIImageView (OSExt)
- (void)setBorder:(CGFloat)borderWidth color:(UIColor*)color;
@end

// UIImageView+OSExt.m
#import "UIImageView+OSExt.h"

@implementation UIImageView (OSExt)
- (void)layoutSublayersOfLayer:(CALayer *)layer
{
    for ( CALayer *sub in layer.sublayers )
    {
        if ( YES == [sub.name isEqual:@"border-shape"])
        {
            CGFloat borderHalf = floor([(CAShapeLayer*)sub lineWidth] * .5);
            sub.frame = layer.bounds;
            [sub setBounds:CGRectInset(layer.bounds, borderHalf, borderHalf)];
            [sub setPosition:CGPointMake(CGRectGetMidX(layer.bounds),
                                       CGRectGetMidY(layer.bounds))];
        }
    }
}

- (void)setBorder:(CGFloat)borderWidth color:(UIColor*)color
{
    assert(self.frame.size.width == self.frame.size.height);
    for ( CALayer *sub in [NSArray arrayWithArray:self.layer.sublayers] )
    {
        if ( YES == [sub.name isEqual:@"border-shape"])
        {
            [sub removeFromSuperlayer];
            break;
        }
    }

    CGFloat borderHalf = floor(borderWidth * .5);
    self.layer.cornerRadius = self.layer.bounds.size.width * .5;

    CAShapeLayer *circleLayer = [CAShapeLayer layer];
    self.layer.delegate = (id<CALayerDelegate>)self;
    circleLayer.name = @"border-shape";
    [circleLayer setBounds:CGRectInset(self.bounds, borderHalf, borderHalf)];
    [circleLayer setPosition:CGPointMake(CGRectGetMidX(self.layer.bounds),
                                         CGRectGetMidY(self.layer.bounds))];
    [circleLayer setPath:[[UIBezierPath bezierPathWithOvalInRect:circleLayer.bounds] CGPath]];
    [circleLayer setStrokeColor:color.CGColor];
    [circleLayer setFillColor:[UIColor clearColor].CGColor];
    [circleLayer setLineWidth:borderWidth];

    {
    circleLayer.shadowOffset = CGSizeZero;
    circleLayer.shadowColor = [[UIColor whiteColor] CGColor];
    circleLayer.shadowRadius = borderWidth;
    circleLayer.shadowOpacity = .9f;
    circleLayer.shadowOffset = CGSizeZero;
    }

    // Add the sublayer to the image view's layer tree
    [self.layer addSublayer:circleLayer];

    // old variant
    //CALayer *layer = self.layer;
    //layer.masksToBounds = YES;
    //layer.cornerRadius = self.frame.size.width * 0.5;
    //layer.borderWidth = borderWidth;
    //layer.borderColor = color;
}
@end

insira a descrição da imagem aqui

Solodyashkin romano
fonte
Parece que um pouco da imagem sai da borda. Não tenho certeza se há uma solução fácil para isso ...
John Gibb
fronteira melhorada
Roman Solodyashkin
2

Definir cornerRadiuse clipsToBoundsé a maneira certa de fazer isso. No entanto, se o tamanho da visualização mudar, o raio não será atualizado. Para obter o comportamento de redimensionamento e animação adequado, você precisa criar uma UIImageViewsubclasse.

class RoundImageView: UIImageView {
    override var bounds: CGRect {
        get {
            return super.bounds
        }
        set {
            super.bounds = newValue
            setNeedsLayout()
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.width / 2.0
        clipsToBounds = true
    }
}
orkoden
fonte
1

Tente fazer isso para obter cantos arredondados da visualização da imagem e também para colorir os cantos:

imageView.layer.cornerRadius = imageView.frame.size.height/2;
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor = [UIColor colorWithRed:148/255. green:79/255. blue:216/255. alpha:1.0].CGColor;
imageView.layer.borderWidth=2;

Condição *: A altura e a largura de imageView devem ser iguais para obter cantos arredondados.

Md Rais
fonte
1
  1. layer.cornerRadius = imageviewHeight / 2

  2. layer.masksToBounds = true

Manish Mahajan
fonte
0

É possível, mas vou aconselhá-lo a criar uma imagem PNG transparente (máscara) com cantos arredondados e colocá-la sobre sua imagem com UIImageView. Pode ser uma solução mais rápida (por exemplo, se você precisa de animações ou rolagem).

Nik
fonte
0

Aqui, como eu coloco meu avatar arredondado no centro dele, contém a visualização:

-(void)setRoundedAvatar:(UIImageView *)avatarView toDiameter:(float)newSize atView:(UIView *)containedView;
{
    avatarView.layer.cornerRadius = newSize/2;
    avatarView.clipsToBounds = YES;

    avatarView.frame = CGRectMake(0, 0, newSize, newSize);
    CGPoint centerValue = CGPointMake(containView.frame.size.width/2, containedView.frame.size.height/2);
    avatarView.center = centerValue;
}
olá!
fonte
0

Círculo com UIBeizerPath # Swift-3 && #imageExtension

class ViewController: UIViewController {
    @IBOutlet weak var imageOutlet: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let image = UIImage(named: "IMG_0001.JPG")
        if let image = image {
            let renderimage = image.imageCroppingBezierPath(path: UIBezierPath(arcCenter: CGPoint(x:image.size.width/2,y:image.size.width/2 )  , radius: 200, startAngle: 0, endAngle:  (2 * CGFloat(M_PI) ), clockwise: true) )
                imageOutlet.image = renderimage
        }
    }
}


extension UIImage {
    func imageCroppingBezierPath(path:UIBezierPath) ->UIImage {

        let frame = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)

        //Defining a graphic context  to paint on
        UIGraphicsBeginImageContextWithOptions(self.size, false, 0.0)
        //Get the current graphics context (if it exists)
        let context = UIGraphicsGetCurrentContext()
        //save the current graphic context
        context?.saveGState()
        // clipping area
        path.addClip()
        self.draw(in: frame)

        //To extract an image from our canvas
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //restore graphic context
        context?.restoreGState()
        //remove current context from stack
        UIGraphicsEndImageContext()
        return image!
    }
}
Shrawan
fonte
-1
# import QuartzCore framework
imageView.layer.cornerRadius=imgvwUser.frame.size.width/2;
imageView.layer.masksToBounds = YES;

A altura e a largura de imageView devem ser iguais para obter cantos arredondados.

tania_S
fonte