[IOS] 이미지로 프로그레스바 만들기

* 물이 하나도 채워지지 않은 (progress 가 0) 이미지 ic_water_empty.png 와 물이 모두 채워진 (progress 가 100) 이미지 ic_water_full.png 가 필요

 

 

#import "ViewController.h"
 
@interface ViewController ()
// 마스크뷰 - 물이 위로 차오르는 효과를 주기 위해
@property (nonatomic, strong) UIView *maskView;
 
@end
 
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
 
    // 물이 빈 이미지
    self.ivEmptyWater.contentMode = UIViewContentModeScaleAspectFit;
    // 물이 가득찬 이미지
    self.ivFullWater.contentMode = UIViewContentModeScaleAspectFit;
    
}
 
// 뷰의 사이즈가 정해진 후 여러번 호출될 수 있음
- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    
    if(!self.maskView) {
        [self setUpMaskView];
    }
}
 
- (void) setUpMaskView {
    // 물이 가득찬 이미지뷰에 마스크뷰 설정 - 마스크뷰가 올라가면서 물이 점점 차오르는 애니메이션을 줄 수 있다
    self.maskView = [[UIView alloc] initWithFrame:CGRectMake(0, self.ivFullWater.bounds.size.height, self.ivFullWater.bounds.size.width, 0)];
    self.maskView.backgroundColor = UIColor.blackColor;
    self.ivFullWater.layer.mask = self.maskView.layer;
}
 
- (IBAction)onStart:(UIButton *)sender {
    // ex) 80% 까지 물이 채워짐
    [self updateProgress:80];
}
 
// 프로그레스 업데이트 : progress - 0~100
- (void) updateProgress:(NSInteger)progress {
    progress = MAX(0, MIN(progress, 100));
    
    CGFloat maxHeight = self.ivFullWater.bounds.size.height;
    CGFloat maskHeight = maxHeight * (progress / 100.0);    // progress 만큼 마스크뷰 높이 설정 ex) 80->전체 높이의 80% 만큼 설정
    CGFloat maskYPos = maxHeight - maskHeight;
    
    // 보여줄 영역을 설정 - 마스크뷰 영역만큼만 ivFullWater 를 보여준다
    CGRect maskFrame = CGRectMake(0, maskYPos, self.ivFullWater.bounds.size.width, maskHeight);
    
    // 2초 애니메이션 실행
    [UIView animateWithDuration:2.0 animations:^{
        self.maskView.frame = maskFrame;
    }];
}
 
@end
 

 

 

스토리보드

 

 

결과