QQ 音乐看似简单,但自己手动实现起来,才发现没有那么简单,有好多细节,需要注意。

github : https://github.com/keenleung/QQMusic-OC

一、业务逻辑

首先, 先来瞧瞧 这个小项目的业务逻辑吧:

1)整体:

2)QQ音乐列表:

 

3)QQ播放详情:

做一些模块功能的时候,一定要想到分工处理,不同的操作,应该由不同的功能所抽取出来的业务类或工具类来管理。

二、细节分析

1)主界面cell的动画实现

滚动列表的时候,cell显示的方式都是从底部或顶部钻出来

平成,我们都会在cell创建的时候,直接给cell添xiao'g加动画效果,但是,作为程序员,我们更应该要有面向对象的思想,把动画效果的实现,直接封装到cell里面,然后通过创建的cell对象来调用方法,从而决定使不使用动画效果

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{

    QQMusicListCell *musicCell = (QQMusicListCell *)cell;

    // 执行动画
// 判断 tableView 的滑动方向
CGPoint translation = [tableView.panGestureRecognizer translationInView:tableView.superview];
if (translation.y>) { // 接近第一行 [musicCell beginAnimation:RE_Rotation]; }else if(translation.y<){ // 远离第一行 [musicCell beginAnimation:Rotation];
}
}

2)歌词进度的设计

基本思想:歌词面板,其实是一个tableView,每一句歌词,其实是一个cell,然后cell里面就只显示歌词,即是一个Label。要显示颜色,需要重绘。

获取到当前播放的歌词,每一句歌词都有一个播放时间长度,根据歌曲播放时间,计算出当前歌词的进度,然后拿到这个比例,重新绘制歌词颜色的范围。

需要注意的是:

i)cell的重用

需要一个额外的属性,来记录当前歌词所在的行,然后,同行的,绘制颜色;不同行的则不绘制颜色。但这还不够,因为到下一行的时候,已经绘制的行的颜色并没有消除。这就需要做下面的一步:

ii)当前播放歌词之外的歌词,都不需要绘制颜色

需要在歌词滚动到中间之前,刷新可以看见的行,这样,不是现在播放行的歌词的颜色就会被清除掉了

3)开启后台播放

支持后台服务

实现代码:

// 1.获取音频会话
AVAudioSession *session = [AVAudioSession sharedInstance]; // 2.设置音频会话类别
NSError *error = nil;
[session setCategory:AVAudioSessionCategoryPlayback error:&error];
if (error) {
NSLog(@"%@", error);
return nil;
} // 3.激活会话
[session setActive:YES error:&error];
if (error) {
NSLog(@"%@", error);
return nil;
}

QQ音乐项目(OC版) - 实现细节的更多相关文章

  1. 使用网易云音乐,丢掉QQ音乐吧

    我是一个听音乐的重度用户,基本上每天大约有三分之一的时间里我在使用网易云音乐去听音乐.包括工作写代码的时候,跑步的时候,去上班的途中我都去听.首先需要声明的是,在这里我不是故意的去抹黑其他的音乐产品, ...

  2. 前端练手小项目——网页版qq音乐仿写

    qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...

  3. 腾讯QQ音乐网页版 音频初始化模块解压混淆js源码

    define("js/view/playerBar.js",function(t,e,o){ var i = t("js/lib/zepto.js"), a = ...

  4. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  5. QQ音乐官方定制精简版v1.3.6 纯净无广告

    介绍 近期腾讯推出了QQ音乐简洁版.顾名思义,QQ音乐简洁版就是官方精简后的版本,没有内置任何广告.完全专注于听歌,不存在直播.K歌.短视频等花里胡哨的内容.如有违规,请删删.. 结尾附pc端 QQ音 ...

  6. Android自定义View,高仿QQ音乐歌词滚动控件!

    最近在以QQ音乐为样板做一个手机音乐播放器,源码下篇博文放出.今天我想聊的是这个QQ音乐播放器中歌词显示控件的问题,和小伙伴们一起来探讨怎么实现这个歌词滚动的效果.OK,废话不多说,先来看看效果图: ...

  7. Android 9 适配怎么做? “QQ音乐”优化实录

    WeTest 导读 2018年8月7日,Google对外发布最新 Android 9.0 正式版系统,并宣布系统版本Android P 被正式命名为代号“Pie”,最新系统已经正式推送包括谷歌Pixe ...

  8. QQ音乐:React v16 新特性实践

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由QQ音乐技术团队发表于云+社区专栏 自从去年9月份 React 团队发布了 v16.0 版本开始,到18年3月刚发布的 v16.3 版 ...

  9. 高仿手机QQ音乐之——Android带进度条的开关

    最新版的手机QQ音乐体验确实不错,发现首页播放按钮能够显示歌曲当前进度条.认为挺有新意.效果例如以下: 自己琢磨了下.能够用自己定义组件来实现,试着做了一下.效果例如以下: 整理了下思路.大概设计流程 ...

随机推荐

  1. Linux系统中“动态库”和“静态库”那点事儿【转】

    转自:http://blog.chinaunix.net/uid-23069658-id-3142046.html 今天我们主要来说说Linux系统下基于动态库(.so)和静态(.a)的程序那些猫腻. ...

  2. python sklearn环境配置

    os:win10   python2.7 主要参照 1.现下载pip.exe,因为很多安装文件都变成whl格式了,这里要注意下载对应python版本的,要用管理员权限,可以参照https://pypi ...

  3. iOS开发- 蓝牙后台接收数据(BLE4.0)

    最近在做一个蓝牙相关的项目, 需要在应用进入后台, 或者手机属于锁屏状态的情况下, 仍然保持蓝牙连接, 并且能正常接收数据. 本来以后会很麻烦, 但是学习了下..发现就2步而已.简单的不能再简单了. ...

  4. HDU 2444:The Accomodation of Students(二分图判定+匹配)

    http://acm.hdu.edu.cn/showproblem.php?pid=2444 题意:给出边,判断这个是否是一个二分图,并求最大匹配. 思路:先染色法求出是否是一个二分图,然后再匈牙利求 ...

  5. JAVA 值传递

    Java里方法的参数传递方式只有一种:值传递 值传递:当系统开始执行方法时,系统为形参执行初始化,就是把实参变量的值赋给方法的形参变量,方法的操作的并不是实际的实参变量 引用型变量:系统复制的是变量, ...

  6. 阿里云实战之二(mysql+phpmyadmin)

    前文安装好了空间的基本环境,本来运行在线代码编辑器不需要php+mysql的环境,不过我还是想在后续建设里面引入会员制度,这样php+mysql的环境就必不可少了. 一.Linux下MySQL忘记ro ...

  7. javascript学习(三) 内置对象

    一:事件(Event)对象 在触发dom事件的时候都会产生一个event对象 type   获取事件类型 target  获取事件目标 stopPropagation()  阻止事件冒泡 preven ...

  8. Java基础知识之集合(容器)简介

    JAVA的集合体系,主要由Collection接口,Map接口,Iterator接口和操作集合的工具类Collections组成.其中的Iterator只是一个迭代器,真正的容器则派生自Collect ...

  9. linux里用cmake安装的软件要怎么卸载?

    找到make install之后产生的这个文件install_manifest.txt 这里在build文件里面有一个 install_manifest.txt,在里面有安装的所有东西的路径,删除它们 ...

  10. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...