可滑动刻度尺

没什么好解释的了吧,直接代码了,有须要的能够参考,Demo地址下载的是纯oc写的,本博客内容为swift建立git

下载地址:http://download.csdn.net/download/sinat_28585351/10229670github

github:https://github.com/Raymon-lau/sliderProgressDemo.git

封装刻度尺swift

.happ

@interface RMScrollView : UIScrollView

- (void)createScorllWithMinValue:(int)min
                        maxValue:(int)max
                   intervalValue:(int)intervalValue;


@end
.m

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
@implementation RMScrollView
{
    CGFloat _kScrollWidth;
}

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        _kScrollWidth = SCREEN_WIDTH;
        self.bounces = NO;
        self.showsHorizontalScrollIndicator = NO;
    }
    return self;
}

- (void)createScorllWithMinValue:(int)min
                        maxValue:(int)max
                   intervalValue:(int)intervalValue{
    //max为最大值, intervalValue为间隔,lineSpace为间隔之间的宽度,10为间隔数
    for (int i = min, j = 0; i <= max; i+=intervalValue, j++) {
        CGFloat lineSpace = 10;
        _kScrollWidth += lineSpace;
        UILabel *lable = [[UILabel alloc] initWithFrame:CGRectMake(SCREEN_WIDTH/2 + lineSpace * j, 40, 1, 10)];
        lable.backgroundColor = [UIColor lightGrayColor];
        [self addSubview:lable];
        
        if (i % (intervalValue * 10) == 0 || i == min) {
            lable.frame = CGRectMake(SCREEN_WIDTH/2 +lineSpace * j, 30, 1, 20);
            UILabel * numberLable = [[UILabel alloc] initWithFrame:CGRectMake(lable.frame.origin.x - 20, lable.frame.origin.y - 20, 50, 20)];
            numberLable.font = [UIFont systemFontOfSize:12];
            numberLable.textAlignment = NSTextAlignmentCenter;
            numberLable.textColor = [UIColor grayColor];
            numberLable.text = [NSString stringWithFormat:@"%d",i];
            [self addSubview:numberLable];
        }
    }
    self.contentSize = CGSizeMake(_kScrollWidth, 50);
    NSLog(@"%f",self.contentOffset.x);
    self.contentOffset = CGPointMake(200, 0);
}

@end

建立刻度进度条

 var _scrollView = ZDScrollView()// 刻度滑动视图
    var minValue: NSInteger = 0// 最小刻度
    var interval: CGFloat = 500// 每小段间隔的数值
    var maxValue: Int = 50000// 最大刻度
    var indexFlagValue:CGFloat = 10000// 初始刻度
    var flagLabel:UILabel = UILabel()// 滚动视图上的刻度显示
    var dashLineView:UIView = UIView()// 投资金额下面的虚线

override func viewDidLoad() {
        self.configureSubviews()
    }

private func configureSubviews() {
        let screenW = UIScreen.main.applicationFrame.size.width
        
        // 当前刻度
        self.flagLabel = UILabel.init(frame: CGRect.init(x: 0, y: 0, width: screenW, height: 40))
        flagLabel.textAlignment = NSTextAlignment.center
        flagLabel.textColor = UIColor.rd_mainRed()
        flagLabel.font = WZDUtils.expenseFont(with: 30)
        flagLabel.text = String(describing: indexFlagValue)
        self.sliderInvestView.addSubview(self.flagLabel)
        
        // 当前刻度下面虚线
        let lineWidth:CGFloat = WZDUtils.getWidthforString(String(describing: indexFlagValue), labelHeight: 40, stringFont: WZDUtils.expenseFont(with: 30))
        self.dashLineView = UIView.init(frame: CGRect.init(x: screenW/2 - lineWidth/2, y: 40, width: lineWidth, height: 1))
        self.sliderInvestView.addSubview(self.dashLineView)
        RMUtils.drawLineOfDash(byCAShapeLayer: self.dashLineView, lineLength: 3, lineSpacing: 1, lineColor: UIColor.rd_color(withHexCode: 0xCCCCCC, alpha: 1), lineDirection: true)
        
        // 刻度尺位置
        _scrollView = ZDScrollView.init(frame: CGRect.init(x: 0, y: 40, width: screenW, height: 100))
        _scrollView.delegate = self
        _scrollView.createScorll(withMinValue: 0,maxValue:Int32(maxValue), intervalValue: Int32(interval))
        self.sliderInvestView.addSubview(_scrollView)
        
        // 居中判别线段
        let lineLabelCenter: UILabel = UILabel.init(frame: CGRect.init(x: screenW/2, y: 50, width: 1, height: 40))
        lineLabelCenter.backgroundColor = UIColor.rd_mainRed()
        self.sliderInvestView.addSubview(lineLabelCenter)
        
        // 刻度尺底部线条
        let lineLabelBottom: UILabel = UILabel.init(frame: CGRect.init(x: 0, y: 90, width: screenW, height: 1))
        lineLabelBottom.backgroundColor = UIColor.rd_color(withHexCode: 0xCCCCCCC, alpha: 1)
        self.sliderInvestView.addSubview(lineLabelBottom)
        
    }


extension ItemDetailViewController: UIScrollViewDelegate {
func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let str:NSString = String.init(format: "%.2f", scrollView.contentOffset.x) as NSString
        var number:CGFloat = CGFloat(str.floatValue)
        let currentValue:Int = Int((number - indexFlagValue/interval*10)/2)
        let moneyFormatter: NumberFormatter = NumberFormatter.init()
        moneyFormatter.positiveFormat = "###,##0"
        let formatString = moneyFormatter.string(from: NSNumber.init(integerLiteral: Int(currentValue * 100) + Int(indexFlagValue)))
        
        self.flagLabel.text = formatString
        let lineWidth:CGFloat = WZDUtils.getWidthforString(formatString, labelHeight: 40, stringFont: WZDUtils.expenseFont(with: 30))
        self.dashLineView.frame = CGRect.init(x: UIScreen.main.applicationFrame.size.width/2 - lineWidth/2, y: 40, width: lineWidth, height: 1)
        self.dashLineView.layer.sublayers!.remove(at: 0)
        RMUtils.drawLineOfDash(byCAShapeLayer: self.dashLineView, lineLength: 3, lineSpacing: 1, lineColor: UIColor.rd_color(withHexCode: 0xCCCCCC, alpha: 1), lineDirection: true)
    }
}
这里的RMUtils是本身的工具类,这里单独把这个方法提供出来
+ (void)drawLineOfDashByCAShapeLayer:(UIView *)lineView lineLength:(int)lineLength lineSpacing:(int)lineSpacing lineColor:(UIColor *)lineColor lineDirection:(BOOL)isHorizonal {
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    [shapeLayer setBounds:lineView.bounds];
    [shapeLayer setPosition:CGPointMake(CGRectGetWidth(lineView.frame) / 2, CGRectGetHeight(lineView.frame))];
    [shapeLayer setFillColor:[UIColor clearColor].CGColor];
    //  设置虚线颜色为blackColor
    [shapeLayer setStrokeColor:lineColor.CGColor];
    //  设置虚线宽度
    [shapeLayer setLineWidth:CGRectGetHeight(lineView.frame)];
    [shapeLayer setLineJoin:kCALineJoinRound];
    //  设置线宽,线间距
    [shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:lineLength], [NSNumber numberWithInt:lineSpacing], nil]];
    //  设置路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, 0);
    CGPathAddLineToPoint(path, NULL,CGRectGetWidth(lineView.frame), 0);
    [shapeLayer setPath:path];
    CGPathRelease(path);
    //  把绘制好的虚线添加上来
    [lineView.layer addSublayer:shapeLayer];
}
/** 获取当前字符串所占宽度*/
+ (CGFloat)getWidthforString:(NSString *)string
                 labelHeight:(CGFloat)height
                  stringFont:(UIFont *)font{
    CGSize size = [string boundingRectWithSize:CGSizeMake(MAXFLOAT, height) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;
    return size.width;
}