iOS 自定义步骤进度条

简介:

新项目要做入驻功能,其中包括一个入住流程,类似登录或者注册流程如下图。

之前想着用自己绘图来做,可是又懒不想多写代码,所以就想着能不能用进度条来做。

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 <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防止以后有点击事件
@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<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
{
//  默认为-1 小于-1为-1 大于总数为总数
    _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=@[@"区宝时尚",@"区宝时尚",@"时尚",@"区宝时尚",@"时尚"];
    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;

相关文章
|
2月前
|
移动开发 安全 数据安全/隐私保护
iOS移动应用安全加固:保护您的App免受恶意攻击的重要步骤
iOS移动应用安全加固:保护您的App免受恶意攻击的重要步骤
47 1
|
2月前
|
缓存 iOS开发
IOS网络编程:使用 URLSession 实现网络请求的步骤是什么?
IOS网络编程:使用 URLSession 实现网络请求的步骤是什么?
56 1
|
2月前
|
Linux Android开发 iOS开发
iOS 应用上架的步骤和工具简介
iOS 应用上架的步骤和工具简介
|
9月前
|
iOS开发
iOS快速实现环形渐变进度条
iOS快速实现环形渐变进度条
|
2月前
|
iOS开发 UED
实现一个自定义的iOS动画效果
【4月更文挑战第9天】本文将详细介绍如何在iOS平台上实现一个自定义的动画效果。我们将通过使用Core Animation框架来实现这个动画效果,并展示如何在不同的场景中使用它。文章的目标是帮助读者理解如何使用Core Animation框架来创建自定义动画,并提供一个简单的示例代码。
26 1
|
2月前
|
存储 Swift iOS开发
使用Swift开发一个简单的iOS应用的详细步骤。
使用Swift开发iOS应用的步骤包括:创建Xcode项目,设计界面(Storyboard或代码),定义数据模型,实现业务逻辑,连接界面和逻辑,处理数据存储(如Core Data),添加网络请求(必要时),调试与测试,根据测试结果优化改进,最后提交至App Store或其它平台发布。
70 0
|
10月前
|
iOS开发
iOS多线程之NSOperationQueue-依赖、并发数、优先级、自定义Operation等最全的使用总结
iOS多线程之NSOperationQueue-依赖、并发数、优先级、自定义Operation等最全的使用总结
295 0
|
2月前
|
Linux Android开发 iOS开发
iOS 应用上架的步骤和工具简介
APP开发助手是一款能够辅助iOS APP上架到App Store的工具,它解决了iOS APP上架流程繁琐且耗时的问题,帮助跨平台APP开发者顺利将应用上架到苹果应用商店。最重要的是,即使没有配置Mac苹果机,也可以使用该工具完成一系列操作,包括iOS证书申请、创建iOS开发者证书和 iOS发布证书等各类证书。此外,在Windows、Linux或Mac系统中上传IPA到App Store也变得简单快捷,从而大大简化了iOS APP上架的流程。
|
2月前
|
安全 算法 数据安全/隐私保护
iOS 代码加固与保护方法详解 - 提升 iOS 应用安全性的关键步骤
iOS 代码加固与保护方法详解 - 提升 iOS 应用安全性的关键步骤
|
2月前
|
数据安全/隐私保护 iOS开发 开发者
Uniapp 最新版 iOS 打包详细步骤详解
Uniapp 最新版 iOS 打包详细步骤详解