Comment dessiner un UIView personnalisé qui n'est qu'un cercle - Application iPhone

Comment puis-je dessiner un UIView personnalisé qui n'est littéralement qu'une balle (un cercle 2D)? Est-ce que je remplacerais simplement la méthode drawRect? Et quelqu'un peut-il me montrer le code pour dessiner un cercle bleu?

De plus, serait-il acceptable de changer le cadre de cette vue dans la classe elle-même? Ou dois-je changer le cadre d'une classe différente?

(essayant juste de mettre en place une balle qui rebondit)

Vous pouvez utiliser QuartzCore et faire quelque chose comme ça -

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

Est-ce que je remplacerais simplement la méthode drawRect?

Oui:

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

De plus, serait-il acceptable de changer le cadre de cette vue dans la classe elle-même?

Idéalement non, mais vous pourriez.

Ou dois-je changer le cadre d'une classe différente?

Je laisserais le parent contrôler ça.

Voici une autre façon d'utiliser UIBezierPath (peut-être que c'est trop tard ^^) Créez un cercle et masquez UIView avec, comme suit:

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;

Ma contribution avec une extension Swift:

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

Il suffit d'appeler myView.asCircle()

Swift 3 - classe personnalisée, facile à réutiliser. Il utilise un backgroundColorensemble dans le générateur d'interface utilisateur

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

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

}

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

Une autre façon d'aborder le dessin de cercle (et d'autres formes) consiste à utiliser des masques. Vous dessinez des cercles ou d'autres formes en créant d'abord des masques des formes dont vous avez besoin, en second lieu, en fournissant des carrés de votre couleur et, troisièmement, en appliquant des masques à ces carrés de couleur. Vous pouvez modifier le masque ou la couleur pour obtenir un nouveau cercle personnalisé ou une autre forme.

#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

Voici la sortie du code ci-dessus:

Il existe une autre alternative pour les paresseux. Vous pouvez définir le layer.cornerRadius chemin d' accès clé de votre vue dans Interface Builder . Par exemple, si votre vue a une largeur = hauteur de 48 , définissez layer.cornerRadius = 24:

Cependant, cela ne fonctionne que si vous avez une taille statique de la vue (width/height is fixed)et que le cercle n'apparaît pas dans le générateur d'interface.

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        
}