安卓開發 底部tab的實現

1.MainActivity代碼：

（也就是TabsFrame）

package com.example.frametabhost;

import com.example.function.WebGo;
import com.example.licaizhuanjia.MainActivity;
import com.example.licaizhuanjia.R;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class TabsFrame extends FragmentActivity {

     private FragmentTabHost fragmentTabHost;
     private String texts[] = { "開始", "好友", "群組", "更多" };
     private int p_w_picpathButton[] = { R.drawable.selector1,
             R.drawable.selector2,
             R.drawable.selector3,
             R.drawable.selector4};
     private Class fragmentArray[] = {Page1.class,
             Page2.class,
             Page3.class,
             Page4.class};  

     protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabsframe);
    
            // 實例化tabhost
            fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
            fragmentTabHost.setup(this, getSupportFragmentManager(),R.id.maincontent);
    
             for (int i = 0; i < texts.length; i++) {
                TabSpec spec=fragmentTabHost.newTabSpec(texts[i]).setIndicator(getView(i));
                fragmentTabHost.addTab(spec, fragmentArray[i], null);
                 
                //設置背景(必須在addTab之后，由于需要子節點（底部菜單按鈕）否則會出現空指針異常)
                fragmentTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.bgselector);
            //背景替換

}
      }
    private View getView(int i) {
         //取得布局實例
         View view=View.inflate(TabsFrame.this, R.layout.tabcontent, null);
         
         //取得布局對象
         ImageView p_w_picpathView=(ImageView) view.findViewById(R.id.p_w_picpath);
         TextView textView=(TextView) view.findViewById(R.id.text);
         
         //設置圖標
         p_w_picpathView.setImageResource(p_w_picpathButton[i]);
         //設置標題
         textView.setText(texts[i]);
         return view;
    }
    public boolean onKeyDown(int KeyCode,KeyEvent Event){

            if(KeyCode==KeyEvent.KEYCODE_BACK){
               Intent intent=new Intent(TabsFrame.this,MainActivity.class);
           startActivity(intent);
           finish();
            }
        return true;
    }
 
 }
2. 然后是4個Page，代碼都一樣

public class Page1 extends Fragment{
         @Override
         public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {
             return inflater.inflate(R.layout.page1, null);
         }
}

主要代碼就是這些

然后是xml布局文件

3.在tabsframe里

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical" >
 
      <!-- 存放主要頁面內容 -->
 
      <FrameLayout
         android:id="@+id/maincontent"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="1" >
    </FrameLayout>
     
     <!-- 底層菜單 -->
 
     <android.support.v4.app.FragmentTabHost
         android:id="@android:id/tabhost"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/tab_bg" >
 
         <FrameLayout
            android:id="@android:id/tabcontent"
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:layout_weight="0" >
         </FrameLayout>
    </android.support.v4.app.FragmentTabHost>
 </LinearLayout>

4.tabcontent.xml里是底部標簽欄的圖標

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:orientation="vertical" >
 
      <ImageView
          android:id="@+id/p_w_picpath"
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         />
     <TextView
         android:id="@+id/text"
         android:padding="2dp"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textColor="@android:color/white"
         />
 </LinearLayout>

5.在selector1，2,3,4里（寫在drawable文件夾里）

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

</selector>

6.在bgselector.xml里

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

</selector>

7.4個page的xml（4個都一樣的代碼）。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@drawable/tabframe1"
   >

      <TextView
          android:id="@+id/text"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_centerHorizontal="true"
          android:layout_marginBottom="22dp"
          android:text="正在開發中。。。。。"
          android:textSize="20dp" />
 
 </RelativeLayout>

代碼截圖：

需要源碼就給我留言。

實現后的界面如下：