前段时间，公司项目有个UI需求，要做一个这么的东西：

一个仿音乐频率谱线进度条(这是什么鬼?)，那好，就先将这个控件命名为：音乐频谱进度条：）

废话不多说，先来看一下效果图：

附上在GitHub上的地址，点击地址，就可以获取源码了。

如何依赖？

首先在项目的build.gradle中加入：

allprojects {repositories {...maven { url 'https://jitpack.io' }}}

然后添加依赖：

dependencies {implementation 'com.github.CaesarShao:MusicSpectrumBar:1.1.2'}

接着，在布局文件中，这么使用：

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBarandroid:layout_width="300dp"android:layout_height="100dp"/>

直接跑应用，就可以了，效果图：

音乐频谱进度条显示的模式：

1.居中模式（默认）

效果如上图，这个是默认的显示模式，在布局文件中，加入属性：

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBarandroid:layout_marginTop="50dp"android:layout_width="300dp"android:layout_height="100dp"app:poseType="1"/>

2.底部对齐模式（poseType = 1）

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:poseType="1"/>

3.顶部对齐模式(poseType = 2)

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:poseType="2"/>

4.等长条显示模式（poseType = 3）

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:poseType="3"/>

颜色渲染的模式：

1.颜色渐变模式（默认）

2.固定变色模式

使用方式：

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:colorGradient="0" /><com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:colorGradient="1" />

默认的colorGradient属性为0，当设置为1时，渲染模式就变成了固定变色模式。

解释下这2种颜色渲染模式：

这张图是当进度条拉到100%时，每个条目上要显示的颜色值，（后面再讲如何自定义替换颜色显示和条目数），可以发现，颜色的总体是从蓝色渐变成粉色，下面是2种模式下，进度到30%左右和70%左右的图：

上面的是默认颜色模式，下面的是，固定变色模式，可以发现，在颜色模式一下，不管你进度调到多少，你选中的进度的颜色，会从所有颜色中，按照当前百分比的形式，有整体渐变效果。就是说，在颜色模式一下，你都能够看到所有颜色的渐变渲染效果。而在颜色二模式下，每个条目能改变的颜色已经是决定好了的，例如最中间的条目，它只有2种颜色选择，选取时的“6d56e3”颜色值和未选取时的白色，无渐变效果。

好,接下来再来介绍其他的属性。

进度条未选中部分的颜色：

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:unSelectColor="@color/colorAccent" />

进度条每个条目的圆角弧度：

 <com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:roundAngle="5"/>

默认是5弧度，数值越大，越圆滑，对了，在api21以下的android版本，无法显示圆弧，只能显示矩形。

条目之间的距离：

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:gapMultiple="2"/>

就是每跟条目之间的距离，默认是每个条目的2倍，可以设置小数值。

可以看到，每个条目中间的空格的距离，是每个条目宽度的2倍，如果这个值越大，中间的距离就按照倍数增加。

显示3模式的条目高度：

在app:poseType = 3的模式下，再设置app:SpectMultiple这个属性。

<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar..app:poseType="3"app:SpectMultiple="0.5" />

这个值是设置，在3模式下，每个条目的高度占总体控件高度的百分比高度，默认取0.5，也就是一半的高度，取值范围是0~1。这个属性，必须只有在poseType为3情况下，才有用。

这张图上面的控件是设置为0.7，下面的控件是设置为0.5。

接下来到了大家最关心的问题点，如何改变选中的色彩和每个条目的高度和数目。这个目前只能在代码中设置。

这边先看这张图，其实进度条在拖满的时候，每个颜色的值都已经是决定好的了，比如第一个颜色是“0050dc”,第二个是“0650dc”，最后一个颜色是“ee5deb”,然后总共有29个条目。

接下来，我们再看目前有几种高度的条目，是有7种高度的条目，我将第一个条目的高度设置为1倍数，那第二个条目是第一个的3倍，第三个条目是5倍数，第四个是4倍数，最后一个条目是1倍数。这样，就可以得出2个数组。

private int[] highD = {1, 3, 5, 4, 6, 2, 7, 5, 6, 3, 2, 1, 2, 1, 2, 6, 5, 4, 2, 7, 5, 2, 3, 1, 2, 1, 3, 2, 1};
private String[] ColorStr = {"#0050dc", "#0650dc", "#0b51dd", "#1151dd", "#1951de", "#2052de", "#2852df", "#3153df", "#3a53e0", "#4454e0", "#4e54e1", "#5855e2", "#6255e2", "#6d56e3", "#7756e3", "#8257e4", "#8c58e5", "#9758e5", "#a159e6", "#ab59e7", "#b45ae7", "#be5ae8", "#c65be8", "#ce5be9", "#d65ce9", "#dd5cea", "#e45cea", "#e95deb", "#ee5deb"};

然后在初始化的时候，调用：

MusicSpectrumBar mb = findViewById(R.id.mb_type);
mb.setDatas(highD, ColorStr);

就可以了，这边要注意，高度数组和颜色数组的个数要相同。

然后，在poseType = 3的情况下，这个高度数组的表达意思又有点不同了，在poseType = 3时，每个条目的高度都是相同的，所以这个高度的数组，就表达为每个条目，距离顶部的倍数值。所以上面的高度数组，在poseType = 3的情况下，显示的效果是：

可以看出，这张图的每个条目，距离顶部有7种距离，我将控件的高度减去条目的高度，然后除以6，就可以得出1倍的距离，在高度数组中，如果当前值为1，那这个条目，距离顶部为0，如果当前值为2，那距离顶部高度为（2-1）*倍数。所以距离顶部的高度就是（高度值-1）*倍数得出来的值。

好，至此，音乐频谱进度条的属性介绍完了，如果大家在看了源码之后，还有什么不了解的，可以给我留言，项目我会慢慢地更新优化的。希望大家支持。

最后，转载的话，请标明出处。

----------古诚欺

Android自定义View,Android炫酷的音乐频谱进度条,变化自如的音乐进度条相关推荐

android炫酷的自定义view,Android自定义View实现炫酷进度条
本文实例为大家分享了Android实现炫酷进度条的具体代码,供大家参考,具体内容如下下面我们来实现如下效果: 第一步:创建attrs文件夹,自定义属性: 第二步:自定义View: /** * Cre ...
Android自定义View实现炫酷的加速球效果
效果展示: 原理解析: 首先构建一个圆形路径(中心点为控件中心),然后利用canvas.clipPath方法将画布裁剪为圆形. 利用贝赛尔曲线构造一条如上图所示的波浪线,波浪线分为三段(一起一伏为一段 ...
自定义 View 之炫酷的成绩展示界面
作者 | Android_gen 地址 | http://www.jianshu.com/p/03022c1306fb 声明 | 本文是 Android_gen 原创,已获授权发布,未经原作者允许请勿 ...
android自定义Drawable实现炫酷UI-锦鲤游泳效果
一.实现效果: 当点击屏幕的时候,屏幕中的锦鲤会身体摆动并且游到屏幕点击处,如下图: 效果分析: 1.小鱼的身体各个部件都是简单的半透明几何图形. 2.各个部件都可以活动. 3.从头到尾方向的部件摆动 ...
android 动态进度条,Android实用view系列------炫酷的进度条
不知不觉距离上次写文章已经过去大半个月了,原本计划每周写一篇的想法在坚持几周之后最终还是被生活中各种各样的琐事打乱,无奈中夹杂这对自己的一点失望. 心痛.jpg 当初的愿望实现了吗事到如今只好祭奠吗 ...
android 图片处理过程中添加进度条,『Android自定义View实战』给我一个图标，还你一个水波纹进度球...
前言我们都知道,平时表现进度的方式有千千万万种(没有UI想不到的,只有你做不到的= =.),其中有一种就是水波纹进度球的形式,网上很多种实现都是直接采用纯色填充的方式,即水波纹都是纯颜色填充,效果看 ...
精通Android自定义View(十九)自定义圆形炫彩加载转圈效果
1 效果 2 源码 public class JiondongView extends View {private Paint mBackgroundPaint;private float mScal ...
Android自定义View分享——仿网易云音乐留声机效果
写在前面这是笔者自学习自定义View以来,分享的第五篇效果,之前分享过一篇动态时钟效果的自定义View,如果有兴趣的可以看看: Android自定义View分享--一个时钟之前的博客笔者一般都会说 ...
Android 自定义View合集
http://blog.csdn.net/u011507982/article/details/51199644 自定义控件学习 https://github.com/GcsSloop/Androi ...

Android自定义View,Android炫酷的音乐频谱进度条,变化自如的音乐进度条