Android - FragmentTabHost 与 Fragment 制作页面切换效果

使用 FragmentTabHost 与 Fragment 制作页面切换效果

API 19

TabHost已经不建议使用了。用 FragmentTabHost 来代替TabHost。实际上 FragmentTabHost 继承自 TabHost
效果图：

主文件是FragmentTabHostDemo.java

• 继承自FragmentActivity；
• 设置3个底部标签，自定义了标签切换时的标签变化；
• 添加标签页有多种方式，每个标签页对应一个fragment
• 每次切换fragment，都会调用fragment的onCreateView()和onResume()方法；
• v4包使用getSupportFragmentManager()；
• 动态加载fragment，不用在xml中注册；
• 其他的大体和TabHost一样；比如xml文件中的id要用android指定的id；

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;
import android.widget.TextView;

import com.rust.aboutview.fragment.TabFragment1;
import com.rust.aboutview.fragment.TabFragment2;
import com.rust.aboutview.fragment.TabFragment3;

import java.util.HashMap;

public class FragmentTabHostDemo extends FragmentActivity {

    public static final int COLOR_GRAY_01 = 0xFFADADAD; //自定义的颜色
    public static final int COLOR_GREEN_01 = 0xFF73BF00;

    public static final String TAB1 = "tab1";
    public static final String TAB2 = "tab2";
    public static final String TAB3 = "tab3";
    public static final String TABS[] = {TAB1, TAB2, TAB3};

    public static HashMap<String, Integer> mTabMap;
    public static FragmentTabHost mTabHost;
    LayoutInflater mLayoutInflater;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_tab_host);
        mTabMap = new HashMap<>();
        mTabMap.put(TAB1, 0);
        mTabMap.put(TAB2, 1);
        mTabMap.put(TAB3, 2);
        mLayoutInflater = LayoutInflater.from(getApplicationContext());

        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
        mTabHost.getTabWidget().setMinimumHeight(120);// 设置tab的高度
        mTabHost.getTabWidget().setDividerDrawable(null);

        TabHost.TabSpec tabSpec = mTabHost.newTabSpec(TABS[0]);
        View tabView1 = mLayoutInflater.inflate(R.layout.tab_item, null);
        final ImageView tabImage1 = (ImageView) tabView1.findViewById(R.id.tab_image);
        final TextView tabText1 = (TextView) tabView1.findViewById(R.id.tab_text);
        tabImage1.setImageResource(R.drawable.a4a);
        tabText1.setText(getString(R.string.tab_label_1));
        tabText1.setTextColor(COLOR_GREEN_01);

        tabSpec.setIndicator(tabView1);
        mTabHost.addTab(tabSpec, TabFragment1.class, null);

        View tabView2 = mLayoutInflater.inflate(R.layout.tab_item, null);
        final ImageView tabImage2 = (ImageView) tabView2.findViewById(R.id.tab_image);
        tabImage2.setImageResource(R.drawable.a49);
        final TextView tabText2 = (TextView) tabView2.findViewById(R.id.tab_text);
        tabText2.setText(getString(R.string.tab_label_2));

        mTabHost.addTab(mTabHost.newTabSpec(TABS[1]).setIndicator(tabView2),
                TabFragment2.class, null);

        View tabView3 = mLayoutInflater.inflate(R.layout.tab_item, null);
        final ImageView tabImage3 = (ImageView) tabView3.findViewById(R.id.tab_image);
        tabImage3.setImageResource(R.drawable.a49);
        final TextView tabText3 = (TextView) tabView3.findViewById(R.id.tab_text);
        tabText3.setText(getString(R.string.tab_label_3));

        mTabHost.addTab(mTabHost.newTabSpec(TABS[2])
                .setIndicator(tabView3), TabFragment3.class, null);

        mTabHost.setCurrentTab(0);

        mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                int child = mTabMap.get(tabId);
                tabImage1.setImageResource(R.drawable.a49);
                tabImage2.setImageResource(R.drawable.a49);
                tabImage3.setImageResource(R.drawable.a49);
                tabText1.setTextColor(COLOR_GRAY_01);
                tabText2.setTextColor(COLOR_GRAY_01);
                tabText3.setTextColor(COLOR_GRAY_01);
                switch (child) {
                    case 0:
                        tabImage1.setImageResource(R.drawable.a4a);
                        tabText1.setTextColor(COLOR_GREEN_01);
                        break;
                    case 1:
                        tabImage2.setImageResource(R.drawable.a4a);
                        tabText2.setTextColor(COLOR_GREEN_01);
                        break;
                    case 2:
                        tabImage3.setImageResource(R.drawable.a4a);
                        tabText3.setTextColor(COLOR_GREEN_01);
                        break;
                }
            }
        });

    }
}

activity_fragment_tab_host.xml，使用FragmentTabHost；
标签放在页面底部；注意这里的id，以及layout的宽高设置

<?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="wrap_content"
        android:background="@color/colorYellow01">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

因为切换标签时会重载fragment，可以在fragment中判断一下，已经加载过的，不需要重新加载；

TabFragment1.java 中定义了一个rootView

public class TabFragment1 extends Fragment {

    private View rootView;// cache fragment view
    TextView centerTV;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Log.d("rust", "TabFragment1 onCreateView");
        if (rootView == null) {
            rootView = inflater.inflate(R.layout.fragment_tab1, null);
        }
        ViewGroup parent = (ViewGroup) rootView.getParent();
        // if root view had a parent, remove it.
        if (parent != null) {
            parent.removeView(rootView);
        }
        centerTV = (TextView) rootView.findViewById(R.id.center_tv);
        centerTV.setOnClickListener(new View.OnClickListener() {
            // @Override
            public void onClick(View v) {
                centerTV.setText(String.format("%s","Tab1 clicked"));
                centerTV.setTextColor(Color.BLACK);
            }
        });
        return rootView;
    }

    @Override
    public void onResume() {
        super.onResume();
        Log.d("rust", "TabFragment1 onResume");
    }
}

已点击的效果图：