web-dev-qa-db-fra.com

Comment dessiner un UIView personnalisé qui est juste un cercle - application iPhone

Comment puis-je dessiner une UIView personnalisée qui est littéralement une boule (un cercle 2D)? Aurais-je simplement remplacer la méthode drawRect? Et quelqu'un peut-il me montrer le code pour dessiner un cercle bleu? 

Aussi, serait-il acceptable de changer le cadre de cette vue dans la classe elle-même? Ou dois-je changer le cadre d'une autre classe?

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

iphoneiosipaduiview
124
StanLe

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

Aurais-je juste passer outre le drawRect méthode?

Oui:

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

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

Idéalement pas, mais vous pourriez. 

Ou dois-je changer le cadre d'une autre classe?

Je laisserais le parent contrôler ça. 

130
Steve

Voici un autre moyen d'utiliser UIBezierPath (peut-être qu'il est trop tard ^^) Créez un cercle et masquez-le 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;
29
Gintama

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

20
Kevin ABRIOUX

Swift 3 - classe personnalisée, facile à réutiliser. Il utilise backgroundColor défini 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
    }

}
10
Maciek z Wrocławia

Swift 3 classe:

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


}
8
Vyacheslav

 enter image description here Une autre façon d’approcher des cercles (et d’autres formes) consiste à utiliser des masques . appliquer 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. Ci-dessus est la sortie du code ci-dessous.

#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
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

Le meilleur consiste à utiliser Core Graphics comme l'a dit Steve, surtout si vous voulez que votre cercle soit lisse et poli. Voici la solution à Swift:

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

Il existe une autre alternative pour les paresseux. Vous pouvez définir le layer.cornerRadius chemin de clé pour votre vue dans le Interface Builder . Par exemple, si votre vue a width = height of 48 , définissez layer.cornerRadius = 24:

 enter image description here 

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

0
user3152121