在swift中围绕图像创建循环进度条

Question

我正在尝试在图片周围创建一个圆形进度条，如下面的屏幕截图所示。到目前为止，我已设法使用以下代码创建带有绿色边框的圆形图像：

    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

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

Answer 1

我理解你的问题，我建议你使用一些库来创建这样一个加载器，你可以找到许多swift库。它们是FPActivityIndicator，它是你正在搜索的相同的圆形加载器，你只需调整加载器的半径和位置就可以在图像上移动

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

Answer 2

我根据您的需要定制了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

如果要从viewcontroller减小帧大小，则应相应地减少bezierPath.lineWidth以分别显示imageview周围的细微进度。

这是有效的，我测试了它!!!