我想创建一个圆形进度条,如下所示:
我如何使用Objective-C和Cocoa做到这一点?
我是如何开始创建UIView和编辑drawRect的,但我有点不知所措.任何帮助都将不胜感激.
谢谢
我想创建一个圆形进度条,如下所示:
我如何使用Objective-C和Cocoa做到这一点?
我是如何开始创建UIView和编辑drawRect的,但我有点不知所措.任何帮助都将不胜感激.
谢谢
基本概念是利用UIBezierPath
级的优势.你可以画圆弧,达到你想要的效果.我只有半个小时左右的时间来try 这个,但我的try 就在下面.
非常基本,它只是在路径上使用了一个笔划,但现在我们开始.您可以根据自己的具体需要更改/修改此设置,但执行arc倒计时的逻辑非常相似.
在view类中:
@interface TestView () {
CGFloat startAngle;
CGFloat endAngle;
}
@end
@implementation TestView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
self.backgroundColor = [UIColor whiteColor];
// Determine our start and stop angles for the arc (in radians)
startAngle = M_PI * 1.5;
endAngle = startAngle + (M_PI * 2);
}
return self;
}
- (void)drawRect:(CGRect)rect
{
// Display our percentage as a string
NSString* textContent = [NSString stringWithFormat:@"%d", self.percent];
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
// Create our arc, with the correct angles
[bezierPath addArcWithCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2)
radius:130
startAngle:startAngle
endAngle:(endAngle - startAngle) * (_percent / 100.0) + startAngle
clockwise:YES];
// Set the display for the path, and stroke it
bezierPath.lineWidth = 20;
[[UIColor redColor] setStroke];
[bezierPath stroke];
// Text Drawing
CGRect textRect = CGRectMake((rect.size.width / 2.0) - 71/2.0, (rect.size.height / 2.0) - 45/2.0, 71, 45);
[[UIColor blackColor] setFill];
[textContent drawInRect: textRect withFont: [UIFont fontWithName: @"Helvetica-Bold" size: 42.5] lineBreakMode: NSLineBreakByWordWrapping alignment: NSTextAlignmentCenter];
}
对于视图控制器:
@interface ViewController () {
TestView* m_testView;
NSTimer* m_timer;
}
@end
- (void)viewDidLoad
{
// Init our view
[super viewDidLoad];
m_testView = [[TestView alloc] initWithFrame:self.view.bounds];
m_testView.percent = 100;
[self.view addSubview:m_testView];
}
- (void)viewDidAppear:(BOOL)animated
{
// Kick off a timer to count it down
m_timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(decrementSpin) userInfo:nil repeats:YES];
}
- (void)decrementSpin
{
// If we can decrement our percentage, do so, and redraw the view
if (m_testView.percent > 0) {
m_testView.percent = m_testView.percent - 1;
[m_testView setNeedsDisplay];
}
else {
[m_timer invalidate];
m_timer = nil;
}
}