iOS-仿网易云音乐控制器

这些天一直在用网易云音乐，看到一个功能是可以更改音效，觉得这样的控制器蛮有意思的，决定模仿一下。先看下原图



这个圆形的slider就是要模仿的东西，这里不是通过继承自UISlider来实现，而是通过继承自UIControl，本来UISlider也是UIControl的子类，用法跟UISlider是一样的，我下载了网易云音乐的安装包，从里面找来了相应的图片，我在创建界面的时候大概逻辑这样的：

1.最下面的中间圆形的类似按钮

2.圆形那妞外面的加减号和一圈灰色弧形

3.中间红色的指针

4.红色进度条

下面先看写最后的效果图



(我的控制器的角度范围值是在0到PI中间，实在是找不准他的最小值和最大值的多少度，索性就拿0到PI来做了 O(∩_∩)O哈哈~)

现在开始创建:

新建一个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

在实现文件里面添加如下宏和变量以便后续使用

#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"]         //中间灰色进度条

@interface NetEasySlider ()
{
UIImageView *needleView;
//半径
CGFloat radius;
//当前角度
CGFloat angle;
}
@end

由于我们的内容有些是通过CGContextRef进行绘制的，然而UIKit和CoreGraphics的坐标是不同的(一个是左上角是原点一个是左下角是原点)

所以在初始化得时候还要多进行一步操作技师旋转坐标系

-(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];
//旋转坐标系
self.transform = CGAffineTransformMakeScale(1, -1);
}
return self;
}

我这里的红色进度条是根据角度在drawRect:方法中实时绘制的,中间红色指针则根据角度来实时进行一个旋转,考虑到剩下两个背景是图片的关系，如果通过addSubView:的方式进行添加的话,会覆盖红色进度条.

所以这里也是将这两个背景在drawRect:方法中绘制出来.

由于随着多次调用drawRect:方法，图片这样的每次绘制会导致性能下降，这个我们下次再说.

那么在drawRect:方法中，我们需要做的事情有这么几点

1.绘制背景图片

2.画进度条

3.中间红色指针根据当前角度尽心旋转

- (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);
//绘制红色进度条
CGContextAddArc(ref, self.center.x, self.center.y, radius, M_PI, angle, YES);
CGContextSetLineWidth(ref, 2);
CGContextSetStrokeColorWithColor(ref, [UIColor redColor].CGColor);
CGContextStrokePath(ref);
//指针根据角度进行旋转
needleView.transform = CGAffineTransformMakeRotation(angle+M_PI_2);

}

我们这里采用了target-action方式，所以需要重写UIControl的两个方法

在第一个方法中我们进行开始的操作

-(BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event{
return [super beginTrackingWithTouch:touch withEvent:event];
}

在第二个方法中，我们进行当前点的选择，然后根据当前的点来获取旋转角度，进而再绘制进度条和旋转红色指针,同时进行方法的触发，实现父视图的方法调用

-(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;
//相应valueChanged的事件
[self sendActionsForControlEvents:(UIControlEventValueChanged)];
}
[self setNeedsDisplay];
return YES;
}

这样一个模仿网易云音乐的控件基本完成了

点我下载代码

欢迎再评论中进行批评指正，我会第一时间进行回复的，谢谢