快速创建围绕图像的圆形进度条答案

【问题标题】：Creating a circular progress bar around an image in swift快速创建围绕图像的圆形进度条
【发布时间】：2016-07-27 12:05:09
【问题描述】：

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

    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 吗？
您需要使用pieChar 并将圆形图像放在pieChar 上方，留下您需要的边框空间

标签： ios swift uiimageview

【解决方案1】：

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

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

【讨论】：

原帖要求在图片周围设置圆形进度条！！
@Lion 挑战是创建圆形条，并且可以轻松地围绕图像调整它，:)
不，这并不像您想象的那么容易。您必须为每台设备管理它。只需使用您在回答中提到的这个库尝试它并检查每个设备并使用在循环进度之间发生的不同大小的 imageview 进行检查。（即尝试 onece (50,50) 然后尝试 (300,300) ）等等！

【解决方案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 周围的细长进度。

这是完美的，我已经测试过了！！！

【讨论】：