（因為簡書的markdown編輯器無法設置圖片大小，而我的文章又是從我的博客上粘貼來的，所以圖片大小無法控制，如果影響的可以去我博客看）
前段時間，公司項目有個UI需求，要做一個這么的東西 ：
一個仿音樂頻率譜線進度條(這是什么鬼?)，那好，就先將這個控件命名為：音樂頻譜進度條：）
廢話不多說，先來看一下效果圖：
附上在GitHub上的地址，點擊地址，就可以獲取源碼了。
如何依賴？
首先在項目的build.gradle中加入：
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
然后添加依賴：
dependencies {
implementation'com.github.CaesarShao:MusicSpectrumBar:1.1.2'
}
接著，在布局文件中，這么使用：
<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar
android:layout_width="300dp"
android:layout_height="100dp"
/>
直接跑應用，就可以了，效果圖：
音樂頻譜進度條顯示的模式：
1.居中模式（默認）
效果如上圖，這個是默認的顯示模式，在布局文件中，加入屬性：
<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar
android:layout_marginTop="50dp"
android:layout_width="300dp"
android:layout_height="100dp"
app:poseType="1"
/>
2.底部對齊模式（poseType = 1）
..
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%時，每個條目上要顯示的顏色值，（后面再講如何自定義替換顏色顯示和條目數(shù)），可以發(fā)現(xiàn)，顏色的總體是從藍色漸變成粉色，下面是2種模式下，進度到30%左右和70%左右的圖：
上面的是默認顏色模式，下面的是，固定變色模式，可以發(fā)現(xiàn)，在顏色模式一下，不管你進度調到多少，你選中的進度的顏色，會從所有顏色中，按照當前百分比的形式，有整體漸變效果。就是說，在顏色模式一下，你都能夠看到所有顏色的漸變渲染效果。而在顏色二模式下，每個條目能改變的顏色已經(jīng)是決定好了的，例如最中間的條目，它只有2種顏色選擇，選取時的“6d56e3”顏色值和未選取時的白色，無漸變效果。
好,接下來再來介紹其他的屬性。
進度條未選中部分的顏色：
<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar
..
app:unSelectColor="@color/colorAccent" />
進度條每個條目的圓角弧度：
<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar
..
app:roundAngle="5"/>
默認是5弧度，數(shù)值越大，越圓滑，對了，在api21以下的android版本,無法顯示圓弧，只能顯示矩形。
條目之間的距離：
<com.caesar.musicspectrumbarlibrary.MusicSpectrumBar
..
app:gapMultiple="2"/>
就是每跟條目之間的距離，默認是每個條目的2倍，可以設置小數(shù)值。
可以看到，每個條目中間的空格的距離，是每個條目寬度的2倍，如果這個值越大，中間的距離就按照倍數(shù)增加。
顯示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。
接下來到了大家最關心的問題點，如何改變選中的色彩和每個條目的高度和數(shù)目。這個目前只能在代碼中設置。
這邊先看這張圖，其實進度條在拖滿的時候，每個顏色的值都已經(jīng)是決定好的了，比如第一個顏色是“0050dc”,第二個是“0650dc”，最后一個顏色是“ee5deb”,然后總共有29個條目。
接下來，我們再看目前有幾種高度的條目，是有7種高度的條目，我將第一個條目的高度設置為1倍數(shù)，那第二個條目是第一個的3倍，第三個條目是5倍數(shù)，第四個是4倍數(shù)，最后一個條目是1倍數(shù)。這樣，就可以得出2個數(shù)組。
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);
就可以了，這邊要注意，高度數(shù)組和顏色數(shù)組的個數(shù)要相同。
然后，在poseType = 3的情況下，這個高度數(shù)組的表達意思又有點不同了，在poseType = 3時，每個條目的高度都是相同的，所以這個高度的數(shù)組，就表達為每個條目，距離頂部的倍數(shù)值。所以上面的高度數(shù)組，在poseType = 3的情況下，顯示的效果是：
可以看出，這張圖的每個條目，距離頂部有7種距離，我將控件的高度減去條目的高度，然后除以6，就可以得出1倍的距離，在高度數(shù)組中，如果當前值為1，那這個條目，距離頂部為0，如果當前值為2，那距離頂部高度為（2-1）倍數(shù)。所以距離頂部的高度就是（高度值-1）倍數(shù)得出來的值。
好，至此，音樂頻譜進度條的屬性介紹完了，如果大家在看了源碼之后，還有什么不了解的，可以給我留言，項目我會慢慢地更新優(yōu)化的。希望大家支持。
最后，轉載的話，請標明出處。
----------古誠欺
