使用FragmentTabHost实现Tab页

在这里放一个使用FragmentTabHost实现的Tab页实例，由于自己对Android开发并不十分熟悉，因此无法作出一些详细的讲解，仅仅是个例子。

先放两张例子运行时截取的图片：

      

MainActivity的布局文件（activity_main.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/fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <android.support.v4.app.FragmentTabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

这个布局文件在AndroidStudio中会报异常，不过例子写完整之后运行正常，暂时没有查到原因，AndroidStudio报的错误如下所示：

MainActivity类

package com.tysoft.tab;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;
import android.widget.Toast;

import com.tysoft.tab.fragment.FirstFragment;
import com.tysoft.tab.fragment.FourthFragment;
import com.tysoft.tab.fragment.SecondFragment;
import com.tysoft.tab.fragment.ThirdFragment;

import java.util.Arrays;


public class MainActivity extends FragmentActivity {

    private String[] tabIds = {"DASHBOARD", "MESSAGE", "DATA", "SETTING"};
    private String[] tabLabels = {"工作台", "消息", "数据", "设置"};
    private int[] tabImgs = new int[]{R.drawable.main_tab_dashboard_img,
            R.drawable.main_tab_message_img, R.drawable.main_tab_data_img,
            R.drawable.main_tab_setting_img};
    private Class[] tabFragmentCls = new Class[]{FirstFragment.class, SecondFragment.class,
            ThirdFragment.class, FourthFragment.class};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FragmentTabHost fragmentTabHost = (FragmentTabHost) findViewById(R.id.tab_host);
        fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.fragment);
        fragmentTabHost.getTabWidget().setDividerDrawable(null);

        for (int i = 0; i < tabIds.length; i++) {
            fragmentTabHost.addTab(fragmentTabHost.newTabSpec(tabIds[i]).setIndicator
                    (getTabItemView(i)), tabFragmentCls[i], null);
        }

        fragmentTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                Toast.makeText(MainActivity.this, tabId, Toast.LENGTH_LONG).show();
            }
        });
    }

    /**
     * 给Tab按钮设置图标和文字
     */
    private View getTabItemView(int index) {
        View view = getLayoutInflater().inflate(R.layout.main_tab_item, null);

        ImageView imageView = (ImageView) view.findViewById(R.id.main_tab_img);
        imageView.setImageResource(tabImgs[index]);

        TextView textView = (TextView) view.findViewById(R.id.main_tab_label);
        textView.setText(tabLabels[index]);

        return view;
    }
}

可以对FragmentTabHost 的TabWidget作一些设置，比如最小高度或者背景等，TabWidget可以通过getTabWidget方法获取，如果下所示：

fragmentTabHost.getTabWidget().setDividerDrawable(null);
fragmentTabHost.getTabWidget().setBackgroundResource(R.drawable.ic_new_tab_p);
fragmentTabHost.getTabWidget().setMinimumHeight(300);

用到的Fragment（这里只放置了其中一个Fragment的代码，其它几个类似，仅仅内容不同），这里为了简单没有使用XML布局文件，Fragment中的内容都是在代码中生成，仅仅有一个TextView控件。

package com.tysoft.tab.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

public class FirstFragment extends Fragment {

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
            savedInstanceState) {
        LinearLayout linearLayout = new LinearLayout(getActivity());
        linearLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams
                .MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        linearLayout.setGravity(Gravity.CENTER);

        TextView textView = new TextView(getActivity());
        textView.setTextSize(30);
        textView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT));
        textView.setText("第一个Fragment");
        linearLayout.addView(textView);

        return linearLayout;
    }
}

Tab页签项布局XML文件

不知为什么FragmentTabHost的Tab页不能放置图片，不符合自己的要求；幸好TabHost.TabSpec类的setIndicator支持自定义的View，因此需要一个自定义的XML布局文件，如下所示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center"
              android:orientation="vertical">

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

    <TextView
        android:id="@+id/main_tab_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

Tab页签中ImageView对应XML图片资源文件（仅仅只放一个，其它类似，只是图片不同而已），点击时显示与正常情况下不同的图片

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