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>

下面就是自己练习喽！