【正文】
實作app首頁底部tab的切換已經見過四五種方式了,先來看運作的效果圖吧:

今天我們就用radiogroup的方法來實作以下。
【開發環境】
實體機版本:win 7旗艦版(64位)
ide版本:android studio 1.2 preview
工程檔案結構:(本文最後有源碼)
homeactivity.java:整個首頁的界面
四個fragment.java:對應的四個fragment界面
drawable檔案夾中是對應tab和文字切換的狀态
剩下的xml檔案就是對應的activity和fragment的布局檔案了。
一、布局檔案:
(1)activity_home.xml:homeactivity的布局檔案
代碼有點多,無非就是一個framelayout對應的是tab上方的顯示區域,然後四個radiobutton湊成一組單選按鈕放在radiogroup當中。
13行:能夠保證framelayout占據除開tab之後的剩下的全部空間。
76行:android:checked="true"這個很重要,稍後在java代碼中講。
radiobutton的屬性有點多,我們選取就選取第一個radiobutton進行講解,上面的第一個radiobutton的屬性摘抄如下:
上方代碼的解釋如下:
05行:weight為1,并且width為0dp,是保證四個tab能均分寬度。
06行:去掉radiobutton的樣式,也就是去掉那個小圖示,然後radiobutton就隻剩下文字了。
07行:讓裡面的内容居中
08行:顯示的文字
10行:設定這個tab的背景色和整個radiogroup的背景色一樣,不過,也可以删掉(删掉之後,在我的小米手機手機上的排版會有問題)
10行:在這個tab的上面添加對應的icon圖示(很重要,就是有了這個屬性,每個tab的圖示才會不一樣哦)。
(2)fragment_home.xml:fragment的布局檔案
其他三個fragment的布局檔案都一樣,代碼就不貼出來了,本文最後有源碼下載下傳。
(3)selector_tab_home.xml:tab被選中時對應icon的狀态
06行是預設的狀态。
其他三個tab的狀态都差不多,代碼就不貼出來了,本文最後有源碼下載下傳。
(4)selector_tab_text_color.xml:tab中的文字被選中時的狀态
06行:預設的文字顔色是黑色,被切換時是白色。
二、java代碼:
(1)homeactivity.java:
代碼注釋已經很詳細了。
尤其要注意的是第80行的注釋,為了讓app第一次啟動時,預設就讓第一個tab處于選中狀态,我們現在activity_home.xml(76行)中讓剩下的随便哪個radiobutton的屬性為checked,然後再重寫上方java代碼中的onstart方法(86行)。
(2)homefragment.java:
剩下三個fragment的java代碼是一樣的,就不貼出來了,詳見本文最後的源碼。