Как нарисовать пользовательский UIView, который представляет собой просто круг - приложение для iPhone

Question

Как бы я начал рисовать пользовательский UIView, который буквально просто шар (2D круг)? Буду ли я просто переопределить метод drawRect? А может кто-нибудь показать мне код для рисования синего круга?

Кроме того, можно ли изменить рамку этого представления внутри самого класса? Или мне нужно изменить кадр из другого класса?

(просто пытаюсь настроить мяч, подпрыгивающий)

Answer 1

Вы можете использовать QuartzCore и сделать что-то это -

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

Answer 2

Я бы просто переопределил drawRect метод?

Да:

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

Кроме того, можно ли изменить рамку этого представления внутри самого класса?

В идеале нет, но вы могли бы.

Или мне нужно поменять кадр из другого класса?

Я бы позволил родителям это контролировать.

Answer 3

Вот еще один способ использования UIBezierPath (может быть, уже слишком поздно ^^) Создайте круг и замаскируйте UIView с ним следующим образом:

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;

Answer 4

Мой вклад с расширением Swift:

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

Просто позвоните myView.asCircle()

Answer 5

Swift 3 - пользовательский класс, легко использовать повторно. Он использует backgroundColor, установленный в UI Builder

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

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

}

Answer 6

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

Answer 7

Другой способ приблизиться к рисованию кругов (и других фигур) - использовать маски. Вы рисуете круги или другие фигуры, во-первых, делая маски нужных вам фигур, во-вторых, создавая квадраты вашего цвета и, в-третьих, применяете маски к этим квадратам цвета. Вы можете изменить либо маску, либо цвет, чтобы получить новый пользовательский круг или другую форму.

#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

Вот вывод кода выше:

Answer 8

Лучше всего использовать Core Graphics, как сказал Стив, особенно если вы хотите, чтобы ваш круг выглядел гладким и отполированным.Вот его решение в Swift:

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

Answer 9

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        
}

Answer 10

Есть другая альтернатива для ленивых людей.Вы можете установить layer.cornerRadius путь ключа для своего просмотра в Interface Builder .Например, если ваш вид имеет ширина = высота 48 , установите layer.cornerRadius = 24:

Однако это толькоработает, если у вас статический размер представления (width/height is fixed) и в построителе интерфейсов не отображается круг.