iOS如何自定義步驟進(jìn)度條實(shí)例詳解
前言
最近新項(xiàng)目要做入駐功能,其中包括一個(gè)入住流程,類似登錄或者注冊流程如下圖。
之前想著用自己繪圖來做,可是又懶不想多寫代碼,所以就想著能不能用進(jìn)度條來做。
實(shí)現(xiàn)方法如下:
1.用進(jìn)度條做的首先要解決的是進(jìn)度條的高度問題,可以通過仿射變換來擴(kuò)大高度。
progressView.transform = CGAffineTransformMakeScale(1.0f,2.0f);
2.用進(jìn)度條要設(shè)置進(jìn)度progress要與按鈕對應(yīng)
通過步驟的索引來改變進(jìn)度的值和按鈕的圖片。由于按鈕的左右有間隔所以要注意-1、0和最后一個(gè)的progress值。
3.擴(kuò)展
看有一些類似查公交、車站運(yùn)行的APP有的可以點(diǎn)擊站點(diǎn),所以就用按鈕來做,這樣可以擴(kuò)展。
4.代碼
// // StepProgressView.h // CustomProgress // // Created by City--Online on 15/12/12. // Copyright © 2015年 City--Online. All rights reserved. // #import <UIKit/UIKit.h> @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防止以后有點(diǎn)擊事件 @property (nonatomic,strong) NSMutableArray *imgBtnArray; @end @implementation StepProgressView +(instancetype)progressViewFrame:(CGRect)frame withTitleArray:(NSArray *)titleArray { StepProgressView *stepProgressView=[[StepProgressView alloc]initWithFrame:frame]; //進(jìn)度條 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<titleArray.count; i++) { //圖片按鈕 UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom]; [btn setImage:[UIImage imageNamed:@"0.png"] forState:UIControlStateNormal]; [btn setImage:[UIImage imageNamed:@"1.png"] forState:UIControlStateSelected]; btn.frame=CGRectMake(_btnWidth/2+_btnWidth*i-imgBtnWidth/2, 0, imgBtnWidth, imgBtnWidth); btn.selected=YES; [stepProgressView addSubview:btn]; [stepProgressView.imgBtnArray addObject:btn]; //文字 UILabel *titleLabel=[[UILabel alloc]initWithFrame:CGRectMake(btn.center.x-_btnWidth/2, frame.size.height-20, _btnWidth, 20)]; titleLabel.text=[titleArray objectAtIndex:i]; [titleLabel setTextColor:[UIColor blackColor]]; titleLabel.textAlignment=NSTextAlignmentCenter; titleLabel.font=[UIFont systemFontOfSize:18]; [stepProgressView addSubview:titleLabel]; } stepProgressView.stepIndex=-1; return stepProgressView; } -(void)setStepIndex:(NSInteger)stepIndex { // 默認(rèn)為-1 小于-1為-1 大于總數(shù)為總數(shù) _stepIndex=stepIndex<-1?-1:stepIndex; _stepIndex=stepIndex >=_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=@[@"區(qū)寶時(shí)尚",@"區(qū)寶時(shí)尚",@"時(shí)尚",@"區(qū)寶時(shí)尚",@"時(shí)尚"]; StepProgressView *stepView=[StepProgressView progressViewFrame:CGRectMake(0, 100, self.view.bounds.size.width, 60) withTitleArray:arr]; stepView.stepIndex=2; [self.view addSubview:stepView];
補(bǔ)充:上面的代碼有一個(gè)bug,例如stepIndex=-1時(shí),_stepIndex=并不等-1,原來數(shù)組的count返回的是NSUInteger而stepIndex是NSInteger類型,所以需要強(qiáng)制轉(zhuǎn)換一下
stepIndex=stepIndex<-1?-1:stepIndex; _stepIndex = stepIndex >= (NSInteger)(_imgBtnArray.count-1) ? _imgBtnArray.count-1:stepIndex;
總結(jié):
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- iOS中使用NSProgress類來創(chuàng)建UI進(jìn)度條的方法詳解
- IOS實(shí)現(xiàn)簡單的進(jìn)度條功能
- iOS快速實(shí)現(xiàn)環(huán)形漸變進(jìn)度條
- iOS 進(jìn)度條、加載、安裝動(dòng)畫的簡單實(shí)現(xiàn)
- ios開發(fā)加載webview顯示進(jìn)度條實(shí)例
- iOS實(shí)現(xiàn)帶動(dòng)畫的環(huán)形進(jìn)度條
- 使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能
- Android仿IOS ViewPager滑動(dòng)進(jìn)度條
- iOS中利用CoreAnimation實(shí)現(xiàn)一個(gè)時(shí)間的進(jìn)度條效果
- iOS實(shí)現(xiàn)步驟進(jìn)度條功能實(shí)例代碼
相關(guān)文章
iOS 無卡頓同時(shí)使用圓角、陰影和邊框的實(shí)現(xiàn)
這篇文章主要介紹了iOS 無卡頓同時(shí)使用圓角、陰影和邊框的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01以代碼實(shí)例總結(jié)iOS應(yīng)用開發(fā)中數(shù)據(jù)的存儲方式
這篇文章主要介紹了iOS應(yīng)用開發(fā)中數(shù)據(jù)的存儲方式的實(shí)例總結(jié),代碼為傳統(tǒng)的Objective-C語言,需要的朋友可以參考下2016-02-02iOS應(yīng)用程序之間的幾種跳轉(zhuǎn)情況詳解
這篇文章給大家詳細(xì)介紹了iOS應(yīng)用程序之間跳轉(zhuǎn)的幾種情況,包括跳轉(zhuǎn)到另一個(gè)程序的主界面、跳轉(zhuǎn)到另一個(gè)程序的指定界面以及如何從目標(biāo)程序的非主頁界面回到當(dāng)前(跳轉(zhuǎn)前)程序呢?有需要的朋友們可以下面來一起看看。2016-09-09iOS下拉刷新 UIScrollVie異常閃動(dòng)問題
這篇文章主要介紹了iOS下拉刷新 UIScrollVie異常閃動(dòng)問題,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03超精準(zhǔn)的iOS計(jì)步器實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了超精準(zhǔn)的iOS計(jì)步器實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11iOS 原生實(shí)現(xiàn)掃描二維碼和條形碼功能限制掃描區(qū)域
這篇文章主要介紹了iOS 原生實(shí)現(xiàn)掃描二維碼和條形碼功能限制掃描區(qū)域,需要的朋友可以參考下2017-03-03舉例講解iOS應(yīng)用開發(fā)中hitTest觸摸事件的編寫方法
這篇文章主要介紹了舉例講解iOS應(yīng)用開發(fā)中hitTest觸摸事件的編寫方法,重點(diǎn)講解了兩個(gè)view之間的事件傳遞,需要的朋友可以參考下2016-04-04