Android 开发之网易云音乐(或QQ音乐)的播放界面转盘和自定义SeekBar的实现
这个东西我在eoeAndroid上首发的,但没有详细的实现说明:http://www.eoeandroid.com/thread-317901-1-1.html
在csdn上进行详细的说明吧。(同时上两个社区,这真是个坏毛病,以后专注csdn好了)。
1.用过网易云音乐客户端应该都懂得它那个播放界面,是蛮炫的。先看我实现的效果图吧:
自定义SeekBar这里少了点东西,进度条应该有两种颜色表示进度,一种是当前播放进度,一种是下载进度。我只实现了第一个,第二个要实现的话还需要重载SeekBar。
2. 转盘实现过程:
(1).反编译网易云音乐apk,把它的图拿过来(这里主要是进度条和那个转盘以及把手(neddle意思好像更明确些));
(2).转盘的绘制,需要具备的2D绘图基础知识:
SurfaceView的使用;
canvas.save()和cavas.restore();的使用;
Matrix的使用;
如果您已经能够熟练的使用这些东西,那实现起来完全无障碍;当然如果不熟,也可以看下我的源码,哈哈。
(3)把柄是不动的,把图画上去即可;
中间的十字叉需要自己绘制的,创建一张位图,然后往这张位图上画一个正的十字叉;
假设转盘转一圈需要十秒,SurfaceView的刷新间隔是10ms,那么每绘制一次,旋转的角度增加为360 / (10000 / 10);超过360则重置为0;
把这个增量post给旋转矩阵,然后用这个旋转矩阵绘制出当前帧的位图;
(4)绘图函数:
- private void doDraw(Canvas c) {
- // 去锯齿
- c.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
- | Paint.FILTER_BITMAP_FLAG));
- int cx = mWidth / 2;
- int cy = mHeight / 2;
- drawBmp(c, discBgBmp, cx, cy, null);
- if(mDiscMatrix == null){
- mDiscMatrix = new Matrix();
- mDiscMatrix.setTranslate(mWidth / 2 - discBmp.getWidth() / 2f,
- mHeight / 2 - discBmp.getHeight() / 2f);
- }
- if(mLcMatrix == null){
- mLcMatrix = new Matrix();
- mLcMatrix.setTranslate(mWidth / 2 - (discBmp.getWidth() - 60) / 2f,
- mHeight / 2 - (discBmp.getHeight() - 60) / 2f);
- }
- if (mIsPlay) {
- if (mRotates >= 360) {
- mRotates = 0;
- mDiscMatrix.reset();
- mLcMatrix.reset();
- mDiscMatrix.setTranslate(mWidth / 2 - discBmp.getWidth() / 2f,
- mHeight / 2 - discBmp.getHeight() / 2f);
- mLcMatrix.setTranslate(mWidth / 2 - (discBmp.getWidth() - 60) / 2f,
- mHeight / 2 - (discBmp.getHeight() - 60) / 2f);
- }
- mDiscMatrix.postRotate(everyRotate, cx, cy);
- mLcMatrix.postRotate(everyRotate, cx, cy);
- mRotates += everyRotate;
- }
- if(mLcBmp == null){
- int w = discBmp.getWidth() - 60;
- int h = discBmp.getHeight() - 60;
- mLcBmp = Bitmap.createBitmap(w, h, Config.ARGB_4444);
- Canvas c2 = new Canvas(mLcBmp);
- Paint p = new Paint();
- c2.drawColor(Color.TRANSPARENT, Mode.CLEAR);
- p.setColor(Color.LTGRAY);
- p.setStyle(Style.FILL);
- c2.drawCircle(w / 2, h / 2, Math.min(w, h) / 2, p);
- p.setColor(Color.DKGRAY);
- p.setStrokeWidth(10f);
- c2.drawLine(0, h / 2, w, h / 2, p);
- c2.drawLine(w / 2, 0, w / 2, h, p);
- }
- c.drawBitmap(mLcBmp, mLcMatrix, null);
- c.drawBitmap(discBmp, mDiscMatrix, null);
- int left = mWidth / 2 - needleBmp.getWidth();
- int top = 30;
- c.drawBitmap(needleBmp, left, top, null);
- }
3. 自定义SeekBar实现
这个东西应该除了入门者之外都已经掌握,这里也再啰嗦下,
来源于Android 源码的中SeekBar的style, 根据它的源码,将seekBar的style更改如下:
SeekBar 的Style:
- <style name="SeekBar" parent="@android:style/Widget">
- <item name="android:indeterminateOnly">false</item>
- <item name="android:progressDrawable">@drawable/bg_seekbar</item>
- <item name="android:indeterminateDrawable">@drawable/bg_seekbar</item>
- <item name="android:minHeight">50dip</item>
- <item name="android:maxHeight">50dip</item>
- <item name="android:thumb">@drawable/bg_play_pause</item>
- <item name="android:thumbOffset">0dip</item>
- <item name="android:focusable">true</item>
- </style>
bg_seekbar的定义也是根据源码改的,为了显示正常,做了一点点裁切:
- <?xml version="1.0" encoding="utf-8"?>
- <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:id="@android:id/background">
- <nine-patch android:src="@drawable/play_ctrl_barbg"/>
- </item>
- <item android:id="@android:id/secondaryProgress">
- <clip>
- <scale android:drawable="@drawable/play_ctrl_readybar" android:scaleWidth="80%" />
- </clip>
- </item>
- <item android:id="@android:id/progress">
- <clip>
- <scale android:drawable="@drawable/play_ctrl_currbar" android:scaleWidth="80%" />
- </clip>
- </item>
其中标示的图像资源在源码中都可以找到。
layout中SeekBar引用这个style即可。
4. 源码下载地址:http://download.csdn.net/detail/lqh810/6721349
Android 开发之网易云音乐(或QQ音乐)的播放界面转盘和自定义SeekBar的实现的更多相关文章
- iOS 开发仿网易云音乐歌词海报
使用网易云音乐也是一个巧合,我之前一直使用QQ音乐听歌,前几天下 app 手机内存告急.于是就把QQ音乐给卸载掉了,正好晚上朋友圈里有一个朋友用网易云音乐分享了一首歌曲,于是我也就尝试下载了网易云音乐 ...
- 基于Taro与Typescript开发的网易云音乐小程序
基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...
- 基于Taro与typescript开发的网易云音乐小程序(持续更新)
基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...
- 3.Android高仿网易云音乐-首页复杂发现界面布局和功能/RecyclerView复杂布局
0.效果图 效果图依次为发现界面顶部,包含首页轮播图,水平滚动的按钮,推荐歌单:然后是发现界面推荐单曲,点击单曲就是直接进入播放界面:最后是全局播放控制条上点击播放列表按钮显示的播放列表弹窗. 1.整 ...
- Android开发学习之路--MediaPlayer之简单音乐播放器初体验
很多时候我们都会用手机来播放音乐,播放视频,那么具体地要怎么实现呢,其实主要是MediaPlayer类来完成的.下面通过简单的例子来实现一首歌曲的播放吧.新建工程MediaPlayerStudy,这里 ...
- Ubuntu16.04 下的网易云出现网络异常、无法播放,界面无响应问题的统一解决
能够在Linux系统下体验到原生界面的网易云音乐是件不错的事情,但是它总是经常性的出现网络异常,界面无响应的问题 为了听歌的体验,进行深入探究: 首先通过终端启用网易云音乐:sudo netease- ...
- MellPlayer, 基于网易云歌单的命令行播放器
MellPlayer 前言 我写代码时非常喜欢听音乐,最近在网易云歌单中听到了许多入耳惊艳的歌,觉得非常不错.但是歌单的随机播放以及快速切换是个软肋,于是开发了MellPlayer,可以按照分类随机听 ...
- 【Android开发日记】之入门篇(十四)——Button控件+自定义Button控件
好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...
- Android高仿网易云音乐-启动界面实现和动态权限处理
效果 实现分析 基本上没有什么难点,就是布局,然后显示用户协议对话框,动态处理权限,判断是否显示引导界面,是否显示广告界面等. 布局 <?xml version="1.0" ...
随机推荐
- Android数据的四种存储方式SharedPreferences、SQLite、Content Provider和File (二) —— SQLite
SQLite是一种转为嵌入式设备设计的轻型数据库,其只有五种数据类型,分别是: NULL: 空值 INTEGER: 整数 REAL: 浮点数 TEXT: 字符串 BLOB: 大数据 在SQLite中, ...
- objective-c 中随机数的用法 (3种:arc4random() 、random()、CCRANDOM_0_1() )
1.随机数的使用 1).arc4random() 比较精确不需要生成随即种子 使用方法 : 通过arc4random() 获取0到x-1之间的整数的代码如下: int value = arc ...
- org.apache.tomcat.util.bcel.classfile.ClassFormatException: null is not a Java .class file
org.apache.tomcat.util.bcel.classfile.ClassFormatException: null is not a Java .class file 在$TOMCA ...
- c++ primer plus 习题答案(4)
p333.3 #include<iostream> #include<cstdlib> #include<cstring> #include<string&g ...
- mysql查询数据库中包含某字段(列名)的所有表
SELECT TABLE_NAME '表名',TABLE_SCHEMA '数据库名',ORDINAL_POSITION '顺序',COLUMN_NAME '字段',DATA_TYPE '类型' ,CH ...
- 高质量程序设计指南C/C++语言——C++/C程序设计入门(4)
*switch结构的break语句只是一个“jmp”指令,其作用就是跳到switch结构的结尾处 *标准C++/C语言提供3种循环:do/while.while和for,它们都在条件表达式为TRUE( ...
- IO调度算法研究1
linux kernel 2.6之后提供了四种IO调度算法,每种调度算法都有其不同的特点和应用场景,系统使用者可以通过系统提供的接口,选择使用哪种IO调度算法,以及调整IO调度算法的参数,以达到最优的 ...
- Android 百度地图开发问题----解决地图有时候加载不出来问题
相信很多人在开发百度地图的时候会出现百度地图有时候会加载不出来,只显示网格图. 这个问题究其原因就是申请百度key的时候填写的SHA1也就是指纹证书有问题.估计很多开发者都是照着百度开放平台上介绍的流 ...
- HDU 1090 A+B for Input-Output Practice (II)
#include <cstdio> int main() { int n,a,b; scanf("%d",&n); ; i<=n; i++) { scan ...
- powershell 生成随机用户信息
#生成随机用户信息,包括姓名.QQ.邮箱,手机号 $nameArr=@('一','丁','三','专','世','业','丝','中','丰','临','丹','丽','举','乃','义', '乐' ...