すぐに画像の周りに円形のプログレスバーを作成する

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

私はあなたの問題を理解し、私はあなたが迅速ライブラリの多くを見つけることができるようにローダーを作成するために、いくつかのライブラリを使用することをお勧めします。それらの上にFPActivityIndicator、あなたが探している同じ円形ローダーです、あなたは画像の周りに移動するローダーの半径と位置を調整する必要があります

あなたが私を送ることがさらに必要な場合それが役に立ったら、その答えを受け入れてください。おかげ

Answer 2

は、私はそれはのように、

TestView.h

#import <UIKit/UIKit.h> 

@interface TestView : UIView 

@property (nonatomic) double percent; 

@end 

TestView.m

ものです、あなたの必要性に応じて

をWDUK in stack overflow postの答えをカスタマイズしました

#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をからフレームサイズを小さくしているなら、あなたはImageViewの周りにそれぞれ薄い進行状況を表示するために適宜bezierPath.lineWidthを減らす必要があります。

これは動作中です。テストしました！