自定义圆圈与UIView中的线条相连

时间:2014-02-19 18:01:23

标签: ios iphone objective-c ios7

我需要绘制一个过程指示器(不是进度指示器),根据约束动态改变行程和填充颜色。我发现很难画出所需的形状。任何指导都会很棒。

我怎么画这个?用户界面应与进度视图类似,但在行之间有圆圈。感谢

1 个答案:

答案 0 :(得分:0)

你应该能够使用CAShapeLayers和QuartzCore绘制这种东西。

将CoreGraphics.framework添加到您的库中。

在班级的顶端

#import <QuartzCore/QuartzCore.h>

这是一个看起来像0-0-0的例子(假设这是你要找的东西)。

// this will be a parent layer container
CALayer *progressIndicator = [[CALayer alloc] init];

// the first bubble
CAShapeLayer *bubble1 = [[CAShapeLayer alloc] init];
bubble1.fillColor = [UIColor lightGrayColor];
bubble1.strokeColor = [UIColor darkGrayColor];
bubble1.strokeWidth = 1;
bubble1.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,50,50)].CGPath;
[progressIndicator addSublayer:bubble1];

// the first connecting line
CAShapeLayer *line1 = [[CAShapeLayer alloc] init];
line1.strokeColor = [UIColor darkGrayColor];
line1.strokeWidth = 2;

UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(50, 25)];
[linePath addLineToPoint:CGPointMake(75, 25)];

line1.path = linePath.CGPath;
[progressIndicator addSublayer:line1];

// ... And so on for the next 2 bubbles and 1 line. ...//

// Add it to your view.
[self.view.layer addSublayer:progressIndicator];

您也可以为这些对象上的大多数属性设置动画(如不透明度),以便为进度条提供随着时间的推移慢慢填充的效果。