android UI 之 豎直的seekBar 及 自定義背景和thumb對齊問題(換一種方式思考)

這個問題真的很蛋疼,網上也都是一羣轉來轉去的文章。都是隻做了簡單的效果,根本不能用的,並且漏洞百出,一重新自定義就出問題。小糾結了一下。

需求前提:省事兒、快;

Ps: 我java功底不錯,但是做android才一個月,項目沒有時間給你去細細研究seekbar是 怎麼繪製的,或者徹底的重寫一個,而不是網上這一羣轉來轉去的旋轉90°。不過不 可否認的是我也是這麼用的,因爲我不想把邏輯全部放在代碼裏去實現,因爲另一種方 式會來得更快一些,下邊告訴你我是怎麼解決的。我只想快點結束這個東西,然後就可 以真正接觸到有含量的東西,而不是單單停留在android的應用層。這個搞定應該就可 以接觸到jni,核心邏輯用c實現了,期待,OK上解決方案。

先來一張我做的demo的效果圖:



pad test的程序,橫屏。

整個工代碼附在下邊的下載鏈接,急用的跳過直接下載去用。

代碼小做說明,直接網上downdemo,因爲這些沒有必要自己重寫,浪費青春,加入了自定義thumb起始位置調整的備用函數,在代碼中註釋掉了,默認是thumb在下邊,及起始位置0在下端,需要調爲上邊的直接改用註釋掉的函數trackTouchEvent,和onDraw中註釋掉的那兩行。

然後是問題核心,單純的色彩做背景和用默認的thumb顯示還算正常。不過一自定義,就會出現各種不愉快,被遮蓋了,對不齊了,什麼的。網上的各種調整方案針對橫着的seekbar是非常完美的,但是對於豎着的就糾結了。因爲只是進度條和thumb還有事件獲取的數據進行了轉換,原有的seekbar,就是從系統繼承而來的都是橫着的,比如背景了寬高的控制了,這些也有重寫的話,估計得畫上一段時間,我不想這麼做,估計你也不想吧。

網上找了一通,沒一個相關的解決文章。最後,我把爲題全推給了圖片。也就是說既然它對不齊,我就按照現在的對齊關係,對齊,而給用戶看的只是UIUI只是繪製出來得圖片。所以我不用代碼來解決,用圖片,我把seekbar的背景圖左右多加了5像素作用的透明像素(前提要是PNG圖片)。對齊時肯定是以圖片的邊界對齊的,加寬的像素填充了原來醜陋的對齊,OK,完美顯示,並且不會出現偏移什麼的,因爲你還可以用android:paddingTop="1dip" 來簡單的控制,可以應對簡單的需求調整。

其他問題:

Q: 有人會問了,“我做的背景怎麼是橫着出來的?”,因爲代碼讓它轉來90°呀~親。這時候,又來問題了,“那我怎麼讓它轉回來呢?”。

A:程序猿的小幼稚就是習慣了用代碼來解決問題,哪怕是南轅北轍,哪怕是繞了彎道,還是把自己的思想所在程序裏。我想說的是你找美工來,讓她幫你把圖片旋轉90°,在ps裏也就是一個快捷鍵,可能耗時不到1s,而你卻抱着程序在想以什麼樣的邏輯來不讓背景也跟着seekbar旋轉。半天過去了,你還是沒有解決。明白我的意思麼

============================================================

Q:這個給圖片加透明像素實現貌似很山寨,就是在那裏拼湊UI的嚒?!

A:呵呵,bingo。答對了,UI就是拼湊出來的。如果你還是想以代碼來完美實現,那麼你只會是兩種人之一:1、可能是個追求完美的Geek 2、不懂前端UI的真諦。界面本來就是騙人的,給人繪製一種操控的假象,完成一系列操控的動作,反饋程序的狀態。

============================================================

思路是這麼來的:

因爲網上有人在問,我的seekbar爲了不讓thumb到兩端時沒覆蓋掉一部分,設置了android:thumbOffset="0dip" ,但是爲什麼一設置就沒辦法把thumb拖動到兩端的最頂頭了呢?呵呵,起始是這樣的,設置這個屬性以後,兩端是以圖片的邊界進行對齊的,一般的thumb好多是圓形的或者其他,前臺做圖片時會留下透明像素,這樣,透明像素也佔用了對齊空間,給用戶的感覺是沒有到達頂端,世界已經對齊了。

既然單純的圖片的問題可以使你的程序不完美,那它也絕對可以使你的程序完美,看你怎麼思考了。

OK,到此爲止,繼續工作。


Demo下載。。。。

當前文章Doc下載。。轉載註明出處。。。。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章