성능 저하없이 UITableView의 원형 UIImageView?

성능 저하없이 UITableView의 원형 UIImageView?

---

나는이 UIImageView내의 각 UITableView디스플레이 원격 이미지 (사용하는 것으로, 세포 SDWebImage). 다음 QuartzCore과 같이 이미지 뷰에 레이어 스타일을 지정했습니다.

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

이제 희미한 회색 테두리가있는 50x50 정사각형이 있지만 정사각형 대신 원형으로 만들고 싶습니다. 이 앱 Hemoglobe은 테이블 뷰에서 원형 이미지를 사용하며, 이것이 제가 달성하고 싶은 효과입니다. 그러나 cornerRadius스크롤링 FPS를 저하 시키므로 사용하고 싶지 않습니다 .

다음은 Hemoglobe원형을 보여줍니다 UIImageViews.

이 효과를 얻을 수있는 방법이 있습니까? 감사.

---

cornerRadius너비 또는 높이의 절반으로 설정하기 만하면됩니다 (개체보기가 정사각형이라고 가정).

예를 들어 개체보기의 너비와 높이가 모두 50 인 경우 :

itemImageView.layer.cornerRadius = 25;

업데이트-사용자 atulkhatri가 지적했듯이 다음을 추가하지 않으면 작동하지 않습니다.

itemImageView.layer.masksToBounds = YES;

---

테두리를 추가하려면

self.ImageView.layer.borderWidth = 3.0f;

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

원형 용

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

이 링크를 참조하십시오

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

---

이 코드를 사용하십시오 .. 도움이 될 것입니다 ..

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

그것은 나를 위해 잘 작동합니다. :)

---

다음은 IBDesignable 및 IBInspectable을 사용하여 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()
    }
}

---

네, 제공 할 수 있습니다 layer.cornerRadius (추가해야 #import <QuartzCore/QuartzCore.h>)
모든 컨트롤을 원형 만들뿐만 귀하의 경우 대신 세트를 layer의 UIImageView이 원형으로 이미지를 만들고 그것을 추가하는 가장 좋은 방법은 UIImageView어떤이 backGroundColor있다 ClearColor.

이 두 가지 코드 소스도 참조하십시오.

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

과

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

이것은 귀하의 경우에 도움이 될 수 있습니다.

---

UIImageView의 높이와 너비를 동일하게 설정하십시오 (예 : Height=60& Width = 60). 그러면 cornerRadius정확히 절반이어야합니다.

 self.imageView.layer.cornerRadius = 30;
 self.imageView.layer.borderWidth = 3;
 self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
 self.imageView.layer.masksToBounds = YES;

---

일부 자동 레이아웃과 다른 셀 높이를 사용하는 경우 다음과 같이하는 것이 좋습니다.

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

---

Round Image View 클래스를 사용합니다. 그래서 UIImageView 대신 사용하고 조정할 것이 없습니다.

이 클래스는 또한 원 주위에 선택적인 테두리를 그립니다. 둥근 그림 주위에는 종종 테두리가 있습니다.

UIImageView에는 자체 렌더링 메커니즘이 있고 drawRect 메서드를 호출하지 않기 때문에 UIImageView 하위 클래스가 아닙니다.

상호 작용 :

#import <UIKit/UIKit.h>

@interface MFRoundImageView : UIView

@property(nonatomic,strong) UIImage* image;

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

@end

구현 :

#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

---

Swift사용시 사용 가능한 솔루션 extension:

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

용법:

self.venueImageView.circleMe()

---

Creating circular image view and thats quite easy with the below SO link, just have custom cells for your table view instead of allocating every thing in your cellForRowAtIndexPath method.

how to make button round with image background in IPhone?

The above link gives you example for buttons just use it for your image views.

---

If you showing the images over a solid background color, an easy solution could be to use an overlay image with a transparent circle in the middle.

This way you can still use square images and add the circle image above them to get the circular effect.

If you don't need to manipulate your images or show them on a complex background color, this can be a simple solution with no performance hit.

---

In swift, inside your viewDidLoad method, with the userImage outlet:

self.userImage.layer.borderWidth = 1;
self.userImage.layer.borderColor = UIColor.whiteColor().CGColor;
self.userImage.layer.cornerRadius = self.userImage.frame.size.width / 2;
self.userImage.clipsToBounds = true;

---

Swift에서 CircularImageView 또는 RoundedImageView에이 확장을 사용하십시오.

extension UIView {

    func circular(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) {
        let radius = CGRectGetWidth(self.bounds) / 2
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true

        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.CGColor
    }

    func roundedCorner(borderWidth: CGFloat = 0, borderColor: UIColor = UIColor.whiteColor()) {
        let radius = CGRectGetWidth(self.bounds) / 2
        self.layer.cornerRadius = radius / 5
        self.layer.masksToBounds = true

        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.CGColor
    }

}

용법:

self.ImageView.circular()
self.ImageView.roundedCorner()

참고 URL : https://stackoverflow.com/questions/17721934/circular-uiimageview-in-uitableview-without-performance-hit