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. 好用的 diskpart 命令,操作磁盘分区,并创建 EFI 引导分区

    进入 win8 pe, 或在安装 win8 选择安装磁盘分区时按 shift+F10,都是可能用到 diskpart 去操作的时候. 进入cmd后, diskpart 进入 list disk---- ...

  2. 请求在Struts2框架中的处理步骤

    上图来源于Struts2官方站点,是Struts 2 的整体结构. 一个请求在Struts2框架中的处理大概分为以下几个步骤 1 客户端初始化一个指向Servlet容器(例如Tomcat)的请求 2 ...

  3. win7 dos命令窗口内容显示不全解决办法--将命令执行结果输出到一个文件中

    执行命令:命令 >>某某路径\文件全名

  4. 使用 ViewPager 和 RadioGroup 封装的一个导航控件

    import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.dra ...

  5. Java 门面模式 浅析

    Java中的门面模式,一般来说他的用途是隐藏一些不希望用户看到的东西,比如方法,变量,并且这些变量是不能够设置成私有的,因为在系统内部有些地方需要调用.在Tomcat的HttpServletReque ...

  6. 给NIOS II CPU添加一颗澎湃的心——sysclk的使用

    给NIOS II CPU添加一颗澎湃的心——系统时钟的使用 本实验介绍如何在Qsys中添加一个定时器作为NIOS II的心跳定时器,并在NIOS II中软件编程使用该定时器. 将上一个实验watchd ...

  7. mysql高可用之PXC(Percona XtraDB Cluster)

    简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1).同步复制,事务要么在所有节点提交或不提交 ...

  8. SQLite详解

    一.新建SQLite操作类(继承SQLiteOpenHelper) public class SQLiteTest extends SQLiteOpenHelper { final static St ...

  9. 【转】MYSQL入门学习之三:全文本搜索

    转载地址:http://www.2cto.com/database/201212/173873.html 一.理解全文本搜索   www.2cto.com   1.MyISAM支持全文本搜索,而Inn ...

  10. windows下TCP服务器和客户端的实现

      服务器   1.初始化 WSAStartup(..)   2.创建Socket s = Socket ( .. )   3.绑定端口 ret = bind ( ... )   4.监听 ret = ...