版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_28585351/article/details/79194511
没什么好解释的了吧,直接代码了,有需要的可以参考,Demo地址下载的是纯oc写的,本博客内容为swift创建
下载地址:http://download.csdn.net/download/sinat_28585351/10229670
github:https://github.com/Raymon-lau/sliderProgressDemo.git
封装刻度尺
.h
@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;
}