Android SeekBar 和 draw9patch 的使用

標籤：

今天要使用一個SeekBar控制項，其實我覺得Android預設樣式已經很不錯了，無奈設計不同意，而且SeekBar左右兩邊也有圖片，預設樣式和圖片也確實不協調，因此這裡使用圖片自訂SeekBar樣式，首先上代碼：

<SeekBar    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:max="100"    android:thumbOffset="10dp"    android:paddingLeft="10dp"    android:paddingRight="12dp"    android:thumb="@drawable/device_light_progress_thumb"    android:progressDrawable="@drawable/device_light_progressbar" />

android:thumb下的資源就是拖動條的滑塊圖片，android:thumbOffset的作用是防止thumb滑塊不能完全顯示，避免被遮擋；

android:progressDrawable下是自訂拖動條的樣式，這裡是兩張圖片，代碼如下：

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >        <item android:id="@android:id/background"             android:drawable="@drawable/progressbar_bg" />             <item android:id="@android:id/progress"            android:drawable="@drawable/progressbar_checked">            </item>  </layer-list>

其中@android:id/background是指滑塊未拖動時，拖動條顯示的圖片；

@android:id/progress是指拖動滑塊後，滑塊前面的部分所顯示的圖片；

SeekBar的使用大概就是這樣，以後再遇到這方面的問題我再來補充，下面說說draw9patch。

之所以說draw9patch是因為progressbar_bg和progressbar_checked兩張圖片在配置SeekBar時，出現圖片過長，右側沒有結束的圓弧，而直接是一個切面，因此可以看出圖片的長度沒有收縮，這裡首先想到的就是使用SDK-tools中的draw9patch工具將兩張圖片製作成9圖，主要過程包括兩個階段：

第一：

考慮到SeekBar的捲軸寬度較小，大約只有5-10個像素，因此第一次製作時只是將圖片在橫向上做成可以展開和收縮，縱向未作處理。將圖片匯入drawable-h，經調試發現，圖片在在上方顯示有黑邊，而且圖片右側還是切面，可以知道這張圖片仍然沒有收縮；

經過尋找資料，發現是自己沒有搞清楚draw9patch製作9圖的機制，即上下左右約束的都是什麼：

左邊 是垂直方向可以伸縮的地區
上邊 是水平方向可以伸縮的地區
右邊 是垂直方向的內容地區
下邊 是水平方向的內容地區

（下邊和右邊為圖片內容的padding值）

必須高和寬都加上約束，如果只有高或者只有寬添加約束，仍然會有黑線。

另外，設定黑線時，點不能斷，否則9patch圖片會按照普通圖片進行顯示。

在弄清楚原理之後，將縱向也進行draw9patch處理，經調試，SeekBar右側也顯示了圓弧，即圖片適配正常。

第二：

然後我將progressbar_checked這張圖片也進行了同樣的處理，即拖動滑塊後的圖片也製作成9圖。匯入應用後，SeekBar的顯示反而出錯了，即未拖動滑塊時，整個SeekBar已經顯示為progressbar_checked的圖片樣式，好像已經拖動到底一樣。這個錯誤讓我很不理解，progressbar_checked.png未改為9圖時能夠正常顯示，在改為9圖後反而出錯了，在將progressbar_checked替換為原來的圖片之後，應用又恢複正常。

這裡猜測是9圖自動適配控制項導致的，具體原因還需要繼續研究。

 

Android SeekBar 和 draw9patch 的使用