畫外音————好久沒上來發文章了,這幾個月一直忙着一些跟編程不沾邊的事,拖了好久,現在還在持續中,順利的話7月份應該能解放了。。今天偶爾上來寫一段番外篇性質的心得發現。
之前搞的Android項目,作為底部導航工具欄,一直用的是普通的ImageButton,搭配幾張漂亮的圖片,寫寫監聽器就完事,效果看下面的圖,雖然簡單,但是有一個不太好的缺點,那就是導航到新的頁面的時候,都要手動處理這個按鈕的點擊狀態(讓它高亮底圖)和其它按鈕的點擊狀態(讓之前的退出高亮),這個處理過程既繁瑣又容易遺漏出錯等等等等..

受同事啟發,使用RadioGroup和RadioButton就能自動化的解決上面的問題,因為本質上一個RadioGroup內只允許一個RadioButton處於選擇狀態之下(高亮),點擊了同一組的其它RadioButton,之前的RadioButton就會自動被處理掉,而且當前RadioButton選擇狀態會自動保留,根本不需要再像之前的ImageButton那樣一個個寫處理代碼,既美觀又環保。
想法很不錯,動手開干,但是又發現了一個新問題:RadioButton的樣式在不同的系統版本表現不一樣!下面拿這個超萌的豬頭來說明情況。
素材圖片:
RadioButton布局腳本:
<RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:button="@null" android:drawablePadding="-20dp" android:drawableTop="@drawable/cat" />
其中 android:button="@null" 這句很重要,用來消除掉RadioButton標配的圓圈單選按鈕!
而 android:drawablePadding="-20dp" 是用來去掉標配分給RadioButton文本的空位,當圖片素材畫在了drawableTop上面時,對應的文本會出現在下方,如果不需要填入文本,就用這行代碼去掉空位;如果選擇畫在drawableLeft的話,就不需要這一行。
具體來說分兩種情況,一種是API17(4.2.2)中的表現:

另外一種是API14(4.0)以及它之下的各版本(如API8)中的表現:

上面API14和API8的效果是一樣的,跟API17對比很明顯,就是圖片的左邊多了一個空位!!這個位置無論怎么調padding、margin之類的參數都無法完全消除掉,很惡心。
至於API17-API14之間到底是哪個系統版本成了分水嶺,這個就不得而知了,筆主這邊編譯環境沒有安裝更多的版本了,也懶得去研究。
上面這個問題找了好久都沒找到原因,甚至於筆主都漫無目的的百度搜索有木有針對不同系統版本使用不同布局文件的方法了...
理所當然的一個但是,筆主本着不依不饒的頑強精神再次檢查RadioButton布局屬性參數,幸運女神終於降臨了,筆主發現一個隱藏已久的陷阱:background!! 這個屬性在API17的時候是空的,但是 在API14以下竟然默認配置成了 @android:drawable/btn_radio_label_background !!!既然發現了問題,筆主就二話不說直接填上偉大的 @null ,F5刷新一下屏幕..果不其然,一切又回歸自然了!

(左右那倆二貨沒有弄background,所以還是那副鳥樣)
處理后的RadioButton布局代碼是:
<RadioButton android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:background="@null" android:button="@null" android:drawablePadding="-20dp" android:drawableTop="@drawable/cat" />
RadioGroup開始的整體代碼是:(上面的RadioButton參數被我放到了style文件里面)
<RadioGroup android:id="@+id/radioGroup1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="50dp" android:orientation="horizontal" > <RadioButton style="@style/radioBut" /> <RadioButton style="@style/radioBut" /> <RadioButton style="@style/radioBut" /> </RadioGroup>
開頭所說的選擇的時候高亮狀態,需要設置相應的selector處理圖片素材,這里就不詳細說明了。
至此,RadioButton已經能夠透明的代替ImageButton了,向下兼容至API8,並帶入自動標記高亮單項選擇功能,做導航的話應該比單純的ImageButton更具優勢吧,呵呵。
ps. 因為需要動態增減RadioButton等原因,在代碼中設置新RadioButton對象的屬性可參考以下博文:
