web-dev-qa-db-ja.com

円だけのカスタムUIViewを描画する方法-iPhoneアプリ

文字通り単なるボール（2D円）であるカスタムUIViewを描画するにはどうすればよいですか？ drawRectメソッドをオーバーライドするだけですか？そして、誰かが青い円を描くためのコードを見せてもらえますか？

また、クラス自体内でそのビューのフレームを変更しても大丈夫でしょうか？または、別のクラスからフレームを変更する必要がありますか？

（跳ねるボールをセットアップしようとするだけ）

iphoneiosipaduiview
127
StanLe

QuartzCoreを使用して、これを行うことができます-

self.circleView = [[UIView alloc] initWithFrame:CGRectMake(10,20,100,100)];
self.circleView.alpha = 0.5;
self.circleView.layer.cornerRadius = 50;  // half the width/height
self.circleView.backgroundColor = [UIColor blueColor];
203
Kal

DrawRectメソッドをオーバーライドするだけですか？

はい：

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(ctx, rect);
    CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
    CGContextFillPath(ctx);
}

また、クラス自体内でそのビューのフレームを変更しても大丈夫でしょうか？

理想的ではありませんが、可能です。

または、別のクラスからフレームを変更する必要がありますか？

親にそれを制御させます。

131
Steve

次に、UIBezierPathを使用する別の方法を示します（手遅れかもしれません^^）次のように、円を作成し、UIViewをマスクします。

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
view.backgroundColor = [UIColor blueColor];

CAShapeLayer *shape = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:view.center radius:(view.bounds.size.width / 2) startAngle:0 endAngle:(2 * M_PI) clockwise:YES];
shape.path = path.CGPath;
view.layer.mask = shape;
30
Gintama

Swift拡張子を持つ私の貢献：

extension UIView {
    func asCircle() {
        self.layer.cornerRadius = self.frame.width / 2;
        self.layer.masksToBounds = true
    }
}

myView.asCircle()を呼び出すだけです

21
Kevin ABRIOUX

Swift-カスタムクラス、再利用が簡単。 UIビルダーで設定されたbackgroundColorを使用します

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

    override func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = bounds.size.width / 2
        layer.masksToBounds = true
    }

}
13
Maciek z Wrocławia

Swiftクラス：

import UIKit

class CircleView: UIView {

    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else {return}

        context.addEllipse(in: rect)
        context.setFillColor(.blue.cgColor)
        context.fillPath()
    }           
}
11
Vyacheslav

円（および他の形状）の描画に近づく別の方法は、マスクを使用することです。円または他の図形を描くには、まず、必要な図形のマスクを作成し、次に、色の正方形を提供し、次に、これらの色の正方形にマスクを適用します。マスクまたは色を変更して、新しいカスタムサークルまたはその他の形状を取得できます。

#import <QuartzCore/QuartzCore.h>

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *area1;
@property (weak, nonatomic) IBOutlet UIView *area2;
@property (weak, nonatomic) IBOutlet UIView *area3;
@property (weak, nonatomic) IBOutlet UIView *area4;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.area1.backgroundColor = [UIColor blueColor];
    [self useMaskFor: self.area1];

    self.area2.backgroundColor = [UIColor orangeColor];
    [self useMaskFor: self.area2];

    self.area3.backgroundColor = [UIColor colorWithRed: 1.0 green: 0.0 blue: 0.5 alpha:1.0];
    [self useMaskFor: self.area3];

    self.area4.backgroundColor = [UIColor colorWithRed: 1.0 green: 0.0 blue: 0.5 alpha:0.5];
    [self useMaskFor: self.area4];        
}

- (void)useMaskFor: (UIView *)colorArea {        
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = colorArea.bounds;
    UIImage *maskImage = [UIImage imageNamed:@"cirMask.png"];
    maskLayer.contents = (__bridge id)maskImage.CGImage;
    colorArea.layer.mask = maskLayer;
}

@end

上記のコードの出力は次のとおりです。

four circles

6
matrix3003

Swift 3-Xcode 8.1

@IBOutlet weak var myView: UIView!

override func viewDidLoad() {
    super.viewDidLoad() 

    let size:CGFloat = 35.0
    myView.bounds = CGRect(x: 0, y: 0, width: size, height: size)
    myView.layer.cornerRadius = size / 2
    myView.layer.borderWidth = 1
    myView.layer.borderColor = UIColor.Gray.cgColor        
}
1
Mohammad Razipour

特に、サークルを滑らかで洗練されたものにしたい場合は、スティーブが言ったようにコアグラフィックスを使用するのが最善です。 Swiftのソリューションは次のとおりです。

override func draw(_ rect: CGRect) {
    if let context = UIGraphicsGetCurrentContext() {
        context.addEllipse(in: rect)
        context.setFillColor(UIColor.blue.cgColor)
        context.fillPath()
    }
}
1
Lucas Chwe

怠け者には別の選択肢があります。ビューのlayer.cornerRadiuskey pathをInterface Builderで設定できます。たとえば、ビューにwidth = height of 48がある場合、layer.cornerRadius = 24を設定します

enter image description here

ただし、これは、ビュー(width/height is fixed)の静的サイズがあり、インターフェイスビルダーに円が表示されていない場合にのみ機能します。

0
user3152121