TabHost应用

系统默认的TabHost按钮在上面，其实大部分主流应用的都在下面，有的同学可能不知道怎么做，其实很简单。系统的TabWidget在FramLayout的上面，只要把它移到FramLayout的下面就可以了。系统的TabWidget外面是没有HorizontalScrollView的，当TabWidget比较多的时候可以套了一个HorizontalScrollView，这样可以滑动，HorizontalScrollView增加一个属性android：scrollbars=“none”这样就没有滚动条了。到这里可能有些同学又遇到布局的比例问题了，只要更改FramLayout为android：layoutHight=“match_parent”还有android：layout_weight=“1”应该就可以了

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

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

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

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >
            </FrameLayout>
            <HorizontalScrollView
                android:id="@+id/horizontalScrollView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scrollbars="none" >

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" >
                </TabWidget>
            </HorizontalScrollView>
        </LinearLayout>
    </TabHost>
</LinearLayout>

下面说一下代码怎么写，首先要继承TabActivity，然后getTabHost()的到TabHost。

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;

public class Ex140_tabHostActivity extends TabActivity {
    /** Called when the activity is first created. */
	TabHost mTabHost;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mTabHost = getTabHost();
        Intent intent1=new Intent(this,FirstActivity.class);
		View view = LayoutInflater.from(this).inflate(R.layout.tabitem, null);
		ImageView img = (ImageView) view.findViewById(R.id.imageView1);
		img.setImageResource(R.drawable.friend_qzone);
		mTabHost.addTab(mTabHost.newTabSpec("tab1").setContent(intent1).setIndicator(view));
		//方法和上面代码效果一样
		addTab("tab2",R.drawable.friend_kaixin,SecondActivity.class);
		addTab("tab3",R.drawable.friend_renren,ThirdActivity.class);
		addTab("tab4",R.drawable.friend_sina,FirstActivity.class);
		addTab("tab5",R.drawable.friend_tencent,SecondActivity.class);
    }

	private void addTab(String string, int imgId,Class clazz) {
		View view = LayoutInflater.from(this).inflate(R.layout.tabitem, null);
		ImageView img = (ImageView) view.findViewById(R.id.imageView1);
		img.setImageResource(imgId);
		mTabHost.addTab(mTabHost.newTabSpec("tab2").setContent(new Intent(this,clazz)).setIndicator(view));
	}
}

上面view的布局是一个图片，我在外面又套了一个RelativeLayout这样大家可以实现更复杂的样式，其实一般也用不到，一张图片足以在复杂的只要把它们做成图片就OK了。这里用了android：padding是因为图片背景设置了selecter，这样更容易看到选中时的状态。

<?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:id="@+id/imageView1"
        android:layout_width="80dip"
        android:layout_height="80dip"
        android:padding="5dip"
        android:layout_alignParentLeft="true"
        android:background="@drawable/imgbg"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

TabWidget的选中状态是android：state_selected，selecter代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true"><color android:color="#ff3333cc"/></item>
    <item ><color android:color="#ffffaacc"/></item>

</selector>

如有意见或建议请留言，欢迎批评指正。如下载源码请到http://zhizunbao.blog.51cto.com/4010021/750546下载附件