最近為公司開發移動app，看到app的主頁面就四個選項卡加對應的頁面，但是代碼寫復雜無比，很難維護，鑒于此想用最少的代碼實現其功能，廢話不多說，先上效果圖。

實現思路

從圖我們基本猜到基本思路如下

底部選項卡可以使用3個RadioButton組成，并綁定相關的監聽器以監聽tab切換。

選項卡的上面的部分為一個容器(FrameLayout)以存取3個fragment，可以在tab綁定的監聽器中去控制fragment的顯示。

---

布局文件

先看主頁面的布局文件R.layout.activity_main

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><RadioGroupandroid:id="@+id/ll_rbtn_contain"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:gravity="center"android:orientation="horizontal" ><RadioButtonandroid:id="@+id/rb_first"style="@style/tab_style"android:drawableTop="@drawable/tab_first_background"android:text="first"android:textColor="@color/radio_colors" /><RadioButtonandroid:id="@+id/rb_second"style="@style/tab_style"android:drawableTop="@drawable/tab_second_background"android:text="second"android:textColor="@color/radio_colors" /><RadioButtonandroid:id="@+id/rb_thrid"style="@style/tab_style"android:drawableTop="@drawable/tab_third_background"android:text="thrid"android:textColor="@color/radio_colors" /></RadioGroup><FrameLayoutandroid:id="@+id/fl_contain"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@id/ll_rbtn_contain"android:layout_alignParentTop="true" ></FrameLayout></RelativeLayout>

根視圖為相對布局以控制RadioGroup在底部，FrameLayout在RadioGroup的上面

---

設置選項卡Style

每個RadioButton都設置了統一的tab_style

<!-- 底部Tab按鈕樣式 --> <style name="tab_style"><item name="android:textSize">12sp</item><item name="android:gravity">center</item><item name="android:background">@drawable/home_btn_bg</item><item name="android:layout_width">fill_parent</item><item name="android:layout_height">wrap_content</item><item name="android:button">@null</item><item name="android:paddingTop">2dp</item><item name="android:singleLine">true</item><item name="android:layout_weight">1.0</item> </style>

---

設置選項卡icon的背景

每個radioButton都設置了android:drawableTop屬性，只要創建三個drawable文件即可 eg :tab_first_background.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/first_pressed" android:state_pressed="true"/><item android:drawable="@drawable/first_pressed" android:state_checked="true"/><item android:drawable="@drawable/first_normal"/> </selector>

---

設置選項卡title的背景

除了選顯卡對應的icon要改變外，其對應的title的字體顏色也要隨之改變。注意要在res下創建color文件夾并將顏色狀態配置文件放在此文件夾下。eg：radio_colors.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="true" android:color="@color/orange_color"/><item android:state_checked="true" android:color="@color/orange_color"/><item android:color="#aaaaaa" /> </selector>

---

代碼塊

package com.example.tabapp;import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.FrameLayout; import android.widget.RadioButton;public class MainActivity extends FragmentActivity implements OnCheckedChangeListener{//三個選項卡private RadioButton mRBtnFrist;private RadioButton mRBtnSecond;private RadioButton mRBtnThrid;//存放fragment對應的容器private FrameLayout mFragmentContain;private TabFragment mFirstFragment;private TabFragment mSecondFragment;private TabFragment mThirdFragment;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mFragmentContain = (FrameLayout)findViewById(R.id.fl_contain);mRBtnFrist = (RadioButton)findViewById(R.id.rb_first);mRBtnSecond = (RadioButton)findViewById(R.id.rb_second);mRBtnThrid = (RadioButton)findViewById(R.id.rb_thrid);mRBtnThrid.setOnCheckedChangeListener(this);mRBtnThrid.performClick();//此處設置默認第三個選項卡對應的fragment顯示mRBtnFrist.setOnCheckedChangeListener(this);mRBtnSecond.setOnCheckedChangeListener(this);}@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked) {//用戶當前瀏覽的選項卡int checkedWidgetId = buttonView.getId();mRBtnFrist.setChecked(checkedWidgetId == R.id.rb_first);mRBtnSecond.setChecked(checkedWidgetId == R.id.rb_second);mRBtnThrid.setChecked(checkedWidgetId == R.id.rb_thrid);showFragment(checkedWidgetId);}else {//此處記錄了用戶上次瀏覽的選項卡String unCheckFragmentTag = getTagById(buttonView.getId());TabFragment unCheckFragment = (TabFragment)getSupportFragmentManager().findFragmentByTag(unCheckFragmentTag);if(unCheckFragment != null){//隱藏上次顯示到fragment,確保fragment不會重疊getSupportFragmentManager().beginTransaction().hide(unCheckFragment).commit();}}}/*** 顯示對應的fragment* @param checkedRadioBtnId*/private void showFragment(int checkedRadioBtnId){String tag = getTagById(checkedRadioBtnId);TabFragment mainFragment = (TabFragment) getSupportFragmentManager().findFragmentByTag(tag);if(mainFragment == null){//如果沒有找到對應的fragment則生成一個新的fragment，并添加到容器中TabFragment newFragment = new TabFragment(tag);getSupportFragmentManager().beginTransaction().add(R.id.fl_contain, newFragment, tag).commit();}else {//如果找到了fragment則顯示它getSupportFragmentManager().beginTransaction().show(mainFragment).commit();}}/*** 為三個fragment分別取三個不同到tag名* @param widgetId* @return*/private String getTagById(int widgetId){if(widgetId == R.id.rb_first){return "first";}else if(widgetId == R.id.rb_second){return "second";}else {return "thrid";}} }

好了這樣我們就基本實現了選顯卡功能，代碼注釋寫的很詳細了，相信大家肯定明白，我就不加闡述了，good luck！

源碼下載

總結

以上是生活随笔為你收集整理的Android 使用RadioButton+Fragment构建Tab的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。