android底栏TabHost

以前写过底栏的TabHost，但不知道放在哪里了，上次需要写一个功能时，又重新找，重新写，现在记录在这儿，方便以后开发～～

TabHost的定义好像比较严格，具体什么原因不知道，只知道书上这么说的。

xml如下：

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

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <FrameLayout
                    android:id="@android:id/tabcontent"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" 
                    android:layout_marginBottom="50dip" />

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:background="@drawable/main_tab_background"
                    android:fadingEdge="none"
                    android:fadingEdgeLength="0.0px" />
            </RelativeLayout>
        </TabHost>
</RelativeLayout>

java代码如下：

public class MainActivity extends Activity {

    private TabHost tabHost;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        tabHost = (TabHost) findViewById(R.id.tabhost);

		LocalActivityManager mlam = new LocalActivityManager(this, false);
		mlam.dispatchCreate(savedInstanceState);
		tabHost.setup(mlam);
		
		View view1 = View.inflate(MainActivity.this,
				R.layout.tab_imageview_icon, null);
		((ImageView) view1.findViewById(R.id.mTabView))
		.setImageResource(R.drawable.tab_home_page_normal);
		TabHost.TabSpec spec1 = tabHost.newTabSpec("1").setIndicator(view1)
				.setContent(new Intent(this, PageOne.class));
		tabHost.addTab(spec1);

		View view2 = View.inflate(MainActivity.this,
				R.layout.tab_imageview_icon, null);
		((ImageView) view2.findViewById(R.id.mTabView))
		.setImageResource(R.drawable.tab_live_normal);

		TabHost.TabSpec spec2 = tabHost.newTabSpec("2").setIndicator(view2)
				.setContent(new Intent(this, PageTwo.class));
		tabHost.addTab(spec2);

		View view3 = View.inflate(MainActivity.this,
				R.layout.tab_imageview_icon, null);
		((ImageView) view3.findViewById(R.id.mTabView))
		.setImageResource(R.drawable.tab_column_normal);

		TabHost.TabSpec spec3 = tabHost.newTabSpec("3").setIndicator(view3)
				.setContent(new Intent(this, PageOne.class));
		tabHost.addTab(spec3);

		View view4 = View.inflate(MainActivity.this,
				R.layout.tab_imageview_icon, null);
		((ImageView) view4.findViewById(R.id.mTabView))
		.setImageResource(R.drawable.tab_subject_normal);

		TabHost.TabSpec spec4 = tabHost.newTabSpec("4").setIndicator(view4)
				.setContent(new Intent(this, PageTwo.class));
		tabHost.addTab(spec4);

		View view5 = View.inflate(MainActivity.this,
				R.layout.tab_imageview_icon, null);
		((ImageView) view5.findViewById(R.id.mTabView))
		.setImageResource(R.drawable.tab_home_page_normal);

		TabHost.TabSpec spec5 = tabHost.newTabSpec("5")
				.setIndicator(view5)
				.setContent(new Intent(this, PageOne.class));
		tabHost.addTab(spec5);
		tabHost.setCurrentTab(1);
    }

图片就不贴出来了，这样可以实现以下效果：

 但现在还有一个问题，就是当选择某一个tab后（比如直播），在直播后应该有个大的背景，而且直播的图标需要换掉，我记得以前的实现方式比较简单，但那天实在想不起来了，今天也没想起来，就使用了一种比较笨的办法，在layout(tab_imageview_icon)中先设置一个RelativeLayout，然后设置背景为选中时的图片，默认设置为不可见，当选择当前的tab后设置其可见，直播图片改变的办法是选择直播后同时更改直播对应的图片。

tab_imageview_icon的内容如下，mTabLayout就是单个tab的背景，mTabView是显示每个tab的内容的：

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_background"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <RelativeLayout
        android:id="@+id/mTabLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/main_tab_selected"
        android:visibility="invisible">
    </RelativeLayout>
    <ImageView
        android:id="@+id/mTabView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:layout_centerInParent="true"/>
	
</RelativeLayout>

在Activity中实现OnTabChangeListener接口，控制代码如下，基本思想是设置背景可见，更改tabView的背景图片，同时设置刚才可见的tab背景不可见，tabView背景图片恢复默认的效果：

@Override
	public void onTabChanged(String tabId) {
		// TODO Auto-generated method stub
		View tabLayout;
		ImageView tabView;
		for (int i = 0; i < mTabWidget.getChildCount(); i++) {
			tabLayout = mTabWidget.getChildAt(i).findViewById(R.id.mTabLayout);
			tabView = (ImageView) mTabWidget.getChildAt(i).findViewById(
					R.id.mTabView);
			if (tabHost.getCurrentTab() == i) {
				tabLayout.setVisibility(View.VISIBLE);
				tabView.setImageResource(mTabIconSelectedId[i]);
			} else {
				tabLayout.setVisibility(View.INVISIBLE);
				tabView.setImageResource(mTabIconNormalId[i]);
			}
		}
	}

 

效果如下：