隨著iOS技術(shù)的發(fā)展，UI設(shè)計也越來越復(fù)雜矮锈，儀表盤視圖出現(xiàn)的頻率也越來越高，通常用在速度顯示睁蕾、利率選擇等場景愕难。由于工作需要，也研究了一下惫霸。
先展示一下做好的效果圖：
首先感謝一下JXCircleSlider,在參考GitHub上的資源之后猫缭，選擇了這個開源項目，作為需求的雛形壹店。這個項目主要作用是猜丹，提供了紅色按鈕的拖動跟蹤效果，這是其他項目中所沒有的硅卢。本人的其他工作是射窒，增加一個結(jié)束跟蹤的代理響應(yīng)、繪制日期和利率将塑、動態(tài)計算利息脉顿、添加中央顯示、長按選擇本金点寥。
@interface JXCircleSlider : UIControl
@property (nonatomic,assign) int lineWidth;
@property (nonatomic,setter=changeAngle:) int angle;
@property (nonatomic, strong) NSArray *dateAngleArray;
@property (nonatomic, strong) NSArray *rateArray;
@property (nonatomic, strong) NSArray *dateArray;
@property (nonatomic, copy) NSString *currentRate;
@property (nonatomic, copy) NSString *currentSavings;
@property (nonatomic, copy) NSString *currentInterest;
- (void)reDrawRect;
@end
JXCircleSlider只是一個demo艾疟，除lineWidth和angle外，其他屬性都是需求需要而添加的。分別分別存儲日期數(shù)組蔽莱、利率數(shù)組弟疆、日期利率在圓上的角度數(shù)組、以及一些需要動態(tài)調(diào)整而增加的屬性：當(dāng)前利率盗冷、當(dāng)前本金怠苔、當(dāng)前利息。
@interface JXCircleSlider ()
@property (nonatomic, strong) UILabel *savingsLabel;
@property (nonatomic, strong) SavingsPickerView *savingsPickerView;
@property (nonatomic, strong) UITextField *textField;
@property (nonatomic, assign) NSTimeInterval beganTime;
@property (nonatomic, assign) NSTimeInterval endTime;
@property (nonatomic, assign) CGFloat unitIntrest0;
@property (nonatomic, assign) CGFloat unitIntrest1;
@property (nonatomic, assign) CGFloat unitIntrest2;
@property (nonatomic, assign) CGFloat unitIntrest3;
@property (nonatomic, assign) CGFloat unitIntrest4;
@end
說明：此處為類的私有屬性仪糖，因為有長按彈出本金選擇的需求添加了UILabel柑司、UIPickerView、和一個接收響應(yīng)者但并不展示的UITextField锅劝。設(shè)置開始和結(jié)束時間beganTime帜羊、endTime是為了區(qū)分用戶是滑動tableview還是滑動儀表盤視圖（做差是否>0.2s）。unitIntrest為優(yōu)化動態(tài)計算利息和設(shè)置的一組屬性鸠天。
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
//繪制背景圖片
[self drawImageWithCGContextRef:context];
//繪制日期利率
[self drawDateInterestWithCGContextRef:context];
//繪制浮動利息
[self drawInfoWithRect:rect];
//繪制拖動小塊
[self drawDotWithCGContextRef:context];
}
說明：類的主體內(nèi)容，沒有特別的內(nèi)容帐姻。使用UIImage稠集、NSString、UILabel等進(jìn)行渲染到圖形上下文或view即可饥瓷。這里只介紹一下拖動小塊：
- (void)drawDotWithCGContextRef:(CGContextRef)context {
CGPoint handleCenter = [self dotPointFromAngle:self.angle];
[[UIColor redColor] setStroke];
CGContextSetLineWidth(context, 5);
CGContextAddEllipseInRect(context, CGRectMake(handleCenter.x, handleCenter.y, 5, 5));
CGContextDrawPath(context, kCGPathStroke);
}
說明：畫一個半徑為5的點剥纷。以下所有的手勢都需要用這個點來展示效果。
-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
[super beginTrackingWithTouch:touch withEvent:event];
self.beganTime = touch.timestamp;
return YES;
}
-(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
[super continueTrackingWithTouch:touch withEvent:event];
//獲取觸摸點
CGPoint lastPoint = [touch locationInView:self];
//使用觸摸點來移動小塊
[self movehandle:lastPoint];
//發(fā)送值改變事件
[self sendActionsForControlEvents:UIControlEventValueChanged];
return YES;
}
- (void)endTrackingWithTouch:(nullable UITouch *)touch withEvent:(nullable UIEvent *)event {
[super endTrackingWithTouch:touch withEvent:event];
self.endTime = touch.timestamp;
if (self.endTime - self.beganTime < 0.2) return;
if (self.angle >= [self.dateAngleArray[0] intValue] && self.angle < [self.dateAngleArray[1] intValue]) {
self.angle = [self.dateAngleArray[1] intValue];
}else if (self.angle >= [self.dateAngleArray[1] intValue] && self.angle < [self.dateAngleArray[2] intValue]) {
self.angle = [self.dateAngleArray[2] intValue];
}else if (self.angle >= [self.dateAngleArray[2] intValue] && self.angle < [self.dateAngleArray[3] intValue]) {
self.angle = [self.dateAngleArray[3] intValue];
}else if (self.angle >= [self.dateAngleArray[3] intValue] || self.angle < [self.dateAngleArray[4] intValue]) {
self.angle = [self.dateAngleArray[4] intValue];
}else {
self.angle = [self.dateAngleArray[0] intValue];
}
//刷新當(dāng)前利息
[self updateCurrentInterest];
[UIView animateWithDuration:0.5f animations:^{
//重新繪制
[self setNeedsDisplay];
}];
}
說明:項目的核心思路：監(jiān)聽用戶在儀表盤上的拖動行為呢铆。根據(jù)前后兩個點計算偏移角度晦鞋，重置圓點的位置，同時刷新當(dāng)前利息的數(shù)值棺克。
下載地址InstrumentView悠垛、如果對你有用，歡迎點贊娜谊，謝謝确买！
