iOS定時器進度條

Question

我想在Objective-C中創建一個定時器進度條like that。假設我有60秒的計時器。當計時器值增加時，這個進度條值將被更新，當我點擊十字按鈕時，它將重新初始化計時器。我怎樣才能做到這一點？

Answer 1

1. 設置視圖層次方式如下：

Basicly你有containerView和progressView。您將操作progress view的width constraint。

所以，容器視圖有一個修復高度，並約束一切到超視圖。進度視圖有0個前導，頂部和底部約束，並且現在可以將寬度設置爲0。

你的視圖控制器應當看起來像這樣：

ProgressView幀和約束：

ContainerView幀和constaints：

現在是時候在您的viewController中進行編碼了。

#import "ViewController.h" 

@interface ViewController() 
// Create IBOutlet for the progressView's width constraint 
@property (nonatomic, weak) IBOutlet NSLayoutConstraint *progressViewWidthContraint; 

// Declare a timer 
@property (nonatomic, strong) NSTimer *progressTimer; 
@property (nonatomic, assign) CGFloat progressPerSecond; 

@end 

@implementation ViewController 

// Progress time can be changed on demand 
NSInteger kProgressTime = 60; 

- (void)viewWillAppear:(BOOL)animated { 
    [super viewWillAppear:animated]; 
// Lets setup how much should the progress be increased by a second 
    self.progressPerSecond = self.view.frame.size.width/kProgressTime; 
// Lets start showing the progress 
    [self startOrResetTimer]; 
} 

- (void)startOrResetTimer { 
// Just in case invalidate the timer before we would set it up 
    [self.progressTimer invalidate]; 
// Set the progressView's constant to its initial phase  
    self.progressViewWidthContraint.constant = 0; 
    [self.view setNeedsLayout]; 
    [self.view layoutIfNeeded]; 
// Create the timer  
    self.progressTimer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(updateProgress) userInfo:nil repeats:true]; 
} 

- (void)updateProgress { 
    // If the progress has reached the end of the screen, do not increase the constraint's constant 
    if (self.progressViewWidthContraint.constant == self.view.frame.size.width) { 
     return; 
    } 

    // Increase the constant by the previously calculated progress per second 
    self.progressViewWidthContraint.constant += self.progressPerSecond; 
    [self.view setNeedsLayout]; 
    [self.view layoutIfNeeded]; 
} 

// Hook this method to your reset button on the interface builder, and any time you press the button, it will reset the timer and the progressbar 
- (IBAction)didTapResetTimerButton:(UIButton *)sender { 
    [self startOrResetTimer]; 
} 

@end 

希望這有助於！