在swift中围绕图像创建圆形进度条

问题描述：

我正在尝试在图像周围创建一个圆形进度栏，如下面的截图所示。到目前为止，我已经成功地使用下面的代码绿色边框创建一个圆形的图像：在swift中围绕图像创建圆形进度条

self.image.layer.cornerRadius = self.image.frame.size.width/2 
    self.image.clipsToBounds = true 
    self.image.layer.borderWidth = 6.0 
    self.image.layer.borderColor = UIColor.greenColor.CGColor

我的问题是，我该如何创建一个从边境圆形进度条，比我已经设置？或者我需要删除这个边界并采取不同的方法？

现在看编辑过的问题 –

您是否尝试过使用CAShapeLayer？ – SHN

你需要使用'pieChar'并将圆形图像放在'pieChar'上方，留下你需要的边界 – jose920405

答

我明白你的问题，我建议你使用一些库创建这样一个装载机你可以找到许多迅速库。关于它们是FPActivityIndicator，它与您正在搜索的圆形装载机相同，您只需调整装载机的半径和位置即可在图像周围移动它

如果您需要进一步的帮助，可以发送给我消息，如果它有帮助，请接受答案。由于

原文是要求图像周围的圆形进度条！ – Lion

@Lion的挑战是创建圆形条，并且可以在图像周围轻松调整它:) –

没有那么容易，因为你认为。你必须为每个设备管理它。试试这个库，你已经提到了在回答和检查每个设备，并检查它与不同大小的imageview之间发生的循环进展。（即尝试onece（50,50）然后尝试（300,300））等！ – Lion

答

我可以根据自己的需要来定制的WDUK in stack overflow post答案，

这多少有点像，

TestView.h

#import <UIKit/UIKit.h> 

@interface TestView : UIView 

@property (nonatomic) double percent; 

@end

TestView.m

#import "TestView.h" 


@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 
{ 

CGFloat constant = rect.size.width/ 5; 

UIImage *img = [UIImage imageNamed:@"lion.jpg"]; // lion.jpg is image name 
UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(rect.origin.x + constant/2, rect.origin.y + constant/2, rect.size.width-constant, rect.size.height - constant)]; 
imgView.image = img; 
imgView.layer.masksToBounds = YES; 
imgView.layer.cornerRadius = imgView.frame.size.width/2; 

UIBezierPath* bezierPath = [UIBezierPath bezierPath]; 

// Create our arc, with the correct angles 
[bezierPath addArcWithCenter:CGPointMake(rect.size.width/2, rect.size.height/2) 
         radius:constant*2 
        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]; 



[self addSubview:imgView]; 

} 

@end

ViewController.m

#import "ViewController.h" 
#import "TestView.h" 

@interface ViewController(){ 
TestView* m_testView; 
NSTimer* m_timer; 
} 

@end 

@implementation ViewController 

- (void)viewDidLoad { 
[super viewDidLoad]; 
// Init our view 

CGRect frame = CGRectMake(50, 50, 200, 200); 

m_testView = [[TestView alloc] initWithFrame:frame]; 
m_testView.percent = 0; 
[self.view addSubview:m_testView]; 
// Do any additional setup after loading the view, typically from a nib. 
} 

- (void)viewDidAppear:(BOOL)animated 
{ 
// Kick off a timer to count it down 
m_timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(increamentSpin) userInfo:nil repeats:YES]; 
} 

- (void)increamentSpin 
{ 
    // increament our percentage, do so, and redraw the view 
if (m_testView.percent < 100) { 
    m_testView.percent = m_testView.percent + 1; 
    [m_testView setNeedsDisplay]; 
} 
else { 
    [m_timer invalidate]; 
    m_timer = nil; 
    } 
} 

- (void)didReceiveMemoryWarning { 
[super didReceiveMemoryWarning]; 
// Dispose of any resources that can be recreated. 
} 

@end

如果你正在减少从视图 - 控制帧的大小，那么你应该减少bezierPath.lineWidth相应显示周围的ImageView分别薄进展。

这是工作完成，我已经测试了！

在swift中围绕图像创建圆形进度条

相关推荐