（因為簡書的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)谈截，在顏色模式一下筷屡，不管你進度調(diào)到多少，你選中的進度的顏色簸喂，會從所有顏色中毙死，按照當前百分比的形式，有整體漸變效果喻鳄。就是說扼倘，在顏色模式一下，你都能夠看到所有顏色的漸變渲染效果除呵。而在顏色二模式下唉锌，每個條目能改變的顏色已經(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偏竟。
接下來到了大家最關(guān)心的問題點煮落，如何改變選中的色彩和每個條目的高度和數(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"};
然后在初始化的時候费变，調(diào)用：
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)化的蒿往。希望大家支持。
最后情臭，轉(zhuǎn)載的話赌蔑，請標明出處。
----------古誠欺
