[英]Creating a circular progress bar around an image in swift
I am trying to create a circular progress bar around an image as shown in the screenshot below. 我正在尝试围绕图像创建圆形进度条,如下面的屏幕快照所示。 So far I have managed to create a round image with a green border using the code below: 到目前为止,我已经设法使用以下代码创建带有绿色边框的圆形图像:
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
My question is, how do I create a circular progress bar from the border than I have set? 我的问题是,如何从边框创建比设置的圆形进度条? Or do I need to remove this border and take a different approach? 还是我需要删除该边框并采取其他方法?
I understood your problem and I suggest you to use some library to create such a loader you can find many of the swift libraries. 我了解您的问题,建议您使用一些库来创建这样的加载器,您可以找到许多Swift库。 On of them is FPActivityIndicator , it is the same circular loader which you are searching for, you only have to adjust the radius and position of the loader to move it around the image 在它们上的是FPActivityIndicator ,它是您要搜索的同一圆形加载器,只需调整加载器的半径和位置即可在图像周围移动
if you need further help you can send me message and if it helps please accept the answer. 如果您需要进一步的帮助,可以给我发送消息,如果有帮助,请接受答案。 Thanks 谢谢
I have customized the answer of WDUK in stack overflow post according to your need, 我已根据您的需要在堆栈溢出中自定义了WDUK的答案,
It is something like, 就像
TestView.h TestView.h
#import <UIKit/UIKit.h>
@interface TestView : UIView
@property (nonatomic) double percent;
@end
TestView.m 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 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
If you are decreasing frame size from viewcontroller then you should reduce bezierPath.lineWidth
accordingly to show respectively thin progress around imageview. 如果要从ViewController减小帧大小, bezierPath.lineWidth
相应地减小bezierPath.lineWidth
,以分别显示围绕imageview的bezierPath.lineWidth
进度。
And this is working perfact, i have tested it!!! 这是正常工作,我已经测试过了!!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.