iOS 구현 절차 진행 바 기능 인 스 턴 스 코드

머리말
개발 과정 에서 우 리 는 많은 장면 에서 파일 의 다운로드 나 파일 의 업로드 등 진도 항목 을 사용 해 야 한다.본 고 는 주로 여러분 에 게 소개 하 는 것 은 절차 진도 효과,절차 진도 효과 참고 입 니 다.

iOS UIKit 프레임 워 크 에는 유사 한 컨트롤 이 제공 되 지 않 았 습 니 다.UIProgressView,UIView,UILabel 조합 을 사용 하여 절차 진행 바 효 과 를 실현 할 수 있 습 니 다.

UIProgressView―수준의 진도 조 효 과 를 실현 합 니 다.

UIView―UIView 를 원형 으로 재단 하여 색인 노드 효 과 를 실현 합 니 다.

UILabel―각 노드 아래 의 제시 문자.

소스 코드
단계 진행 바 를 HQLstepView 클래스 로 패키지 합 니 다.이것 은 UIView 의 하위 클래스 입 니 다.
HQLstepView.h 파일

#import <UIKit/UIKit.h>

@interface HQLStepView : UIView

//        
- (instancetype)initWithFrame:(CGRect)frame titlesArray:(NSArray *)titlesArray stepIndex:(NSUInteger)stepIndex;

//       
- (void)setStepIndex:(NSUInteger)stepIndex animation:(BOOL)animation;

@end

HQLstepView.m 파일

#import "HQLStepView.h"

//       
#define TINT_COLOR [UIColor colorWithRed:35/255.f green:135/255.f blue:255/255.f alpha:1]

@interface HQLStepView ()

@property (nonatomic, copy) NSArray *titlesArray;
@property (nonatomic, assign) NSUInteger stepIndex;

@property (nonatomic, strong) UIProgressView *progressView;
@property (nonatomic, strong) NSMutableArray *circleViewArray;
@property (nonatomic, strong) NSMutableArray *titleLabelArray;
@property (nonatomic, strong) UILabel *indicatorLabel;

@end

@implementation HQLStepView

#pragma mark - Init

- (instancetype)initWithFrame:(CGRect)frame titlesArray:(NSArray *)titlesArray stepIndex:(NSUInteger)stepIndex {
 self = [super initWithFrame:frame];
 if (self) {
 _titlesArray = [titlesArray copy];
 _stepIndex = stepIndex;

 //    
 [self addSubview:self.progressView];
 
 for (NSString *title in _titlesArray) {
  
  //   
  UIView *circle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 13, 13)];
  circle.backgroundColor = [UIColor lightGrayColor];
  circle.layer.cornerRadius = 13.0f / 2;
  [self addSubview:circle];
  [self.circleViewArray addObject:circle];
  
  //   
  UILabel *label = [[UILabel alloc] init];
  label.text = title;
  label.font = [UIFont systemFontOfSize:14];
  label.textAlignment = NSTextAlignmentCenter;
  [self addSubview:label];
  [self.titleLabelArray addObject:label];
 }
 
 //       
 [self addSubview:self.indicatorLabel];
 }
 return self;
}

//         
- (void)layoutSubviews {
 NSInteger perWidth = self.frame.size.width / self.titlesArray.count;
 
 //    
 self.progressView.frame = CGRectMake(0, 0, self.frame.size.width - perWidth, 1);
 self.progressView.center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 4);
 
 CGFloat startX = self.progressView.frame.origin.x;
 for (int i = 0; i < self.titlesArray.count; i++) {
 //   
 UIView *cycle = self.circleViewArray[i];
 if (cycle) {
  cycle.center = CGPointMake(i * perWidth + startX, self.progressView.center.y);
 }
 
 //   
 UILabel *label = self.titleLabelArray[i];
 if (label) {
  label.frame = CGRectMake(perWidth * i, self.frame.size.height / 2, self.frame.size.width / self.titlesArray.count, self.frame.size.height / 2 );
 }
 }
 self.stepIndex = self.stepIndex;
}

#pragma mark - Custom Accessors

- (UIProgressView *)progressView {
 if (!_progressView) {
 _progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
 _progressView.progressTintColor = TINT_COLOR;
 _progressView.progress = self.stepIndex / ((self.titlesArray.count - 1) * 1.0);
 }
 return _progressView;
}

- (UILabel *)indicatorLabel {
 if (!_indicatorLabel) {
 _indicatorLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 23, 23)];
 _indicatorLabel.textColor = TINT_COLOR;
 _indicatorLabel.textAlignment = NSTextAlignmentCenter;
 _indicatorLabel.backgroundColor = [UIColor whiteColor];
 _indicatorLabel.layer.cornerRadius = 23.0f / 2;
 _indicatorLabel.layer.borderColor = [TINT_COLOR CGColor];
 _indicatorLabel.layer.borderWidth = 1;
 _indicatorLabel.layer.masksToBounds = YES;
 }
 return _indicatorLabel;
}

- (NSMutableArray *)circleViewArray {
 if (!_circleViewArray) {
 _circleViewArray = [[NSMutableArray alloc] initWithCapacity:self.titlesArray.count];
 }
 return _circleViewArray;
}

- (NSMutableArray *)titleLabelArray {
 if (!_titleLabelArray) {
 _titleLabelArray = [[NSMutableArray alloc] initWithCapacity:self.titlesArray.count];
 }
 return _titleLabelArray;
}

//         ，      、    、      
- (void)setStepIndex:(NSUInteger)stepIndex {
 for (int i = 0; i < self.titlesArray.count; i++) {
 UIView *cycle = self.circleViewArray[i];
 UILabel *label = self.titleLabelArray[i];
 if (stepIndex >= i) {
  cycle.backgroundColor = TINT_COLOR;
  label.textColor = TINT_COLOR;
 } else {
  cycle.backgroundColor = [UIColor lightGrayColor];
  label.textColor = [UIColor lightGrayColor];
 }
 }
}

#pragma mark - Public

- (void)setStepIndex:(NSUInteger)stepIndex animation:(BOOL)animation {
 if (stepIndex < self.titlesArray.count) {
 //     
 self.stepIndex = stepIndex;
 //      
 [self.progressView setProgress:stepIndex / ((self.titlesArray.count - 1) * 1.0) animated:animation];
 //         
 self.indicatorLabel.text = [NSString stringWithFormat:@"%lu", stepIndex + 1];
 self.indicatorLabel.center = ((UIView *)[self.circleViewArray objectAtIndex:stepIndex]).center;
 }
}

@end

인터페이스 호출:

- (void)viewDidLoad {
 [super viewDidLoad];
 
 //    
 _hqlStepView = [[HQLStepView alloc] initWithFrame:CGRectMake(0, 200, self.view.frame.size.width, 60) titlesArray:@[@"   ", @"   ", @"   "] stepIndex:0];
 [self.view addSubview:_hqlStepView];
}

- (void)viewDidAppear:(BOOL)animated {
 [super viewDidAppear:animated];
 
 //       ，    =    
 [_hqlStepView setStepIndex:0 animation:YES];
}

효과:

UIProgressView 가 구현 하 는 수평 진도 막대 높이 값 은 기본적으로 1 이 므 로 frame 설정 이 잘못 되 었 습 니 다.모방 변환 방식 을 통 해 그것 의 높이 를 증가 시 킬 수 있다.
제3자 프레임 워 크

GitHub: ISTimeline ⭐️900

GitHub: TimelineTableViewCell ⭐️800

참고:

iOS 사용자 정의 절차 진행 막대

XFStepProgress

요약:
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.