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. composer 报 zlib_decode(): data error

    使用composer 时报  zlib_decode(): data error 错误. 解决办法:执行 composer self-update 即可

  2. Spring的javaMail邮件发送(带附件)

    项目中经常用到邮件功能,在这里简单的做一下笔记,方便日后温习. 首先需要在配置文件jdbc.properties添加: #------------ Mail ------------ mail.smt ...

  3. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. LeetCode----204. Count Primes(Java)

    package countPrimes204; /* * Description: * Count the number of prime numbers less than a non-negati ...

  5. RabbitMQ 基本概念介绍-----转载

    1. 介绍 RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue )协议的开源实现.用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面都非 ...

  6. webrtc - web 应用相关网站

    很有意思的网站 http://io13webrtc.appspot.com/#1 html5使用webrtc简介 http://www.html5rocks.com/en/tutorials/getu ...

  7. ado.net基础思想-abstract

    抽象类用做基类不能被实例化用途是派生出其他非抽象类 接口主要是实现多重继承 abstract 修饰符用于表示所修饰的类是不完整的,并且它只能用作基类.抽象类与非抽象类在以下方面是不同的:• 抽象类不能 ...

  8. java下载安装,环境变量,hello world

    1.Java下载安装 网址:http://java.sun.com/javase/downloads/index.jsp win7 64位选择jdk-8u11-windows-x64.exe. 2.环 ...

  9. ..在lua中运用

    ..连接两个字符串 th> a="hello" th> b="world" th> print(a..b) helloworld th> ...

  10. Intent官方教程(2)Intent的两种类型

    Intent Types There are two types of intents: Explicit intents specify the component to start by name ...