天天看點

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

【正文】

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

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

今天我們就用radiogroup的方法來實作以下。

【開發環境】

實體機版本:win 7旗艦版(64位)

ide版本:android studio 1.2 preview

工程檔案結構:(本文最後有源碼)

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

homeactivity.java:整個首頁的界面

四個fragment.java:對應的四個fragment界面

drawable檔案夾中是對應tab和文字切換的狀态

剩下的xml檔案就是對應的activity和fragment的布局檔案了。

一、布局檔案:

(1)activity_home.xml:homeactivity的布局檔案

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換
Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

代碼有點多,無非就是一個framelayout對應的是tab上方的顯示區域,然後四個radiobutton湊成一組單選按鈕放在radiogroup當中。

13行:能夠保證framelayout占據除開tab之後的剩下的全部空間。

76行:android:checked="true"這個很重要,稍後在java代碼中講。

radiobutton的屬性有點多,我們選取就選取第一個radiobutton進行講解,上面的第一個radiobutton的屬性摘抄如下:

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換
Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

上方代碼的解釋如下:

05行:weight為1,并且width為0dp,是保證四個tab能均分寬度。

06行:去掉radiobutton的樣式,也就是去掉那個小圖示,然後radiobutton就隻剩下文字了。

07行:讓裡面的内容居中

08行:顯示的文字

10行:設定這個tab的背景色和整個radiogroup的背景色一樣,不過,也可以删掉(删掉之後,在我的小米手機手機上的排版會有問題)

10行:在這個tab的上面添加對應的icon圖示(很重要,就是有了這個屬性,每個tab的圖示才會不一樣哦)。

(2)fragment_home.xml:fragment的布局檔案

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換
Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

其他三個fragment的布局檔案都一樣,代碼就不貼出來了,本文最後有源碼下載下傳。

(3)selector_tab_home.xml:tab被選中時對應icon的狀态

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換
Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

06行是預設的狀态。

其他三個tab的狀态都差不多,代碼就不貼出來了,本文最後有源碼下載下傳。

(4)selector_tab_text_color.xml:tab中的文字被選中時的狀态

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換
Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

06行:預設的文字顔色是黑色,被切換時是白色。

二、java代碼:

(1)homeactivity.java:

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換
Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

代碼注釋已經很詳細了。

尤其要注意的是第80行的注釋,為了讓app第一次啟動時,預設就讓第一個tab處于選中狀态,我們現在activity_home.xml(76行)中讓剩下的随便哪個radiobutton的屬性為checked,然後再重寫上方java代碼中的onstart方法(86行)。

(2)homefragment.java:

Android自定義控件----RadioGroup實作APP首頁底部Tab的切換
Android自定義控件----RadioGroup實作APP首頁底部Tab的切換

剩下三個fragment的java代碼是一樣的,就不貼出來了,詳見本文最後的源碼。

繼續閱讀