wake-up-neo.com

Wie zeichnet man 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 in der Klasse selbst zu ändern? Oder muss ich den Rahmen von einer anderen Klasse wechseln?

(Ich versuche nur einen Ball aufzubauen, der herumhüpft)

iphoneiosipaduiview
124
StanLe

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

Würde ich einfach das drawRect Überschreiben. Methode?

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 in der Klasse selbst zu ändern?

Im Idealfall nicht, aber Sie könnten. 

Oder muss ich den Rahmen von einer anderen Klasse wechseln?

Das würde ich den Eltern überlassen. 

130
Steve

Mit UIBezierPath können Sie einen anderen Weg verwenden (vielleicht ist es zu spät ^^) Erstellen Sie einen Kreis und maskieren Sie UIView 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;
29
Gintama

Mein Beitrag mit einer Swift-Erweiterung:

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

Rufen Sie einfach myView.asCircle() an.

20
Kevin ABRIOUX

Swift 3 - benutzerdefinierte Klasse, einfach wiederzuverwenden. Es verwendet backgroundColor im UI-Builder 

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


}
8
Vyacheslav

 enter image description here Eine andere Annäherung an das Zeichnen mit Kreisen (und anderen Formen) ist die Verwendung von Masken. Sie zeichnen Kreise oder andere Formen, indem Sie erstens Masken mit den benötigten Formen erstellen, zweitens Quadrate Ihrer Farbe angeben und Wenden Sie Masken auf diese Farbquadrate an. Sie können entweder Maske oder Farbe ändern, um einen neuen benutzerdefinierten Kreis oder eine andere Form zu erhalten. Oben ist die Ausgabe des folgenden Codes.

#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

Das Beste ist, Core Graphics zu verwenden, wie Steve sagte, vor allem, wenn Ihr Kreis glatt und poliert aussehen soll. Hier ist die Lösung in Swift:

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

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, setzen Sie layer.cornerRadius = 24:

 enter image description here 

Dies funktioniert jedoch nur, wenn die Ansicht (width/height is fixed) statisch groß ist und der Kreis im Interface Builder nicht angezeigt wird.

0
user3152121