Jak narysować niestandardowy UIView, który jest tylko okręgiem - aplikacja na iPhone'a

Jak mam się zabrać za narysowanie niestandardowego UIView, który jest dosłownie tylko piłką (okrąg 2D)? Czy po prostu zastąpiłbym metodę drawRect? Czy ktoś może mi pokazać kod do rysowania niebieskiego koła?

Czy byłoby w porządku, aby zmienić ramy tego widoku w samej klasie? A może muszę zmienić ramkę z innej klasy?

(tylko próbuję ustawić piłkę odbijającą się dookoła)

Możesz użyć QuartzCore i zrobić coś takiego -

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

Czy po prostu zastąpiłbym metodę drawRect?

Tak:

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

Czy byłoby w porządku, aby zmienić ramy tego widoku w samej klasie?

Idealnie nie, ale możesz.

A może muszę zmienić ramkę z innej klasy?

Pozwoliłbym rodzicowi to kontrolować.

Oto inny sposób za pomocą UIBezierPath (może jest już za późno ^^) Utwórz okrąg i maskuj nim UIView w następujący sposób:

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;

Mój wkład w rozszerzenie Swift:

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

Zadzwoń myView.asCircle()

Swift 3 - klasa niestandardowa, łatwa do ponownego użycia. Używa backgroundColorzestawu w konstruktorze UI

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

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

}

Klasa Swift 3 :

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

Innym sposobem podejścia do rysowania koła (i innych kształtów) jest użycie masek. Rysujesz koła lub inne kształty, po pierwsze, tworząc maski o potrzebnych kształtach, po drugie, dostarczając kwadraty swojego koloru, a po trzecie, nakładając maski na te kwadraty koloru. Możesz zmienić maskę lub kolor, aby uzyskać nowy niestandardowy okrąg lub inny kształt.

#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

Oto wynik powyższego kodu:

Jest inna alternatywa dla leniwych ludzi. Możesz ustawić layer.cornerRadius ścieżkę klucza dla swojego widoku w programie Interface Builder . Na przykład, jeśli Twój widok ma szerokość = wysokość 48 , ustaw layer.cornerRadius = 24:

Jednak działa to tylko wtedy, gdy masz statyczny rozmiar widoku (width/height is fixed)i nie wyświetla koła w konstruktorze interfejsu.

Swift 3 - Xcode 8.1.0

@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        
}