iOS中怎么自定义步骤进度条
创始人
2024-12-19 20:20:30
0次

实现方法如下:

1.用进度条做的首先要解决的是进度条的高度问题,可以通过仿射变换来扩大高度。

progressView.transform = CGAffineTransformMakeScale(1.0f,2.0f);

2.用进度条要设置进度progress要与按钮对应

通过步骤的索引来改变进度的值和按钮的图片。由于按钮的左右有间隔所以要注意-1、0和最后一个的progress值。

3.扩展

看有一些类似查公交、车站运行的APP有的可以点击站点,所以就用按钮来做,这样可以扩展。

4.代码

//// StepProgressView.h// CustomProgress//// Created by City--Online on 15/12/12.// Copyright © 2015年 City--Online. All rights reserved.//#import @interface StepProgressView : UIView@property (nonatomic,assign) NSInteger stepIndex;+(instancetype)progressViewFrame:(CGRect)frame withTitleArray:(NSArray *)titleArray;@end

//// StepProgressView.m// CustomProgress//// Created by City--Online on 15/12/12.// Copyright © 2015年 City--Online. All rights reserved.//#import "StepProgressView.h"static const float imgBtnWidth=18;@interface StepProgressView ()@property (nonatomic,strong) UIProgressView *progressView;//用UIButton防止以后有点击事件@property (nonatomic,strong) NSMutableArray *imgBtnArray;@end@implementation StepProgressView+(instancetype)progressViewFrame:(CGRect)frame withTitleArray:(NSArray *)titleArray{ StepProgressView *stepProgressView=[[StepProgressView alloc]initWithFrame:frame]; //进度条 stepProgressView.progressView=[[UIProgressView alloc]initWithFrame:CGRectMake(0, 5, frame.size.width, 10)]; stepProgressView.progressView.progressViewStyle=UIProgressViewStyleBar; stepProgressView.progressView.transform = CGAffineTransformMakeScale(1.0f,2.0f); stepProgressView.progressView.progressTintColor=[UIColor redColor]; stepProgressView.progressView.trackTintColor=[UIColor blueColor]; stepProgressView.progressView.progress=0.5; [stepProgressView addSubview:stepProgressView.progressView]; stepProgressView.imgBtnArray=[[NSMutableArray alloc]init]; float _btnWidth=frame.size.width/(titleArray.count); for (int i=0; i=_imgBtnArray.count-1?_imgBtnArray.count-1:stepIndex; float _btnWidth=self.bounds.size.width/(_imgBtnArray.count); for (int i=0; i<_imgBtnArray.count; i++) { UIButton *btn=[_imgBtnArray objectAtIndex:i]; if (i<=_stepIndex) {  btn.selected=YES; } else{  btn.selected=NO; } } if (_stepIndex==-1) { self.progressView.progress=0.0; } else if (_stepIndex==_imgBtnArray.count-1) { self.progressView.progress=1.0; } else { self.progressView.progress=(0.5+_stepIndex)*_btnWidth/self.frame.size.width; }}@end

5.使用和效果

NSArray *arr=@[@"区宝时尚",@"区宝时尚",@"时尚",@"区宝时尚",@"时尚"]; StepProgressView *stepView=[StepProgressView progressViewFrame:CGRectMake(0, 100, self.view.bounds.size.width, 60) withTitleArray:arr]; stepView.stepIndex=2; [self.view addSubview:stepView];

补充:上面的代码有一个bug,例如stepIndex=-1时,_stepIndex=并不等-1,原来数组的count返回的是NSUInteger而stepIndex是NSInteger类型,所以需要强制转换一下

stepIndex=stepIndex<-1?-1:stepIndex; _stepIndex = stepIndex >= (NSInteger)(_imgBtnArray.count-1) ? _imgBtnArray.count-1:stepIndex;

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...