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. sql字段类型介绍

    1 表格与储存引擎 表格(table)是数据库中用来储存纪录的基本单位,在建立一个新的数据库以后,你必须为这个数据库建立一些储存资料的表格: 每一个数据库都会使用一个资料夹,这些数据库资料夹用来储存所 ...

  2. Bootstrap之Carousel问题

    一.不能自动播放的解决办法 1.默认使用Bootstrap的Carousel组件,只需要加上 data-ride="carousel" 就可以实现自动播放了.无需使用初始化的js函 ...

  3. msyql数据库位置

    MySQL默认的数据文件存储目录为/var/lib/mysql.假如要把目录移到/home/data下需要进行下面几步: 1.home目录下建立data目录 cd /home mkdir data 2 ...

  4. ASP.NET MVC下的四种验证编程方式[续篇]【转】

    在<ASP.NET MVC下的四种验证编程方式> 一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式(“手工验证”.“标注ValidationAttribute特性”.“ ...

  5. linux中的优先搜索树的实现--prio_tree【转】

    转自:http://blog.csdn.net/bailyzheng/article/details/8041943 linux中的优先搜索树的实现--prio_tree prio_tree在linu ...

  6. FTP上传类

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;usi ...

  7. Android网络传输中必用的两个加密算法:MD5 和 RSA (附java完成测试代码)

    MD5和RSA是网络传输中最常用的两个算法,了解这两个算法原理后就能大致知道加密是怎么一回事了.但这两种算法使用环境有差异,刚好互补. 一.MD5算法 首先MD5是不可逆的,只能加密而不能解密.比如明 ...

  8. Shell 字符串比较

    转自网络 Shell字符串比较 收藏 Shell 中整数比较方法及字符串的比较方法,如等于,不等于,大于,大于等于,小于,等等. 二元比较操作符,比较变量或者比较数字.注意数字与字符串的区别. --- ...

  9. vs 常见问题汇总

    vs添加对dll的引用 我们在使用vs进行开发调试的时候经常会遇到一个问题,就是当我们的主工程引用到其他工程更新的dll(我们经常采用copy到工程目录的方法).亦或者当我们的多个工程引用到同一个dl ...

  10. js笔记---封装一般运动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...