TabHost使用详解（实现滑动切换选项卡）

TabHost主要实现底部导航功能。

1. TabHost使用步骤

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;

c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;

a.定义布局

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_marginBottom="60dp">
        </FrameLayout>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="#aaaaaa"
            android:layout_gravity="bottom"
            android:fadingEdge="none"
            android:showDividers="none"
            android:fadeScrollbars="false"
            android:fadingEdgeLength="0.0px" 
            android:focusable="false"
            android:focusableInTouchMode="false"
            >
        </TabWidget>

</TabHost>

注意：TabHost，TabWidget，FrameLayout的id需要引用 android的自带id

主程序代码

public class MainActivity extends TabActivity {
    private TabHost tabHost;
    private int[] imgtrue = new int[] { R.drawable.host_magazine_true,
            R.drawable.host_music_menu_true, R.drawable.host_ringbox_true,
            R.drawable.host_user_true };
    private int[] imgfalse = new int[] { R.drawable.host_magazine_false,
            R.drawable.host_music_menu_false, R.drawable.host_ringbox_false,
            R.drawable.host_user_false };
    private String[] textreg = new String[] { "杂志", "信使", "音乐", "用户" };
    /**
     * 当前页面索引
     */
    int i = 0;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabHost = getTabHost();
        // 动态为TabWidget添加图片、文字和对应的intent
        addTabSpec(new int[] { 0, 1, 2, 3 }, imgfalse, textreg, getintent());
        // 默认选中第一个
        tabHost.setCurrentTab(0);
        // 为选中的第一个添加点击效果
        changeimg(0);
        // TabWidget改变监听
        tabHost.setOnTabChangedListener(new OnTabChangeListener() {

            @Override
            public void onTabChanged(String tabId) {
                // TODO Auto-generated method stub

                int pos = Integer.parseInt(tabId);
                Log.d("xx", pos + "");
                // 给当前图片文字添加点击效果
                changeimg(pos);
            }

        });
    }

    /**
     * 根据tabid为图片、文字添加点击效果
     * */
    protected void changeimg(int pos) {
        TabWidget tabWidget = getTabWidget();
        for (int i = 0; i < tabWidget.getChildCount(); i++) {
            View v = tabWidget.getChildAt(i);
            TextView t = (TextView) v.findViewById(R.id.tabtext);
            ImageView img = (ImageView) v.findViewById(R.id.tabimg);
            if (i == pos) {
                t.setTextColor(Color.parseColor("#cc3333"));
                img.setBackgroundResource(imgtrue[i]);
            } else {
                t.setTextColor(Color.parseColor("#00ff33"));
                img.setBackgroundResource(imgfalse[i]);
            }
        }
        i = pos;
    }

    /**
     * 动态为TabWidget添加图片、文字和对应的intent
     * 
     * */
    private void addTabSpec(int[] is, int[] imgfalse2, String[] textreg2,
            Intent[] getintent) {
        for (int i = 0; i < is.length; i++) {
            View v = View.inflate(MainActivity.this, R.layout.tab, null);
            TextView tabtext = (TextView) v.findViewById(R.id.tabtext);
            ImageView tabimg = (ImageView) v.findViewById(R.id.tabimg);
            tabtext.setText(textreg2[i]);
            tabimg.setBackgroundResource(imgfalse2[i]);
            tabHost.addTab(tabHost.newTabSpec(is[i] + "").setIndicator(v)
                    .setContent(getintent[i]));
        }
    }

    /**
     * 获取intent
     * 
     * */

    private Intent[] getintent() {
        // TODO Auto-generated method stub
        Intent intent1 = new Intent(MainActivity.this, TaboneActivity.class);
        Intent intent2 = new Intent(MainActivity.this, Tabtwo.class);
        Intent intent3 = new Intent(MainActivity.this, Tabthree.class);
        Intent intent4 = new Intent(MainActivity.this, Tabfour.class);
        return new Intent[] { intent1, intent2, intent3, intent4 };
    }

    /**
     * 手势监听
     */
    @SuppressWarnings("deprecation")
    private GestureDetector gestureDetector = new GestureDetector(
            new GestureDetector.SimpleOnGestureListener() {
                public boolean onFling(android.view.MotionEvent e1,
                        android.view.MotionEvent e2, float velocityX,
                        float velocityY) {
                    if ((e2.getRawX() - e1.getRawX()) > 80) {
                        showNext();
                        return true;
                    }

                    if ((e1.getRawX() - e2.getRawX()) > 80) {
                        showPre();
                        return true;
                    }
                    return super.onFling(e1, e2, velocityX, velocityY);
                }

            });

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        gestureDetector.onTouchEvent(event);
        return super.onTouchEvent(event);
    }


    /**
     * 显示下一个页面
     */
    protected void showNext() {
        // 三元表达式控制4个页面的循环.
        // 三元表达式控制4个页面的循环.
        // 布尔表达式?a:b
        // 布尔表达式为true结果为a，表达式为false结果为b

        // x++和++x作为一条独立语句执行时，等价于x=x+1 执行结果相同
        // x++和++x作为表达式的一部分使用，就会存在差别。
        // ++x表示先将变量x的值加1，然后x再参与表达式运算
        // x++表示先用x的值参与表达式运算，然后再将x的值加1
        // 例：x=1； a=x++；这里a结果是1；x是2；
        // x=1；a=++x； 这里a结果是2， x结果也是2

        tabHost.setCurrentTab(i = i == 3 ? i = 0 : ++i);
        Log.i("kennet", i + "");

    }

    /**
     * 显示前一个页面
     */
    protected void showPre() {
        // 三元表达式控制4个页面的循环.
        tabHost.setCurrentTab(i = i == 0 ? i = 3 : --i);

    }

}

选项卡布局

<?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" >
    <ImageView 
        android:layout_marginTop="5dp"
        android:id="@+id/tabimg"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerHorizontal="true"
        />
   <TextView 
       android:id="@+id/tabtext"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textSize="12sp"
       android:layout_below="@id/tabimg"
       android:textColor="#00ff33"
       android:layout_centerHorizontal="true"
       />
</RelativeLayout>

显示或者隐藏选项卡

getParent().findViewById(android.R.id.tabs).setVisibility(View.VISIBLE);
getParent().findViewById(android.R.id.tabs).setVisibility(View.GONE);

Demo下载地址：

http://download.csdn.net/detail/yy471101598/9177569