iOS仿刻度尺demo

效果：

1.png

.h文件

//
//  SXSRulerControl.h
//  SXSInvestScaleSlider
//
//  Created by Angela on 16/9/26.
//  Copyright © 2016年 iaiai. All rights reserved.
//

#import

IB_DESIGNABLE  //轻量级标尺控件

@interface SXSRulerControl : UIControl

@property (nonatomic, assign) IBInspectable CGFloat selectedValue;//选中的数值

@property (nonatomic, assign) IBInspectable NSInteger minValue;//最小值

@property (nonatomic, assign) IBInspectable NSInteger maxValue;//最大值

@property (nonatomic, assign) IBInspectable NSInteger valueStep;//步长

@property (nonatomic, assign) IBInspectable CGFloat minorScaleSpacing;//小刻度间距，默认值 `8.0`

@property (nonatomic, assign) IBInspectable CGFloat majorScaleLength;//主刻度长度，默认值 `40.0`

@property (nonatomic, assign) IBInspectable CGFloat middleScaleLength;//中间刻度长度，默认值 `25.0`

@property (nonatomic, assign) IBInspectable CGFloat minorScaleLength;//小刻度长度，默认值 `10.0`

@property (nonatomic, strong) IBInspectable UIColor *rulerBackgroundColor;//刻度尺背景颜色，默认为 `clearColor`

@property (nonatomic, strong) IBInspectable UIColor *scaleColor;//刻度颜色，默认为 `lightGrayColor`

@property (nonatomic, strong) IBInspectable UIColor *scaleFontColor;// 刻度字体颜色，默认为 `darkGrayColor`

@property (nonatomic, assign) IBInspectable CGFloat scaleFontSize;//刻度字体尺寸，默认为 `10.0`

@property (nonatomic, strong) IBInspectable UIColor *indicatorColor;//指示器颜色，默认 `redColor`

@property (nonatomic, assign) IBInspectable CGFloat indicatorLength;//指示器长度，默认值为 `40.0`

@property (nonatomic, assign) IBInspectable NSInteger midCount;//几个大格标记一个刻度

@property (nonatomic, assign) IBInspectable NSInteger smallCount;//一个大格里面几个小格

@end

.m文件

//
//  SXSRulerControl.m
//  SXSInvestScaleSlider
//
//  Created by iaiai on 16/9/26.
//  Copyright © 2016年 iaiai. All rights reserved.
//

#import "SXSRulerControl.h"
#define kMinorScaleDefaultSpacing   20    // 小刻度间距
#define kMajorScaleDefaultLength    25.0  //主刻度高度
#define kMiddleScaleDefaultLength   17.0  //中间刻度高度
#define kMinorScaleDefaultLength    10.0  //小刻度高度
#define kRulerDefaultBackgroundColor    ([UIColor clearColor])  //刻度尺背景颜色
#define kScaleDefaultColor          ([UIColor lightGrayColor])  //刻度颜色
#define kScaleDefaultFontColor      ([UIColor darkGrayColor])  //刻度字体颜色
#define kScaleDefaultFontSize       10.0  //刻度字体
#define kIndicatorDefaultColor      ([UIColor redColor])  //指示器默认颜色
#define kIndicatorDefaultLength     80  //指示器高度

@interface SXSRulerControl ()

@end

@implementation SXSRulerControl{
    UIScrollView *_scrollView;
    UIImageView *_rulerImageView;
    UIView *_indicatorView;
}

#pragma mark - 构造函数
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setupUI];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    if (_rulerImageView.image == nil) {
        [self reloadRuler];
    }
    CGSize size = self.bounds.size;
    _indicatorView.frame = CGRectMake(size.width * 0.5, size.height - self.indicatorLength, 1, self.indicatorLength);

    // 设置滚动视图内容间距
    CGSize textSize = [self maxValueTextSize];
    CGFloat offset = size.width * 0.5 - textSize.width;
    _scrollView.contentInset = UIEdgeInsetsMake(0, offset, 0, offset);
}

#pragma mark - 设置属性
//指示器颜色
- (void)setIndicatorColor:(UIColor *)indicatorColor {
    _indicatorView.backgroundColor = indicatorColor;
}

////选中的数值
- (void)setSelectedValue:(CGFloat)selectedValue {
    if (selectedValue <</span> _minValue || selectedValue > _maxValue || _valueStep <= 0) {
        return;
    }

    _selectedValue = selectedValue;
    [self sendActionsForControlEvents:UIControlEventValueChanged];
    CGFloat spacing = self.minorScaleSpacing;
    CGSize size = self.bounds.size;
    CGSize textSize = [self maxValueTextSize];
    CGFloat offset = 0;

    // 计算偏移量
    CGFloat steps = [self stepsWithValue:selectedValue];
    offset = size.width * 0.5 - textSize.width - steps * spacing;
    _scrollView.contentOffset = CGPointMake(-offset, 0);
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
    CGFloat spacing = self.minorScaleSpacing;
    CGSize size = self.bounds.size;
    CGSize textSize = [self maxValueTextSize];
    CGFloat offset = targetContentOffset->x + size.width * 0.5 - textSize.width;
    NSInteger steps = (NSInteger)(offset / spacing + 0.5);
    targetContentOffset->x = -(size.width * 0.5 - textSize.width - steps * spacing) - 0.5;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (!(scrollView.isDragging || scrollView.isTracking || scrollView.isDecelerating)) {
        return;
    }

    CGFloat spacing = self.minorScaleSpacing;
    CGSize size = self.bounds.size;
    CGSize textSize = [self maxValueTextSize];
    CGFloat offset = 0;
    offset = scrollView.contentOffset.x + size.width * 0.5 - textSize.width;
    NSInteger steps = (NSInteger)(offset / spacing + 0.5);
    CGFloat value = _minValue + steps * _valueStep/(_midCount*_smallCount);

    if (value != _selectedValue && (value >= _minValue && value <= _maxValue)) {
        _selectedValue = value;
        [self sendActionsForControlEvents:UIControlEventValueChanged];
    }
}

#pragma mark - 绘制标尺相关方法
- (void)reloadRuler {
    UIImage *image = [self rulerImage];
    if (image == nil) {
        return;
    }

    _rulerImageView.image = image;
    _rulerImageView.backgroundColor = self.rulerBackgroundColor;
    [_rulerImageView sizeToFit];
    _scrollView.contentSize = _rulerImageView.image.size;

    // 水平标尺靠下对齐
    CGRect rect = _rulerImageView.frame;
    rect.origin.y = _scrollView.bounds.size.height - _rulerImageView.image.size.height;
    _rulerImageView.frame = rect;

    // 更新初始值
    self.selectedValue = _selectedValue;
}

- (UIImage *)rulerImage {
    // 1. 常数计算
    CGFloat steps = [self stepsWithValue:_maxValue];
    if (steps == 0) {
        return nil;
    }

    // 水平方向绘制图像的大小
    CGSize textSize = [self maxValueTextSize];
    CGFloat height = _scrollView.frame.size.height-_rulerImageView.frame.size.height ;
    CGFloat startX = textSize.width;
    CGRect rect = CGRectMake(0, 0, steps * self.minorScaleSpacing + 2 * startX, height);

    // 2. 绘制图像
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);

    // 1> 绘制刻度线
    UIBezierPath *path = [UIBezierPath bezierPath];

    for (NSInteger i = _minValue; i <= _maxValue; i += _valueStep) {
        // 绘制主刻度下
        CGFloat x = (i - _minValue) / _valueStep * self.minorScaleSpacing * (_midCount*_smallCount) + startX;
        [path moveToPoint:CGPointMake(x, height)];
        [path addLineToPoint:CGPointMake(x, height - self.majorScaleLength)];

        // 绘制主刻度上
        [path moveToPoint:CGPointMake(x, 0)];
        [path addLineToPoint:CGPointMake(x,self.majorScaleLength)];
        if (i == _maxValue) {
            break;
        }

        // 绘制小刻度线下
        for (NSInteger j = 1; j < (_midCount*_smallCount); j++) {
            CGFloat scaleX = x + j * self.minorScaleSpacing;
            [path moveToPoint:CGPointMake(scaleX, height)];
            CGFloat scaleY = height - ((j%_smallCount == 0) ? self.middleScaleLength : self.minorScaleLength);
            [path addLineToPoint:CGPointMake(scaleX, scaleY)];
        }

        // 绘制小刻度线上
        for (NSInteger j = 1; j < (_midCount*_smallCount); j++) {
            CGFloat scaleX = x + j * self.minorScaleSpacing;

            //上
            [path moveToPoint:CGPointMake(scaleX, 0)];
            CGFloat scaleY =((j%_smallCount == 0) ? self.middleScaleLength : self.minorScaleLength);

            //上
            [path addLineToPoint:CGPointMake(scaleX, scaleY)];
        }
    }
    [self.scaleColor set];
    [path stroke];

    // 2> 绘制刻度值
    NSDictionary *strAttributes = [self scaleTextAttributes];
    for (NSInteger i = _minValue; i <= _maxValue; i += _valueStep) {
        NSString *str = @(i).description;

        CGRect strRect = [str boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT)
                                           options:NSStringDrawingUsesLineFragmentOrigin
                                        attributes:strAttributes
                                           context:nil];

        strRect.origin.x = (i - _minValue) / _valueStep * self.minorScaleSpacing *( _midCount*_smallCount) + startX - strRect.size.width * 0.5;
        strRect.origin.y =_scrollView.frame.size.height*0.5-textSize.height*0.5;
        [str drawInRect:strRect withAttributes:strAttributes];
    }

    UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return result;
}

- (CGFloat)stepsWithValue:(CGFloat)value {
    if (_minValue >= value || _valueStep <= 0) {
        return 0;
    }
    return (value - _minValue) / _valueStep *( _midCount*_smallCount);
}

- (CGSize)maxValueTextSize {
    NSString *scaleText = @(self.maxValue).description;
    CGSize size = [scaleText boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT)
                                          options:NSStringDrawingUsesLineFragmentOrigin
                                       attributes:[self scaleTextAttributes]
                                          context:nil].size;

    return CGSizeMake(floor(size.width), floor(size.height));
}

- (NSDictionary *)scaleTextAttributes {
    CGFloat fontSize = self.scaleFontSize * [UIScreen mainScreen].scale * 0.6;

    return @{NSForegroundColorAttributeName: self.scaleFontColor,
             NSFontAttributeName: [UIFont boldSystemFontOfSize:fontSize]};
}

#pragma mark - 设置界面
- (void)setupUI {
    // 滚动视图
    _scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
    _scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _scrollView.showsVerticalScrollIndicator = NO;
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.delegate = self;
    _scrollView.layer.borderWidth=0.5;
    _scrollView.layer.borderColor=kScaleDefaultColor.CGColor;
    [self addSubview:_scrollView];

    // 标尺图像
    _rulerImageView = [[UIImageView alloc] init];
    [_scrollView addSubview:_rulerImageView];
    // 指示器视图
    _indicatorView = [[UIView alloc] init];
    _indicatorView.backgroundColor = self.indicatorColor;
    [self addSubview:_indicatorView];
}

#pragma mark - 属性默认值
//小刻度间距
- (CGFloat)minorScaleSpacing {
    if (_minorScaleSpacing <= 0) {
        _minorScaleSpacing = kMinorScaleDefaultSpacing;
    }
    return _minorScaleSpacing;
}

//主刻度长度
- (CGFloat)majorScaleLength {
    if (_majorScaleLength <= 0) {
        _majorScaleLength = kMajorScaleDefaultLength;
    }
    return _majorScaleLength;
}

//中间刻度长度
- (CGFloat)middleScaleLength {
    if (_middleScaleLength <= 0) {
        _middleScaleLength = kMiddleScaleDefaultLength;
    }
    return _middleScaleLength;
}

//小刻度长度
- (CGFloat)minorScaleLength {
    if (_minorScaleLength <= 0) {
        _minorScaleLength = kMinorScaleDefaultLength;
    }
    return _minorScaleLength;
}

//刻度尺背景颜色
- (UIColor *)rulerBackgroundColor {
    if (_rulerBackgroundColor == nil) {
        _rulerBackgroundColor = kRulerDefaultBackgroundColor;
    }
    return _rulerBackgroundColor;
}

//刻度颜色
- (UIColor *)scaleColor {
    if (_scaleColor == nil) {
        _scaleColor = kScaleDefaultColor;
    }
    return _scaleColor;
}

// 刻度字体颜色
- (UIColor *)scaleFontColor {
    if (_scaleFontColor == nil) {
        _scaleFontColor = kScaleDefaultFontColor;
    }
    return _scaleFontColor;
}

//刻度字体尺寸
- (CGFloat)scaleFontSize {
    if (_scaleFontSize <= 0) {
        _scaleFontSize = kScaleDefaultFontSize;
    }
    return _scaleFontSize;
}

//指示器颜色
- (UIColor *)indicatorColor {
    if (_indicatorView.backgroundColor == nil) {
        _indicatorView.backgroundColor = kIndicatorDefaultColor;
    }
    return _indicatorView.backgroundColor;
}

//指示器长度
- (CGFloat)indicatorLength {
    if (_indicatorLength <= 0) {
        _indicatorLength = kIndicatorDefaultLength;
    }
    return _indicatorLength;
}
@end

在控制器中使用：

 //
//  SXSRulerControlVC.m
//  SXSInvestScaleSlider
//
//  Created by Angela on 16/9/26.
//  Copyright © 2016年 iaiai. All rights reserved.
//3.8M
#import "SXSRulerControlVC.h"
#import "SXSRulerControl.h"

@interface SXSRulerControlVC ()<</span>UITextFieldDelegate>

@property (nonatomic, strong) UITextField *textfield;
@property (nonatomic, strong) SXSRulerControl *ruler;

@end

@implementation SXSRulerControlVC

- (void)viewDidLoad {
    [super viewDidLoad];
    _textfield=[[UITextField alloc]initWithFrame:CGRectMake(80, 100, 100, 40)];
    _textfield.backgroundColor=[UIColor lightGrayColor];
    _textfield.textAlignment=NSTextAlignmentCenter;
    _textfield.delegate=self;

    [self.view addSubview:_textfield];
    _ruler = [[SXSRulerControl alloc] initWithFrame:CGRectMake(20, 0,[UIScreen mainScreen].bounds.size.width-40, 80)];
    _ruler.center = self.view.center;
    [self.view addSubview:_ruler];
    _ruler.backgroundColor = [UIColor colorWithWhite:0.93 alpha:1];
    _ruler.midCount=2;//几个大格标记一个刻度
    _ruler.smallCount=5;//一个大格几个小格
    _ruler.minValue = 0;// 最小值
    _ruler.maxValue = 3000;// 最大值
    _ruler.valueStep = 400;// 两个标记刻度之间相差大小

    //每个小格格大值计算为：ruler.valueStep÷(ruler.midCount*ruler.smallCount)
    _ruler.selectedValue = 1000;// 设置默认值
    [_ruler addTarget:self action:@selector(selectedValueChanged:) forControlEvents:UIControlEventValueChanged]; // 添加监听方法
}

- (void)selectedValueChanged:(SXSRulerControl *)ruler {
    _textfield.text = [NSString stringWithFormat:@"%.f", ruler.selectedValue];
}

-(void)textFieldDidEndEditing:(UITextField *)textField{
    _ruler.selectedValue=textField.text.integerValue;
}

-(void)textFieldDidBeginEditing:(UITextField *)textField{
    _ruler.selectedValue=textField.text.integerValue;
}
@end