一款开源Android在线音乐播放器

本文是wangchenyan同学的一个毕业设计作品,对于想研究音乐播放器的同学,特别是歌词自定义滚动部分。如下:支持自动滚动,超长歌词自动换行,自定义属性。

简介

波尼音乐是一款开源Android在线音乐播放器。

  • 播放本地音乐与在线音乐
  • 在线音乐排行榜,如热歌榜、新歌榜等
  • 高仿云音乐的黑胶唱片专辑封面
  • 歌词显示,自动搜索歌词
  • 夜间模式
  • 定时关闭

更新说明

  • 新增通知栏播放控制
  • 修复魅族手机扫描不到音乐的问题
  • 修复已知bug
  • 修复在线音乐无法加载的问题
  • 修复弱网时播放网络歌曲导致ANR的问题
  • 修复每日启动图片无法更新的问题
  • 下载在线歌曲可以显示专辑封面了
  • 修复已知bug
  • 支持 Android 6.0 运行时权限
  • 修复已知bug
  • First Release

公开API

  • 在线音乐:百度音乐
  • 天气数据:高德地图

开源技术

  • okhttp-utils
  • Glide

关键代码

黑胶唱片专辑封面绘制流程

@Override
protected void onDraw(Canvas canvas) {
    // 1.绘制顶部虚线
    mTopLine.setBounds(0, 0, getWidth(), mTopLineHeight);
    mTopLine.draw(canvas);
    // 2.绘制黑胶唱片外侧半透明边框
    mCoverBorder.setBounds(mDiscPoint.x - mCoverBorderWidth, mDiscPoint.y - mCoverBorderWidth,
            mDiscPoint.x + mDiscBitmap.getWidth() + mCoverBorderWidth, mDiscPoint.y +
                    mDiscBitmap.getHeight() + mCoverBorderWidth);
    mCoverBorder.draw(canvas);
    // 3.绘制黑胶
    // 设置旋转中心和旋转角度,setRotate和preTranslate顺序很重要
    mDiscMatrix.setRotate(mDiscRotation, mDiscCenterPoint.x, mDiscCenterPoint.y);
    // 设置图片起始坐标
    mDiscMatrix.preTranslate(mDiscPoint.x, mDiscPoint.y);
    canvas.drawBitmap(mDiscBitmap, mDiscMatrix, null);
    // 4.绘制封面
    mCoverMatrix.setRotate(mDiscRotation, mCoverCenterPoint.x, mCoverCenterPoint.y);
    mCoverMatrix.preTranslate(mCoverPoint.x, mCoverPoint.y);
    canvas.drawBitmap(mCoverBitmap, mCoverMatrix, null);
    // 5.绘制指针
    mNeedleMatrix.setRotate(mNeedleRotation, mNeedleCenterPoint.x, mNeedleCenterPoint.y);
    mNeedleMatrix.preTranslate(mNeedlePoint.x, mNeedlePoint.y);
    canvas.drawBitmap(mNeedleBitmap, mNeedleMatrix, null);
}

歌词绘制流程

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 中心Y坐标
    float centerY = getHeight() / 2 + mTextSize / 2 + mAnimOffset;
    // 无歌词文件
    if (!hasLrc()) {
        float centerX = (getWidth() - mCurrentPaint.measureText(label)) / 2;
        canvas.drawText(label, centerX, centerY, mCurrentPaint);
        return;
    }
    // 画当前行
    String currStr = mLrcTexts.get(mCurrentLine);
    float currX = (getWidth() - mCurrentPaint.measureText(currStr)) / 2;
    canvas.drawText(currStr, currX, centerY, mCurrentPaint);
    // 画当前行上面的
    for (int i = mCurrentLine - 1; i >= 0; i--) {
        String upStr = mLrcTexts.get(i);
        float upX = (getWidth() - mNormalPaint.measureText(upStr)) / 2;
        float upY = centerY - (mTextSize + mDividerHeight) * (mCurrentLine - i);
        // 超出屏幕停止绘制
        if (upY - mTextSize < 0) {
            break;
        }
        canvas.drawText(upStr, upX, upY, mNormalPaint);
    }
    // 画当前行下面的
    for (int i = mCurrentLine + 1; i < mLrcTimes.size(); i++) {
        String downStr = mLrcTexts.get(i);
        float downX = (getWidth() - mNormalPaint.measureText(downStr)) / 2;
        float downY = centerY + (mTextSize + mDividerHeight) * (i - mCurrentLine);
        // 超出屏幕停止绘制
        if (downY > getHeight()) {
            break;
        }
        canvas.drawText(downStr, downX, downY, mNormalPaint);
    }
}

截图

原文发布于微信公众号 - 何俊林(DriodDeveloper)

原文发表时间:2017-10-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏帮你学MatLab

如何记笔记

Step1. 在听讲过程中,在左侧内尽量多记有意义的论据、概念等讲课内容。 Step2. 下课以后,尽可能及早将这些论据、概念简明扼要地概括(简化)在右侧。 ...

2896
来自专栏菩提树下的杨过

Flex:地图缩放平移效果(简易版)

先看效果:(这个只是原型,简陋了点) 功能: 双击图片或拖动右侧的滑块可实现图片的放大,鼠标按下不放可平移图片。 应用场景:目前各地铁、医院、大型商场、机场均有...

1946
来自专栏V站

PHP神注释记录一番,一个程序员专用的注释包

1892
来自专栏欧阳大哥的轮子

iOS开源界面布局库终于破3000star

经过几年的打磨和多次的重构,我的iOS开源界面布局库MyLayout的star数量终于在2018年8月6号破3000了!有图为证:

2234
来自专栏企鹅号快讯

2017年最佳的20款css工具

1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

20610
来自专栏ytkah

3个技巧快速入门微信文章排版

  编辑微信图文消息,我们有时会先保存在word文档中,或者是企划部给你的新闻稿,里面有不同的字体(大小)、格式,如果我们直接Ctrl+c/v,那么领导很快会找...

3185
来自专栏iOS开发随笔

SCNView

在渲染过程过中,视图模型常常会出现锯齿边缘。这是因为模型是由多边形组成的,当显卡运算频率不够高,或者显存不够大的时候,“多边形”绘制速度比较慢,就会出现锯齿。此...

33613
来自专栏郭霖

Android状态栏微技巧,带你真正理解沉浸式模式

记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解。 其实说到沉浸式状态栏这个名字我...

32810
来自专栏IMWeb前端团队

关于移动端百分比宽度的几种实现

由于移动端的设备宽度各不相同,而且因为竖屏宽度都比较小,所以一般都采用满屏的方式布局,而不像PC端的使用固定宽度居中的技术布局。既然要使用满屏,那么各种百分比技...

2799
来自专栏编程

前端开发者常用的 9个JavaScript 图表库

英文: Anton Shaleynikov 译文:葡萄城控件 www.cnblogs.com/powertoolsteam/p/top-9-javascri...

3675

扫码关注云+社区

领取腾讯云代金券