没什么好解释的了吧,直接代码了,有须要的能够参考,Demo地址下载的是纯oc写的,本博客内容为swift建立git
下载地址:http://download.csdn.net/download/sinat_28585351/10229670github
封装刻度尺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; }