iOS如何自定義步驟進(jìn)度條實(shí)例詳解
前言
最近新項(xiàng)目要做入駐功能,其中包括一個入住流程,類似登錄或者注冊流程如下圖。

之前想著用自己繪圖來做,可是又懶不想多寫代碼,所以就想著能不能用進(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和最后一個的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ū)寶時尚",@"區(qū)寶時尚",@"時尚",@"區(qū)寶時尚",@"時尚"]; StepProgressView *stepView=[StepProgressView progressViewFrame:CGRectMake(0, 100, self.view.bounds.size.width, 60) withTitleArray:arr]; stepView.stepIndex=2; [self.view addSubview:stepView];

補(bǔ)充:上面的代碼有一個bug,例如stepIndex=-1時,_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í)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
- iOS中使用NSProgress類來創(chuàng)建UI進(jìn)度條的方法詳解
- IOS實(shí)現(xiàn)簡單的進(jìn)度條功能
- iOS快速實(shí)現(xiàn)環(huán)形漸變進(jìn)度條
- iOS 進(jìn)度條、加載、安裝動畫的簡單實(shí)現(xiàn)
- ios開發(fā)加載webview顯示進(jìn)度條實(shí)例
- iOS實(shí)現(xiàn)帶動畫的環(huán)形進(jìn)度條
- 使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能
- Android仿IOS ViewPager滑動進(jìn)度條
- iOS中利用CoreAnimation實(shí)現(xiàn)一個時間的進(jìn)度條效果
- iOS實(shí)現(xiàn)步驟進(jìn)度條功能實(shí)例代碼
相關(guān)文章
iOS 無卡頓同時使用圓角、陰影和邊框的實(shí)現(xiàn)
這篇文章主要介紹了iOS 無卡頓同時使用圓角、陰影和邊框的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(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-02
iOS應(yīng)用程序之間的幾種跳轉(zhuǎn)情況詳解
這篇文章給大家詳細(xì)介紹了iOS應(yīng)用程序之間跳轉(zhuǎn)的幾種情況,包括跳轉(zhuǎn)到另一個程序的主界面、跳轉(zhuǎn)到另一個程序的指定界面以及如何從目標(biāo)程序的非主頁界面回到當(dāng)前(跳轉(zhuǎn)前)程序呢?有需要的朋友們可以下面來一起看看。2016-09-09
超精準(zhǔn)的iOS計(jì)步器實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了超精準(zhǔn)的iOS計(jì)步器實(shí)現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11
iOS 原生實(shí)現(xiàn)掃描二維碼和條形碼功能限制掃描區(qū)域
這篇文章主要介紹了iOS 原生實(shí)現(xiàn)掃描二維碼和條形碼功能限制掃描區(qū)域,需要的朋友可以參考下2017-03-03
舉例講解iOS應(yīng)用開發(fā)中hitTest觸摸事件的編寫方法
這篇文章主要介紹了舉例講解iOS應(yīng)用開發(fā)中hitTest觸摸事件的編寫方法,重點(diǎn)講解了兩個view之間的事件傳遞,需要的朋友可以參考下2016-04-04

