iOS : 모서리가 둥근 UIImage 또는 UIImageView 생성


98

그것은 만들 수 있습니다 UIImage또는 UIImageView둥근 모서리를? 왜냐하면 나는 그것을 가지고 UIImage그것을 안에 보여 UIImageView주기를 원하지만 그것을하는 방법을 모릅니다.

답변:


235

예, 가능합니다.
가져 오기 QuartzCore ( #import <QuartzCore/QuartzCore.h>와) 헤더와 재생 layer의 특성 UIImageView.

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

자세한 정보는 CALayer 클래스 참조를 참조하십시오.


1
좋아 UIImageView에서 작동하지만이 UIImageView 안에 UIImage를 넣으면 작동하지 않습니다. 어떻게 해결할 수 있습니까?
cyclingIsBetter 2011 년

9
활성화하는 것을 잊지 마십시오 clipToBounds. yourImageView.clipsToBounds = YES;
yinkou

1
ImageView가 scrollView 또는 tableView 셀 내부에 있으면 clipsToBounds는 스크롤 성능을 저하시킵니다.
OzBoz

이 방법으로 테스트합니다! 많은 메모리 비용!
LE SANG

이 코드는 Swift 2.0에서 사용했으며 제대로 작동했습니다. 감사합니다. 그건 그렇고, 나는 진실로 YES를 변경했습니다.
lmiguelvargasf

54

라운드 이미지 가져 오기 를 위해이 코드를 사용해보십시오. 라운드 이미지 를 생성하는 간단한 방법 QuartzCore 프레임 워크

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

여기에 이미지 설명 입력


47

목표 -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;
}

스위프트 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
}

어떻게 이미지의 중앙 부분이 개념은 사람이 나를 객관적 C 언어에 대해 알려 주시기 바랍니다 어떻게 수에 슬림 한 곡선 모양을 만들 수 있도록합니다
마니 Hitesh

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

#import <QuartzCore/QuartzCore.h>

2
이것은 다른 답변과 어떻게 다른가요?
mmmmmm

3
@Mark uiimageview.frame.size.height/2;는 이미지를 완벽한 둥근 모양, 완전한 원형으로 만드는 진짜 보석입니다.
Ans

uiimageview.frame.size.height / 2는 어떻게 얻습니까? 설명해 주시겠습니까?
Idrees Ashraf

@IdreesAshraf 여기에 관련된 간단한 논리 .... 반 높이 반경은 상단 중간에서 왼쪽 중간까지 시작됩니다. 45 도의 호 만들기. 따라서 4면에 이러한 호가 있으면 시야가 완벽한 원이됩니다.
Ans

1
@Ans 너비와 높이가 다른 이미지가 있으면 실패합니다. 당신은 그것을 시도 할 수 있습니다 ..
이드리스 라프

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

여기에 이미지 설명 입력


약간의 이미지가 테두리를 지나서 번지는 것 같습니다. ... 그것에 대해 쉽게 수정이 있는지 잘 모르겠어요
존 깁

국경 개선
Roman Solodyashkin

2

설정 cornerRadius하고 clipsToBounds이를 수행하는 올바른 방법입니다. 그러나 뷰의 크기가 변경되면 반경이 업데이트되지 않습니다. 적절한 크기 조정 및 애니메이션 동작을 얻으려면 UIImageView하위 클래스 를 만들어야합니다 .

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

이미지 뷰의 둥근 모서리를 얻고 모서리에 색상을 지정하려면 다음을 시도하십시오.

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;

조건 * : 둥근 모서리를 얻으려면 imageView의 높이와 너비가 동일해야합니다.



0

가능하지만 둥근 모서리가있는 투명한 png 이미지 (마스크)를 만들고 UIImageView를 사용하여 이미지 위에 배치하는 것이 좋습니다. 더 빠른 솔루션 일 수 있습니다 (예 : 애니메이션이나 스크롤이 필요한 경우).


0

여기 중앙에 둥근 아바타를 설정하는 방법에는 뷰가 포함됩니다.

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

둥근 모서리를 얻으려면 imageView의 높이와 너비가 동일해야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.