So zeichnen Sie eine benutzerdefinierte UIView, die nur ein Kreis ist - iPhone App

Wie würde ich ein benutzerdefiniertes UIView zeichnen, das buchstäblich nur eine Kugel (ein 2D-Kreis) ist? Würde ich einfach die drawRect-Methode überschreiben? Und kann mir jemand den Code zum Zeichnen eines blauen Kreises zeigen?

Wäre es auch in Ordnung, den Rahmen dieser Ansicht innerhalb der Klasse selbst zu ändern? Oder muss ich den Rahmen einer anderen Klasse ändern?

(Ich versuche nur, einen Ball aufzustellen, der herumspringt.)

Sie könnten QuartzCore verwenden und etwas tun -

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

Würde ich einfach die drawRect-Methode überschreiben?

Ja:

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

Wäre es auch in Ordnung, den Rahmen dieser Ansicht innerhalb der Klasse selbst zu ändern?

Im Idealfall nicht, aber Sie könnten.

Oder muss ich den Rahmen einer anderen Klasse ändern?

Ich würde die Eltern das kontrollieren lassen.

Hier ist eine andere Möglichkeit, UIBezierPath zu verwenden (möglicherweise ist es zu spät ^^). Erstellen Sie einen Kreis und maskieren Sie UIView damit wie folgt:

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;

Mein Beitrag mit einer Swift-Erweiterung:

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

Ruf einfach an myView.asCircle()

Swift 3 - benutzerdefinierte Klasse, einfach wiederzuverwenden. Es verwendet backgroundColorset in UI Builder

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

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

}

Swift 3 Klasse:

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

Eine andere Möglichkeit, sich dem Zeichnen von Kreisen (und anderen Formen) zu nähern, ist die Verwendung von Masken. Sie zeichnen Kreise oder andere Formen, indem Sie erstens Masken mit den gewünschten Formen erstellen, zweitens Quadrate Ihrer Farbe bereitstellen und drittens Masken auf diese Farbquadrate anwenden. Sie können entweder Maske oder Farbe ändern, um einen neuen benutzerdefinierten Kreis oder eine andere Form zu erhalten.

#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

Hier ist die Ausgabe des obigen Codes:

Es gibt eine andere Alternative für faule Leute. Sie können den layer.cornerRadius Schlüsselpfad für Ihre Ansicht im Interface Builder festlegen . Wenn Ihre Ansicht beispielsweise eine Breite = Höhe von 48 hat , legen Sie Folgendes fest layer.cornerRadius = 24:

Dies funktioniert jedoch nur, wenn Sie eine statische Größe der Ansicht haben (width/height is fixed)und der Kreis im Interface Builder nicht angezeigt wird.

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        
}