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;
}

这样一个模仿网易云音乐的控件基本完成了
点我下载代码

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

iOS-仿网易云音乐控制器相关推荐

仿网易云音乐的滑动冲突处理效果
系列文章此功能属于仿网易云音乐App的一部分仿网易云音乐App(基础版) 实现网易云音乐的渐进式卡片切换 Flutter 自定义View--仿同花顺自选股列表 Flutter自定义View--仿高 ...
开源项目【LikeCloudMusic 云音】仿网易云音乐
LikeCloudMusic 云音仿网易云音乐v3.7.5,Material Design风格,基于MVP,使用RxBus作为事件总线通信库效果图目前功能扫描本地歌曲存储歌曲及歌单后台播放 ...
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
仿网易云音乐（微信小程序版）
项目部分截图(Gif) 前言前一阵子学习了微信小程序,为了巩固所学的知识和提高实战经验,决定自己手撸一款小程序.因为听歌一直在用网易云音乐,所以突发奇想就做一款仿网易云音乐的小程序吧!开发中遇到了很 ...
Flutter+FishRedux高仿网易云音乐
flutter_netease_cloud_music 采用FishRedux框架与开源网易云音乐api开发的高仿网易云音乐APP,技术栈主要是:Flutter+FishRedux,目前主要是偏重AP ...
还不会用Flutter？仿网易云音乐项目（已开源）
原作者:公众号boyan 前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越 ...
WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）
WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 原文:WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 1.简介上一篇咱们说到, ...
Flutter 仿网易云音乐App
图首页歌曲播放和卡片切换如正版一样,歌曲播放进度在播放/暂停按钮的边框显示(页面下方,由黑变红) 没登录的话,一般只能听12秒目前只做了模块('超带感的说唱精选')的点播功能, 其他地方可 ...
Android 仿网易云音乐App
因为工作实在是有点忙,所以还没完成成品,就先挂到GitHub上.日后慢慢更新啦. 项目地址 GitHub地址,希望大佬们点个star GitHub仿网易云音乐App 效果展示注:因为视频太模糊,每日 ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...

iOS-仿网易云音乐控制器

iOS-仿网易云音乐控制器相关推荐

最新文章

热门文章