如何绘制只是一个圆圈的自定义UIView-iPhone应用程序


129

我将如何绘制一个实际上只是一个球(一个2D圆)的自定义UIView?我是否要重写drawRect方法?有人可以告诉我绘制一个蓝色圆圈的代码吗?

另外,可以在类本身内更改该视图的框架吗?还是我需要从其他班级更改框架?

(只是试图设置一个反弹的球)

Answers:


209

您可以使用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];

104
仅供参考,为了使您的视图使用QuartCore成为圆形,拐角半径必须为框架高度/宽度的一半。这是制作圆圈的最简单方法,但不一定是最有效的方法。如果性能至关重要,那么drawRect可能会产生更好的结果。
本杰明·梅奥

4
是的。100是高度/宽度。
卡尔

3
是的,抱歉,没把这个指向你,Kal。我向StanLe提到过这种情况,以防他想使用不同大小的视图。
本杰明·梅奥

如果您的circleView尺寸不是100X100,则cornerRadius应该是(新尺寸)/ 2
gran33

但是我注意到,带有圆角半径的圆有时会稍微“平坦” /修剪边缘。至少与边框一起使用时。知道为什么吗?半径恰好是视图大小的一半。我以为这可能是剪辑问题,但似乎并非如此,即使使用较小的子图层也尝试过-仍然具有相同的效果。
Ixx

135

我是否要重写drawRect方法?

是:

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

另外,可以在类本身内更改该视图的框架吗?

理想情况下不是,但是可以。

还是我需要从其他班级更改框架?

我让父母控制。


1
如何设置自定义颜色,不仅是蓝色?我尝试像这样使用白色和蓝色:([[self.colorOfCircle CGColor]),但什么都没有发生:\
gaussblurinc

@loldop是self.colorOfCircle UIColor吗?设置好了吗 如果在该行上放置一个断点并查看该值,那是您所期望的吗?如果您在事后设置了该设置,则必须使视图中包含该圆的部分无效。
2013年

9
@gaussblurinc use CGContextSetFillColorWithColor(ctx, self.colorOfCircle.CGColor);,该解决方案中提出的方法CGColorGetComponents仅适用于某些颜色,请参见stackoverflow.com/questions/9238743/…–
yonilevy

注意任何陷入困境的人。而不是rect,我不小心使用self.frame了椭圆。正确的值为self.bounds。天哪!:)
Olie

31

这是使用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;

1
确实不需要将该形状图层作为蒙版。您可以直接将shape图层用作视图的图层并为其填充颜色。面罩可能要贵得多。
杰西·鲁萨克

UIView的层是CALayer,因此我们如何在此层上绘制形状。我想我们将形状层添加到视图的层而不遮罩它?
银魂

1
您可以将UIView子类化并覆盖layerClass类方法以使其成为形状图层。
杰西·鲁萨克

@JesseRusak,我的建议(要在UIView图层本身上设置形状)存在的问题是您必须不能正确使用backgroundColor。您将需要应用fillColor并将backgroundColor设置为clearColor,这意味着UIView的用户将无法自然地设置backgroundColor。
理查德·维纳布尔

25

我对Swift扩展的贡献:

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

刚打电话 myView.asCircle()


设置masksToBounds为true并使用self此答案都是可选的,但这仍然是最短和最佳的解决方案
Max Desiatov

17

Swift 3-自定义类,易于重用。它使用backgroundColorUI构建器中的set

import UIKit

@IBDesignable
class CircleBackgroundView: UIView {

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

}

1
优秀的。这是正确的自适应方法。
Womble

14

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

6

接近圆形(和其他形状)图形的另一种方法是使用蒙版。绘制圆形或其他形状的方法是,首先制作需要的形状的遮罩,其次,提供颜色的正方形,然后,将遮罩应用于这些颜色的正方形。您可以更改蒙版或颜色来获得新的自定义圆圈或其他形状。

#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

这是上面代码的输出:

四圈


2

懒人还有另一种选择。您可以在“ 界面生成器”中为视图设置layer.cornerRadius 关键路径。例如,如果您的视图的width = height为48,则设置:layer.cornerRadius = 24

在此处输入图片说明

但是,这仅在视图具有静态大小(width/height is fixed)且在界面生成器中未显示圆的情况下才有效。


1

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        
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.