IOS: yuvarlatılmış köşelere sahip bir UIImage veya UIImageView oluşturun


98

Yuvarlatılmış köşeli bir UIImageveya bir oluşturmak mümkün mü UIImageView? Çünkü bir alıp bir UIImageiçinde göstermek istiyorum UIImageViewama nasıl yapılacağını bilmiyorum.

Yanıtlar:


235

Evet mümkün. ( ) Başlığını
içe aktarın ve .QuartzCore#import <QuartzCore/QuartzCore.h>layerUIImageView

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

Daha fazla bilgi için CALayer sınıfı referansına bakın .


1
ok bir UIImageView için çalışıyor ancak bu UIImageView içine bir UIImage koyarsam çalışmıyor, nasıl çözebilirim?
CyclingIsBetter

9
Etkinleştirmeyi unutmayın clipToBounds. yourImageView.clipsToBounds = YES;
yinkou

1
ImageView, scrollView veya tableView hücresinin içindeyse, clipsToBounds kötü kaydırma performansı yapar.
ÖzBoz

Bu şekilde test ediyorum! Çok fazla bellek maliyeti!
LE SANG

Bu kodu Swift 2.0'da kullandım ve düzgün çalıştı, teşekkürler. Bu arada, EVET'i doğru olarak değiştirdim.
lmiguelvargasf

54

Yuvarlak Görüntü İçe Aktarma İçin Bu Kodu Deneyin QuartzCore çerçevesi Yuvarlak Görüntü oluşturmanın basit yolu

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

görüntü açıklamasını buraya girin


47

Amaç-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;
}

Hızlı 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
}

görüntünün orta kısmının nasıl ince eğri şekli oluşturacağı bu konsept nasıl mümkün olabilir lütfen adam bana objektif c dili için haber verin
Ramani Hitesh

10
uiimageview.layer.cornerRadius = uiimageview.frame.size.height/2;
uiimageview.clipToBounds = YES;

#import <QuartzCore/QuartzCore.h>

2
Bunun diğer cevaplardan farkı nedir?
mmmmmm

3
@Mark uiimageview.frame.size.height/2;, bir görüntüyü mükemmel bir yuvarlak şekil, tam bir daire yapmak için gerçek bir mücevherdir.
Ans

Uiimageview.frame.size.height / 2'yi nasıl bulursunuz? Açıklayabilir misin?
Idrees Ashraf

@IdreesAshraf burada yer alan basit bir mantık .... yarı yüksekliğin yarıçapı üst ortadan sol ortaya doğru başlayacaktır. 45 derecelik yay yapmak. bu yüzden 4 tarafta böyle bir yay olması, görünümü mükemmel bir daire haline getirecektir.
Ans

1
@Ans Farklı genişlik ve yükseklikte bir resmim olursa başarısız olur. Bunu deneyebilirsin ..
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

görüntü açıklamasını buraya girin


Görüntünün bir kısmı sınırdan akıyor gibi görünüyor. Bunun kolay bir çözümü olup olmadığından emin değilim…
John Gibb

sınır iyileştirildi
Roman Solodyashkin

2

Ayarlama cornerRadiusve clipsToBoundsbunu yapmanın doğru yoludur. Ancak görünümün boyutu değişirse, yarıçap güncellenmeyecektir. Uygun yeniden boyutlandırma ve animasyon davranışı elde etmek için bir UIImageViewalt sınıf oluşturmanız gerekir .

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
    }
}

1

Resim Görünümünün köşelerini yuvarlatmak ve ayrıca köşeleri renklendirmek için bunu deneyin:

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;

Koşul *: Yuvarlatılmış köşeler elde etmek için imageView'in yüksekliği ve genişliği aynı olmalıdır.



0

Mümkün ancak yuvarlak köşeli şeffaf png görüntüsü (maske) oluşturmanızı ve UIImageView ile görüntünüzün üzerine yerleştirmenizi tavsiye edeceğim. Daha hızlı bir çözüm olabilir (örneğin, animasyonlara veya kaydırmaya ihtiyacınız varsa).


0

Yuvarlak avatarımı görünümün ortasına nasıl ayarladım:

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

0

UIBeizerPath ile Çember # 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!
    }
}

-1
# import QuartzCore framework
imageView.layer.cornerRadius=imgvwUser.frame.size.width/2;
imageView.layer.masksToBounds = YES;

Yuvarlatılmış köşeler elde etmek için imageView'ün yüksekliği ve genişliği aynı olmalıdır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.