在swift中圍繞圖像創建圓形進度條

-1

我正在嘗試在圖像周圍創建一個圓形進度欄，如下面的截圖所示。到目前爲止，我已經成功地使用下面的代碼綠色邊框創建一個圓形的圖像：在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

我的問題是，我該如何創建一個從邊境圓形進度條，比我已經設置？或者我需要刪除這個邊界並採取不同的方法？

來源

2016-07-27 Rahul singh

現在看編輯過的問題 –

您是否嘗試過使用CAShapeLayer？ – SHN

你需要使用'pieChar'並將圓形圖像放在'pieChar'上方，留下你需要的邊界 – jose920405

我明白你的問題，我建議你使用一些庫創建這樣一個裝載機你可以找到許多迅速庫。關於它們是FPActivityIndicator，它與您正在搜索的圓形裝載機相同，您只需調整裝載機的半徑和位置即可在圖像周圍移動它

如果您需要進一步的幫助，可以發送給我消息，如果它有幫助，請接受答案。由於

來源

2016-07-27 12:37:14

原文是要求圖像周圍的圓形進度條！ – 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分別薄進展。

這是工作完成，我已經測試了！

來源

2016-07-27 13:16:30 Lion

在swift中圍繞圖像創建圓形進度條

回答

相關問題