web-dev-qa-db-ja.com

パフォーマンスに影響しない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を示しています：

enter image description here

この効果を得る方法はありますか？ありがとう。

iosobjective-cuitableviewuiimageview
79
swiftcode

cornerRadiusを幅または高さの半分に設定するだけです（オブジェクトのビューが正方形であると仮定）。

たとえば、オブジェクトのビューの幅と高さが両方とも50の場合：

itemImageView.layer.cornerRadius = 25;

更新-ユーザーatulkhatriが指摘しているように、追加しないと機能しません。

itemImageView.layer.masksToBounds = YES;
137
tagabek

境界線を追加するには

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/

38
yazh

このコードを使用してください。これは役に立ちます。

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

それは私のためにうまく機能します。 :)

14
shivam

IBDesignableおよびIBInspectableを使用してUIImageViewをサブクラス化するSwiftの最新のメソッドを次に示します。

@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()
    }
}
10
Antzi

はい、layer.cornerRadius（#import <QuartzCore/QuartzCore.h>を追加する必要があります）を与えることができます
円形の任意のコントロールを作成しますが、layerのUIImageViewを設定する代わりに、あなたの画像を円形として作成し、UIImageViewに追加するのが最善の方法ですbackGroundColorはClearColorです。

この2つのソースコードも参照してください。

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

そして

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

これはあなたの場合に役立つかもしれません：

7
iPatel

UIImageViewの高さと幅を同じように設定します：Height=60＆Width = 60、それからcornerRadiusはちょうど半分になるはずです。私の場合は30のままにしました。それは私のために働いた。

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

いくつかの自動レイアウトと異なるセルの高さを使用する場合は、次のようにすることをお勧めします。

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

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
1
Moose

Swiftを使用するextensionで使用可能なソリューション：

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

使用法：

self.venueImageView.circleMe()
1
Hossam Ghareeb

単色の背景色で画像を表示する場合、簡単な解決策は、中央に透明な円のあるオーバーレイ画像を使用することです。

これにより、正方形の画像を使用し、その上に円形の画像を追加して円形の効果を得ることができます。

画像を操作したり、複雑な背景色で表示したりする必要がない場合、これはパフォーマンスに影響を与えないシンプルなソリューションになります。

0
Eyal

以下のSOリンクを使用して円形の画像ビューを作成するのは非常に簡単です。cellForRowAtIndexPathメソッドですべてを割り当てるのではなく、テーブルビュー用のカスタムセルを用意するだけです。

iPhoneで画像の背景でボタンを丸くする方法？

上記のリンクは、画像ビューに使用するボタンの例を示しています。

0
Saify

Swiftの場合、viewDidLoadメソッド内で、userImageアウトレットを使用：

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;
0
lifeisfoo

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()
0
Aqib Mumtaz