tabhost基本用法（三）

TabHost基本用法（三）

前面的两种Tabhost的使用基本很少用了，因为不灵活，代码冗余，自从API11（3.0）后出现了Fragment，故要使用FragmentTabHost。

• activity_main.xml布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <!--   android:id="@+id/tabhost"-->
   <android.support.v4.app.FragmentTabHost
       android:id="@+id/tabhost"       
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       >
       <LinearLayout 
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
           >
            <!--  android:id="@android:id/tabcontent"-->
         <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
             >

         </FrameLayout>  
         <!-- stroke tabWidget的描边 -->
         <TabWidget 
            android:id="@android:id/tabs"  
            android:layout_width="match_parent"           
            android:layout_height="wrap_content"
            android:background="@drawable/tabweiget" 
             >
         </TabWidget>
       </LinearLayout>
   </android.support.v4.app.FragmentTabHost>

</RelativeLayout>

注意：
1. 要使用android.support.v4.app.FragmentTabHost导入v4包，是为了向下兼容。
2. 要使用系统提供的id,tabs,tabcontent。不然会报错。 其中系统的tabhost不使用系统的，我试了也可以。
3. 让tabwidget置于最下方并且有一个分割线，background为添加的shape一个Stroke描边。tabweiget.xml如下：

  <stroke android:width="1dp"  android:color="#A9A9A9"/>

• fragment.xml的三个布局大致都一样，就是一个TextView

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

   <TextView 
       android:text="second fragment"
       android:textSize="20sp"
       android:textColor="#ffff0000"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       />
</RelativeLayout>

• tabwidget.xml的布局是一个Imageview。

<?xml version="1.0" encoding="utf-8"?>
<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:layout_weight="1"
        android:gravity="center"
        android:padding="5dp"
        android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_iv_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

• tabwidget的ImageView的selector.xml

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

• fragment代码：注意此时fragment必须为==v4包==下的，因为FragmentTabHost和FragmentActivity都是v4包下的.

public class FragmentDemo2 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment2,container,false);
    }
}

• 主界面代码

public class MainActivity extends FragmentActivity {

    private FragmentTabHost ft;
    private LayoutInflater inflater;
    // 图片
    private int mImages[] = {
            R.drawable.tab_counter,
            R.drawable.tab_assistant,
            R.drawable.tab_contest,
    };
    // 标题
    private String mTabTags[] = {
            "tab1",
            "tab2",
            "tab3",
    };
    //fragment类
    private Class[] mFragments={
            FragmentDemo1.class,
            FragmentDemo2.class,
            FragmentDemo3.class
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        inflater=LayoutInflater.from(this);
        ft=(FragmentTabHost) findViewById(R.id.tabhost);
        ft.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
        //去掉分割线
        ft.getTabWidget().setDividerDrawable(null);
        for(int i=0;i<mTabTags.length;i++){
            TabSpec ts=ft.newTabSpec(mTabTags[i]).setIndicator(getImageView(i));
            //v4包提供的addTab类
            ft.addTab(ts, mFragments[i], null);
        }
    }
    // 获得图片资源
    private View getImageView(int index) {
        View view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.tab_iv_image);
        imageView.setImageResource(mImages[index]);
        return view;
    }
}

分析：
1. 要继承v4包下的FragmentActivity。
2. 调用setup()初始化，因为是继承FragmentActivity故可直接调用getSupportFragmentManager()。
3. 调用addTab(TabSpec ts,Class c, Bundle b)添加Fragment类。

运行结果：