IOS: créez une UIImage ou UIImageView avec des coins arrondis

98

Est-il possible de créer un UIImageou un UIImageViewavec des coins arrondis? Parce que je veux prendre un UIImageet le montrer dans un UIImageView, mais je ne sais pas comment le faire.

faire du vélo
la source

Réponses:

235

Oui c'est possible.
Importez l'en QuartzCore - #import <QuartzCore/QuartzCore.h>tête ( ) et jouez avec la layerpropriété du UIImageView.

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

Consultez la référence de la classe CALayer pour plus d'informations.

yinkou
la source
1
ok cela fonctionne pour une UIImageView mais si je mets dans cette UIImageView une UIImage cela ne fonctionne pas, comment puis-je résoudre?
cyclingIsBetter
9
N'oubliez pas d'activer clipToBounds. yourImageView.clipsToBounds = YES;
yinkou
1
Si ImageView était à l'intérieur de la cellule scrollView ou tableView, clipsToBounds entraîne de mauvaises performances de défilement.
OzBoz
Je teste de cette façon! Coûte beaucoup de mémoire!
LE SANG
J'ai utilisé ce code dans Swift 2.0, et cela a fonctionné correctement, merci. Au fait, j'ai changé OUI par vrai.
lmiguelvargasf
54

Essayez ce code pour l' importation d' images rondes Cadre QuartzCore moyen simple de créer une image ronde

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];

entrez la description de l'image ici

Muralikrishna
la source
47

Objectif 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
la source
comment rendre la partie centrale de l'image créer une forme de courbe mince comment possible ce concept s'il vous plaît gars laissez-moi savoir pour le langage objectif c
Ramani Hitesh
10
uiimageview.layer.cornerRadius = uiimageview.frame.size.height/2;
uiimageview.clipToBounds = YES;

#import <QuartzCore/QuartzCore.h>
Abdul Rehman Butt
la source
2
En quoi cela diffère-t-il des autres réponses?
mmmmmm
3
@Mark uiimageview.frame.size.height/2;est un vrai bijou pour créer une image de forme ronde parfaite, un cercle complet.
Ans
Comment trouvez-vous uiimageview.frame.size.height / 2? Pouvez-vous expliquer?
Idrees Ashraf
@IdreesAshraf une logique simple impliquée ici .... le rayon de mi-hauteur commencera du haut au milieu au milieu à gauche. faisant un arc de 45 degrés. donc avoir un tel arc sur 4 côtés fera un cercle parfait de vue.
Ans
1
@Ans Cela échouera si j'ai une image avec une largeur et une hauteur différentes. Vous pouvez essayer ça ..
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

entrez la description de l'image ici

Romain Solodyashkin
la source
Il semble qu'un peu de l'image saigne au-delà de la bordure. Je ne sais pas s'il existe une solution facile à cela…
John Gibb
bordure améliorée
Roman Solodyashkin
2

Réglage cornerRadiuset clipsToBoundsest la bonne façon de le faire. Cependant, si la taille de la vue change, le rayon ne sera pas mis à jour. Afin d'obtenir un redimensionnement et un comportement d'animation appropriés, vous devez créer une UIImageViewsous - classe.

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
la source
1

Essayez ceci pour obtenir les coins arrondis de la vue de l'image et aussi pour colorer les coins:

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;

Condition *: La hauteur et la largeur de l'imageView doivent être identiques pour obtenir des coins arrondis.

Md Rais
la source
1
  1. layer.cornerRadius = imageviewHeight / 2

  2. layer.masksToBounds = true

Manish Mahajan
la source
0

C'est possible, mais je vous conseille de créer une image png transparente (masque) avec des coins arrondis et de la placer sur votre image avec UIImageView. Cela peut être une solution plus rapide (par exemple si vous avez besoin d'animations ou de défilement).

Nik
la source
0

Voici comment je place mon avatar arrondi au centre de celui-ci contient une vue:

-(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;
}
bonjour
la source
0

Cercle avec 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
la source
-1
# import QuartzCore framework
imageView.layer.cornerRadius=imgvwUser.frame.size.width/2;
imageView.layer.masksToBounds = YES;

La hauteur et la largeur de l'imageView doivent être identiques pour obtenir des coins arrondis.

tania_S
la source