使用 FragmentTabHost 與 Fragment 制作頁(yè)面切換效果

API 19

TabHost已經(jīng)不建議使用了餐屎。用 FragmentTabHost 來(lái)代替TabHost。實(shí)際上 FragmentTabHost 繼承自 TabHost

主文件是FragmentTabHostDemo.java

• 繼承自FragmentActivity；
• 設(shè)置3個(gè)底部標(biāo)簽，自定義了標(biāo)簽切換時(shí)的標(biāo)簽變化；
• 添加標(biāo)簽頁(yè)有多種方式颗祝，每個(gè)標(biāo)簽頁(yè)對(duì)應(yīng)一個(gè)fragment
• 每次切換fragment，都會(huì)調(diào)用fragment的onCreateView()和onResume()方法恼布；
• v4包使用getSupportFragmentManager()螺戳；
• 動(dòng)態(tài)加載fragment，不用在xml中注冊(cè)折汞；
• 其他的大體和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);// 設(shè)置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损同；
標(biāo)簽放在頁(yè)面底部；注意這里的id鸟款，以及l(fā)ayout的寬高設(shè)置

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

因?yàn)榍袚Q標(biāo)簽時(shí)會(huì)重載fragment膏燃，可以在fragment中判斷一下，已經(jīng)加載過(guò)的何什，不需要重新加載组哩；

TabFragment1.java 中定義了一個(gè)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");
    }
}

From my blog：http://www.cnblogs.com/rustfisher/p/5313958.html