Android 底部TabActivity——FragmentActivity

先看看效果圖：

看一下整個Project的結構，如下：

下面逐一介紹一下實現過程，具體實現還是看註釋吧，代碼也不是很多，就不囉嗦了。

step1：首先是主界面MainTabActivity.java

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

package sun.geoffery.fragmenttabhost;   import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentTabHost; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TabHost.TabSpec; import android.widget.TextView;   /**  * All rights Reserved, Designed By GeofferySun  * @Title:  MainTabActivity.java  * @Package sun.geoffery.fragmenttabhost  * @Description:自定義TabHost  * @author: GeofferySun    * @date:   2014-9-28 下午11:33:15  * @version V1.0  */ public class MainTabActivity extends FragmentActivity {     // 定義FragmentTabHost對象     private FragmentTabHost mTabHost;       // 定義一個佈局     private LayoutInflater mInflater;       // 定義數組來存放Fragment界面     private Class mFragmentAry[] = { FragmentPage0.class, FragmentPage1.class,             FragmentPage2.class, FragmentPage3.class, FragmentPage4.class };       // 定義數組來存放按鈕圖片     private int mImgAry[] = { R.drawable.sl_rbtn_home,             R.drawable.sl_rbtn_atme,             R.drawable.sl_rbtn_msg,             R.drawable.sl_rbtn_square,             R.drawable.sl_rbtn_data };       // Tab選項卡的文字     private String mTxtAry[] = { "首頁", "@我", "消息", "廣場", "資料" };       public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main_tab_layout);           initView();     }       /**      * 初始化組件      */     private void initView() {         // 實例化佈局對象         mInflater = LayoutInflater.from(this);           // 實例化TabHost對象，得到TabHost         mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);         mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);           // 得到fragment的個數         int count = mFragmentAry.length;           for (int i = 0; i < count; i++) {             // 爲每一個Tab按鈕設置圖標、文字和內容             TabSpec tabSpec = mTabHost.newTabSpec(mTxtAry[i]).setIndicator(getTabItemView(i));             // 將Tab按鈕添加進Tab選項卡中             mTabHost.addTab(tabSpec, mFragmentAry[i], null);             // 設置Tab按鈕的背景             mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.selector_tab_background);         }     }       /**      * 給Tab按鈕設置圖標和文字      * @param index      * @return      */     private View getTabItemView(int index) {         View view = mInflater.inflate(R.layout.tab_item_view, null);           ImageView imageView = (ImageView) view.findViewById(R.id.imageview);         imageView.setImageResource(mImgAry[index]);           TextView textView = (TextView) view.findViewById(R.id.textview);         textView.setText(mTxtAry[index]);           return view;     } }

step2：每一個標籤頁對應的頁面FragmentPage0.java

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

package sun.geoffery.fragmenttabhost;   import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;   public class FragmentPage0 extends Fragment {       @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState) {         return inflater.inflate(R.layout.fragment_0, null);     } }

step3：單選標籤的背板文件selector_tab_background.xml

?

1 2 3 4 5 6 7

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

step4：標籤的圖標sl_rbtn_atme.xml，有點擊效果就要這麼搞

?

1 2 3 4 5 6 7

<!--?xml version="1.0" encoding="utf-8"?--><!-- tab欄按鈕 --> <selector xmlns:android="http://schemas.android.com/apk/res/android">       <item android:drawable="@drawable/sl_rbtn_atme_on" android:state_selected="true">     <item android:drawable="@drawable/sl_rbtn_atme_off">   </item></item></selector>

step5：主界面佈局main_tab_layout.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!--?xml version="1.0" encoding="utf-8"?--> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">       <frameLayout         android:id="@+id/realtabcontent"         android:layout_width="fill_parent"         android:layout_height="0dip"         android:layout_weight="1" />                   <frameLayout             android:id="@android:id/tabcontent"             android:layout_width="0dp"             android:layout_height="0dp"             android:layout_weight="0" />     </android.support.v4.app.fragmenttabhost>   </linearlayout>

step6：每個標籤的佈局tab_item_view.xml，上邊一個圖標，下邊一個文字

?

1 2 3 4 5 6 7 8

<!--?xml version="1.0" encoding="utf-8"?--> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical">       <imageview android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentdescription="@string/app_name" android:focusable="false" android:padding="3dp" android:src="@drawable/ic_launcher">       <textview android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingbottom="7dp" android:paddingtop="3dp" android:text="@string/app_name" android:textcolor="#ffffff" android:textsize="12sp">   </textview></imageview></linearlayout>

step7：每個標籤對應頁面的佈局fragment_0.xml

?

1 2 3 4 5 6

<!--?xml version="1.0" encoding="utf-8"?-->  <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent">              <textview android:layout_width="match_parent" android:layout_height="match_parent" android:text="首頁" android:gravity="center" android:textsize="20sp" android:textcolor="#403901">         </textview></linearlayout>

下面就是自己練習嘍！