Android 底部TabActivity（1）——FragmentActivity

標籤：tabactivity   fragmentactivity   

先看看：

第一篇Tab系列的文章首先實現這種風格的底部Tab：背景條顏色不變，我們是用了深灰的顏色，表徵圖會發生相應的變化，當選中某個標籤後該標籤的背板會由正常的顏色變為不正常，哈哈，是變為加深的灰色，更加凸顯當前頁的效果，所以我比較這種類型。在這裡文字的變化我沒處理，如果變色使用個selector就解決了，這裡不再贅述。

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

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

step1：首先是主介面MainTabActivity.java

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 * @versionV1.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對象，得到TabHostmTabHost = (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

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 {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_0, null);}}

step3：單選標籤的背板檔案selector_tab_background.xml

<?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"/></selector>

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

<?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" /></selector>

step5：主介面布局main_tab_layout.xml

<?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" />    <android.support.v4.app.FragmentTabHost        android:id="@android:id/tabhost"        android:layout_width="fill_parent"        android:layout_height="60dp"        android:background="@drawable/bg_bottombar" >        <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，上邊一個表徵圖，下邊一個文字

<?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" /></LinearLayout>

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

<?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"/>       </LinearLayout>

OK，到此為止，就完事兒了，以上步驟沒有按照開發順序來，但還是應該能看懂的吧，哈哈，看不懂請留言咪我。

Android 底部TabActivity（1）——FragmentActivity