這些天一直在用網(wǎng)易云音樂，看到一個功能是可以更改音效，覺得這樣的控制器蠻有意思的，決定模仿一下。先看下原圖
這個圓形的slider就是要模仿的東西，這里不是通過繼承自UISlider來實(shí)現(xiàn)，而是通過繼承自UIControl，本來UISlider也是UIControl的子類，用法跟UISlider是一樣的，我下載了網(wǎng)易云音樂的安裝包，從里面找來了相應(yīng)的圖片，我在創(chuàng)建界面的時候大概邏輯這樣的：
1.最下面的中間圓形的類似按鈕
2.圓形那妞外面的加減號和一圈灰色弧形
3.中間紅色的指針
4.紅色進(jìn)度條
下面先看寫最后的效果圖
(我的控制器的角度范圍值是在0到PI中間，實(shí)在是找不準(zhǔn)他的最小值和最大值的多少度，索性就拿0到PI來做了 O(∩_∩)O哈哈~)
現(xiàn)在開始創(chuàng)建:
新建一個UIControl的子類NetEasySlider
//
// NetEasySlider.h
// CoreEffect
//
// Created by ZhengWei on 16/4/22.
// Copyright ? 2016年 Bourbon. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface NetEasySlider : UIControl
@property (nonatomic,assign) CGFloat currentValue;
@property (nonatomic,assign) CGFloat minValue;
@property (nonatomic,assign) CGFloat maxValue;
@end
在實(shí)現(xiàn)文件里面添加如下宏和變量以便后續(xù)使用
#define kTroughImage [UIImage imageNamed:@"cm2_efc_knob_trough_prs"] //中心圓形
#define kNeedleImage [UIImage imageNamed:@"cm2_efc_knob_needle_prs"] //中間指針
#define kScaleImage [UIImage imageNamed:@"cm2_efc_knob_scale"] //中間灰色進(jìn)度條
@interface NetEasySlider ()
{
UIImageView *needleView;
//半徑
CGFloat radius;
//當(dāng)前角度
CGFloat angle;
}
@end
由于我們的內(nèi)容有些是通過CGContextRef進(jìn)行繪制的，然而UIKit和CoreGraphics的坐標(biāo)是不同的(一個是左上角是原點(diǎn)一個是左下角是原點(diǎn))
所以在初始化得時候還要多進(jìn)行一步操作技師旋轉(zhuǎn)坐標(biāo)系
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
needleView = [[UIImageView alloc] initWithImage:kNeedleImage];
needleView.bounds = CGRectMake(0, 0, kNeedleImage.size.width, kNeedleImage.size.height);
needleView.center = self.center;
[self addSubview:needleView];
radius = kScaleImage.size.width/2-1;
angle = M_PI;
self.backgroundColor = [UIColor clearColor];
//旋轉(zhuǎn)坐標(biāo)系
self.transform = CGAffineTransformMakeScale(1, -1);
}
return self;
}
我這里的紅色進(jìn)度條是根據(jù)角度在drawRect:方法中實(shí)時繪制的,中間紅色指針則根據(jù)角度來實(shí)時進(jìn)行一個旋轉(zhuǎn),考慮到剩下兩個背景是圖片的關(guān)系，如果通過addSubView:的方式進(jìn)行添加的話,會覆蓋紅色進(jìn)度條.
所以這里也是將這兩個背景在drawRect:方法中繪制出來.
由于隨著多次調(diào)用drawRect:方法，圖片這樣的每次繪制會導(dǎo)致性能下降，這個我們下次再說.
那么在drawRect:方法中，我們需要做的事情有這么幾點(diǎn)
1.繪制背景圖片
2.畫進(jìn)度條
3.中間紅色指針根據(jù)當(dāng)前角度盡心旋轉(zhuǎn)
- (void)drawRect:(CGRect)rect {
// Drawing code
//繪制背景圖片
CGContextRef ref = UIGraphicsGetCurrentContext();
CGContextDrawImage(ref, CGRectMake((self.frame.size.width-kScaleImage.size.width)/2.0, (self.frame.size.height-kScaleImage.size.height)/2.0, kScaleImage.size.width, kScaleImage.size.height), kScaleImage.CGImage);
CGContextDrawImage(ref, CGRectMake((self.frame.size.width-kTroughImage.size.height)/2.0, (self.frame.size.height-kTroughImage.size.width)/2.0, kTroughImage.size.width, kTroughImage.size.height), kTroughImage.CGImage);
//繪制紅色進(jìn)度條
CGContextAddArc(ref, self.center.x, self.center.y, radius, M_PI, angle, YES);
CGContextSetLineWidth(ref, 2);
CGContextSetStrokeColorWithColor(ref, [UIColor redColor].CGColor);
CGContextStrokePath(ref);
//指針根據(jù)角度進(jìn)行旋轉(zhuǎn)
needleView.transform = CGAffineTransformMakeRotation(angle+M_PI_2);
}
我們這里采用了target-action方式，所以需要重寫UIControl的兩個方法
在第一個方法中我們進(jìn)行開始的操作
-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
return [super beginTrackingWithTouch:touch withEvent:event];
}
在第二個方法中，我們進(jìn)行當(dāng)前點(diǎn)的選擇，然后根據(jù)當(dāng)前的點(diǎn)來獲取旋轉(zhuǎn)角度，進(jìn)而再繪制進(jìn)度條和旋轉(zhuǎn)紅色指針,同時進(jìn)行方法的觸發(fā)，實(shí)現(xiàn)父視圖的方法調(diào)用
-(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
{
[super continueTrackingWithTouch:touch withEvent:event];
CGPoint point = [touch locationInView:self];
CGFloat change = atan2f(point.y-self.center.y, point.x-self.center.x);
if (change >= 0) {
angle = change;
self.currentValue = (self.maxValue - self.minValue)*(angle+M_PI)/M_PI;
//相應(yīng)valueChanged的事件
[self sendActionsForControlEvents:(UIControlEventValueChanged)];
}
[self setNeedsDisplay];
return YES;
}
這樣一個模仿網(wǎng)易云音樂的控件基本完成了
點(diǎn)我下載代碼
歡迎再評論中進(jìn)行批評指正，我會第一時間進(jìn)行回復(fù)的，謝謝
