Cách vẽ một UIView tùy chỉnh chỉ là một vòng tròn - ứng dụng iPhone

Làm thế nào tôi có thể vẽ một UIView tùy chỉnh theo nghĩa đen chỉ là một quả bóng (một vòng tròn 2D)? Tôi sẽ chỉ ghi đè phương thức drawRect? Và ai đó có thể chỉ cho tôi mã để vẽ một vòng tròn màu xanh không?

Ngoài ra, có thể thay đổi khung của khung nhìn đó trong chính lớp đó không? Hay tôi cần thay đổi khung hình từ một lớp khác?

(chỉ cố gắng để thiết lập một quả bóng nảy xung quanh)

Bạn có thể sử dụng QuartzCore và làm một cái gì đó -

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

Tôi sẽ chỉ ghi đè phương thức drawRect?

Đúng:

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

Ngoài ra, có thể thay đổi khung của khung nhìn đó trong chính lớp đó không?

Lý tưởng là không, nhưng bạn có thể.

Hay tôi cần thay đổi khung hình từ một lớp khác?

Tôi sẽ để phụ huynh kiểm soát điều đó.

Đây là một cách khác bằng cách sử dụng UIBezierPath (có lẽ đã quá muộn ^^) Tạo một vòng tròn và che dấu UIView với nó, như sau:

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;

Đóng góp của tôi với tiện ích mở rộng Swift:

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

Chỉ cần gọi myView.asCircle()

Swift 3 - lớp tùy chỉnh, dễ sử dụng lại. Nó sử dụng backgroundColorthiết lập trong trình xây dựng giao diện người dùng

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

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

}

Lớp 3 Swift :

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

Một cách khác để tiếp cận bản vẽ hình tròn (và các hình dạng khác) là sử dụng mặt nạ. Bạn vẽ các vòng tròn hoặc các hình dạng khác bằng cách, đầu tiên, tạo các mặt nạ của các hình dạng bạn cần, thứ hai, cung cấp các ô vuông màu của bạn và thứ ba, áp dụng các mặt nạ cho các ô vuông màu đó. Bạn có thể thay đổi mặt nạ hoặc màu sắc để có được một vòng tròn tùy chỉnh mới hoặc hình dạng khác.

#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

Đây là đầu ra của mã ở trên:

Có một lựa chọn khác cho những người lười biếng. Bạn có thể đặt layer.cornerRadius đường dẫn chính cho chế độ xem của mình trong Trình tạo giao diện . Ví dụ: nếu chế độ xem của bạn có chiều rộng = chiều cao là 48 , hãy đặt layer.cornerRadius = 24:

Tuy nhiên, điều này chỉ hoạt động nếu bạn có kích thước tĩnh của chế độ xem (width/height is fixed)và nó không hiển thị vòng tròn trong trình tạo giao diện.

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        
}