Android中TabHost的使用 « Ronald 的天空

Android中TabHost的使用

时间：2011年05月11日作者：ronald查看次数:1,254 views评论次数：0

先上效果图, 该图片是我软件中的TabHost的使用效果:

(这个是没有选中的背景图)

(这个是选中的背景图)

点击不同的Tab后进行切换不同的Tab的效果.

要实现以上的效果要有以下几的步骤:

第一步:在xml布局页面中添加TabHost

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tabhost" android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	>
	<LinearLayout android:orientation="vertical"
		android:layout_width="fill_parent" 
                android:layout_height="wrap_content">
		<TabWidget android:id="@android:id/tabs"
			android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
			 />
		<FrameLayout android:id="@android:id/tabcontent"
			android:layout_width="fill_parent" 
                        android:layout_height="fill_parent">
                <!-- 未开始 -->
		<ListView android:id="@+id/textview_notbegin" 
                         android:layout_width="fill_parent"
		         android:layout_height="fill_parent" 
                         android:drawSelectorOnTop="false" 
                         android:dividerHeight="-1px"/>
                <!-- 进行中 -->
		<ListView android:id="@+id/textview_playing" 
                        android:layout_width="fill_parent"
			android:layout_height="fill_parent" 
                        android:drawSelectorOnTop="false" 
                        android:dividerHeight="-1px"/>
                <!-- 已完场 -->
		<ListView android:id="@+id/textview_finish" 
                        android:layout_width="fill_parent"
			android:layout_height="fill_parent" 
                        android:drawSelectorOnTop="false" 
                        android:dividerHeight="-1px"/>
                <!-- 关注 -->
		<ListView android:id="@+id/textview_focus" 
                        android:layout_width="fill_parent"
			android:layout_height="fill_parent" 
                        android:drawSelectorOnTop="false" 
                        android:dividerHeight="-1px"/>
		</FrameLayout>
	</LinearLayout>
</TabHost>

第二步:编写Activity
在Activity的onCreate方法中添加以下代码:

        // mTabHost定义在Activity的属性
	mTabHost = (TabHost) findViewById(R.id.tabhost);
        mTabHost.setup();
 
        LayoutInflater factory = null;
        // 未开始
        factory = LayoutInflater.from(this);
        final View notStartview = factory.inflate(R.layout.tab,null);
        TextView notStartTextView = (TextView)notStartview.findViewById(R.id.tabName);
		notStartTextView.setText(getText(R.string.text_tab_notstart));
		notStartTextView
               .setBackgroundDrawable(getResources().getDrawable(R.drawable.tab));
 
        // 进行中
        factory = LayoutInflater.from(this);
        final View playingView = factory.inflate(R.layout.tab,null);
        TextView playingTextView = (TextView)playingView.findViewById(R.id.tabName);
        playingTextView.setText(getText(R.string.text_tab_playing));
        playingTextView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_act));
 
        // 已完场
        factory = LayoutInflater.from(this);
        final View finishView = factory.inflate(R.layout.tab,null);
        TextView finishTextView = (TextView)finishView.findViewById(R.id.tabName);
        finishTextView.setText(getText(R.string.text_tab_finish));
        finishTextView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab));
 
        // 关注
        factory = LayoutInflater.from(this);
        final View focusView = factory.inflate(R.layout.tab,null);
        TextView focusTextView = (TextView)focusView.findViewById(R.id.tabName);
        focusTextView.setText(getText(R.string.text_tab_focus));
        focusTextView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab));
 
        // 未开始
        mTabHost.addTab(mTabHost.newTabSpec("tab_not_begin")
          .setIndicator(notStartview)
          .setContent(R.id.textview_notbegin));
        // 进行中
        mTabHost.addTab(mTabHost.newTabSpec("tab_playing")
          .setIndicator(playingView)
          .setContent(R.id.textview_playing));  
        // 已完场
        mTabHost.addTab(mTabHost.newTabSpec("tab_finish")
          .setIndicator(finishView)
          .setContent(R.id.textview_finish));  
        // 关注
        mTabHost.addTab(mTabHost.newTabSpec("tab_focus")
          .setIndicator(focusView)
          .setContent(R.id.textview_focus));  
 
        // 修改宽度,作用两个(关注)与三个字(进行中,已完场)占有不同,三个字宽度大一些
        for (int i =0; i < mTabHost.getTabWidget().getChildCount(); i++) {
        	mTabHost.getTabWidget().getChildAt(i).getLayoutParams().height = DisplayUtil.dip2px(this, 33);
 
        	if(i == 1 || i== 2){
        		mTabHost.getTabWidget().getChildAt(i).getLayoutParams().width = 18;
        	} else{
        		mTabHost.getTabWidget().getChildAt(i).getLayoutParams().width = 10;
        	}
        }
 
        // 设置当前选中的Tab
        mTabHost.setCurrentTab(1);
        mTabHost.getTabWidget().getChildAt(mTabHost.getCurrentTab()).setBackgroundColor(Color.BLACK);
 
        // tab 选中改变时事件
        mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
		public void onTabChanged(String arg0) {
			for(int i=0;i<mTabHost.getTabWidget().getChildCount();i++){
			       mTabHost.getTabWidget().getChildAt(i).findViewById(R.id.tabName)
                                .setBackgroundDrawable(getResources().getDrawable(R.drawable.tab));
			}
			mTabHost.getTabWidget().getChildAt(mTabHost.getCurrentTab())
                        .findViewById(R.id.tabName)
                        .setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_act));
		}
	});

以上中有使用 DisplayUtil.dip2px(this, 33); 的代码,是为了支持多种分辨率的手机的.
相关内容可以查看 [Android中dip(dp)与px之间单位转换]

第三步:定义Tab的内容xml布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:background="@drawable/tab"
	>
	<TextView android:id="@+id/tabName"
		android:background="@drawable/tab"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:gravity="bottom|center_horizontal"
		android:textColor="#FFFFFF" 
		android:textSize="14dip"
		android:paddingBottom="3dip"
		android:layout_alignParentBottom="true"
		 />
</RelativeLayout>