android组件之TabHost

一 介绍

1.1 TAB的容器。这个对象包含两个子元素：

1. TabWidget：管理标签（tabs），用户点击来选择一个特定的标签，是它告诉TabHost去切换界面的
2. FrameLayout：对象显示该页的内容

1.2 常用方法　　

1. public void addTab(TabHost.TabSpec tabSpec)
2. public void setup ()：在addTab之前要先调用setup,不和TabActivity关联，通过findViewById获取的TabHost需要调用setup(),如果是在TabActivity中通过getTabHost()的方式获取的不需要调用这个方法
3. setup(LocalActivityManager activityGroup): setContent中传入intent的时候才关注下这个方法
4. clearAllTabs ：移除所有的tab
5. dispatchKeyEvent : 下发keyevent
6. dispatchWindowFocuseChanged : 下发windowfocusChanged事件
7. tabHost.newTabSpec :创建一个新的TabSpec，关联到具体内容
8. getCurrentTab()/setCurrentTab():获取/设置当前需要显示的tab，通过index
9. setCurrentTabByTag/getCurrentTabTag:通过tag设置当前需要显示的Tab,tag就是创建TabSpec的时候传入的字符串
10. getCurrentTabView:设置/获取当前在TabWidget中显示的View,也就是作为标签的View而非内容
11. getCurrentView :获取当前显示的内容
12. setOnTabChangedListener : 设置标签页切换事件监听
13. getTabContentView:获取内容页面的容器FrameLayout
14. getTabWidget: 获取TabWidget

1.3 涉及接口及类

1. class:TabHost.TabSpec
2. interface：TabHost.OnTabChangeLisetener
3. interface:TabHost.TabContentFactory　　

　　1.3.1 TabHost.TabSpec

　　 tab（标签）有一个indicator，content.例如：

　　tabHost.addTab(tabHost.newTabSpec("tab_time").setIndicator("时钟").setContent(R.id.tab_time));

　　1.3.2 indicator

　　有三个重载的方法可以设置标签的名字和图案。返回值都是TabHost.TabSpec　　　　

1. setIndicator(CharSequence label)
2. setIndicator(View view)
3. setIndicator(CharSequence lable,Drawable icon)　　

　　1.3.3 content

　　返回值都是TabHost.TabSpe。是第一个比较常用。

1. **setContent(int viewId)**传入视图的ID与之关联起来
2. setContet(Intent intent)在TabHost.TabContentFactory创建的这个视图的内容
3. setContent((TabHost.TabContentFactory contentFactory)

　　1.3.4 tag

　　这是相当于一个tag的身份证，在 new TabSpec(String tag)决定了

二 TabHost源码

public class TabHost...{
    //常用属性
    private TabWidget mTabWidget;
    private FrameLayout mTabContent;
    private List<TabSpec> mTabSpecs = new ArrayList<TabSpec>(2);
    private OnKeyListener mTabKeyListener;
    public void setup(){
        //这里实例化TabWiget
        mTabWidget = (TabWidget) findViewById(com.android.internal.R.id.tabs);
        if (mTabWidget == null) {
            throw new RuntimeException(
                    "Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs'");
        }
        ....
        mTabWidget.setTabSelectionListener(new TabWidget.OnTabSelectionChanged() {
            public void onTabSelectionChanged(int tabIndex, boolean clicked) {
                setCurrentTab(tabIndex);
                if (clicked) {
                    mTabContent.requestFocus(View.FOCUS_FORWARD);
                }
            }
        });

        mTabContent = (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
        if (mTabContent == null) {
            throw new RuntimeException(
                    "Your TabHost must have a FrameLayout whose id attribute is "
                            + "'android.R.id.tabcontent'");
        }
    }
}

　　注意：在自定义自己的TabHost的时候，Tabwiget和FrameLayout不可以自定义Id。为它需要在setup里面实例化，因此需要在addTab添加内容之前调用setup方法

三 实例分析

代码地址：https://github.com/MichealPan9999/TabHost

 3.1 布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TabHost
            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">
　　　　　　　　　　<!-- 设置的id必须是 "@android:id/tabcontent"-->
                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="9">

                    <LinearLayout
                        android:id="@+id/tv_one"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="this is tab1 content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tv_two"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="this is tab2 content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tv_three"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="this is tab3 content" />
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/tv_four"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="this is tab4 content" />
                    </LinearLayout>
                </FrameLayout>
                <!-- 设置的id必须是android:id="@android:id/tabs" -->
                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:showDividers="none"></TabWidget>
            </LinearLayout>
        </TabHost>
    </LinearLayout>
</LinearLayout>

3.2 MainActivity 实现

public class MainActivity extends FinalActivity {
    // 如果没有继承TabActivity时，通过该种方法加载启动tabHost
    @ViewInject(id = R.id.tabhost)
    TabHost mTabHost;
    private int[] unSelectedTabIcons = {R.drawable.menu_icon_0_normal, R.drawable.menu_icon_1_normal, R.drawable.menu_icon_2_normal, R.drawable.menu_icon_3_normal};
    private int[] selectedTabIcons = {R.drawable.menu_icon_0_pressed, R.drawable.menu_icon_1_pressed, R.drawable.menu_icon_2_pressed, R.drawable.menu_icon_3_pressed};
    private String[] menuText = {"添加联系人", "通讯录", "备忘录","设置"};
    private int[] contentItems = {R.id.tv_one, R.id.tv_two, R.id.tv_three,R.id.tv_four};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabHost.setup();//初始化TabHost,在addTab之前要先调用setup;不和TabActivity关联，通过findViewById获取的TabHost需要调用setup();如果是在TabActivity中通过getTabHost()的方式获取的不需要调用这个方法
        addTabHost();
        mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                updateTab(mTabHost,tabId);
            }
        });
        mTabHost.setCurrentTab(0);
        ((TextView) mTabHost.getCurrentTabView().findViewById(R.id.tv_indicator)).setTextColor(getResources().getColor(R.color.colorGreen));//第一次进入的时候讲选中的Tab修改文字颜色
        ((ImageView) mTabHost.getCurrentTabView().findViewById(R.id.iv_indicator)).setImageResource(selectedTabIcons[0]);//第一次进入的时候讲选中的Tab修改文字颜色

    }

    private void addTabHost() {
        for (int i = 0;i<;i++)
        {
            View view = LayoutInflater.from(this).inflate(R.layout.indicator, null, false);
            TextView textView = (TextView) view.findViewById(R.id.tv_indicator);
            ImageView imageView = (ImageView) view.findViewById(R.id.iv_indicator);
            textView.setText(menuText[i]);
            imageView.setImageResource(unSelectedTabIcons[i]);
            mTabHost.addTab(mTabHost.newTabSpec(String.valueOf(i)).setIndicator(view).setContent(contentItems[i]));
        }

    }

    private void updateTab(TabHost tabHost,String tabId) {
        for (int i = 0; i < 4; i++) {
            ((TextView) tabHost.getTabWidget().getChildTabViewAt(i).findViewById(R.id.tv_indicator)).setTextColor(getResources().getColor(R.color.colorBlue));
            ((ImageView) tabHost.getTabWidget().getChildTabViewAt(i).findViewById(R.id.iv_indicator)).setImageResource(unSelectedTabIcons[i]);//第一次进入的时候讲选中的Tab修改文字颜色
        }
        Log.e("panzqww",tabHost.getCurrentTabTag()+" ::: "+tabId);
        if (tabHost.getCurrentTabTag().equals(tabId)) {
            int i = Integer.valueOf(tabId);
            ((TextView) tabHost.getCurrentTabView().findViewById(R.id.tv_indicator)).setTextColor(getResources().getColor(R.color.colorGreen));
            ((ImageView) tabHost.getCurrentTabView().findViewById(R.id.iv_indicator)).setImageResource(selectedTabIcons[i]);//第一次进入的时候讲选中的Tab修改文字颜色
        }//选中的那个Tab文字颜色修改
    }
}

3.3 TabActivity

TabActivity已经被废弃很久了，但是还是可以使用，在布局中将TabHost的id改成android:id=”@android:id/tabhost”，然后在继承了TabActivity的MainActivity.java中使用 
mTabHost = getTabHost(); 
然后基本使用方法就和上面一样了