两种特殊TabHost实现

最近看到网易新闻的底部导航栏的效果，觉得不错，就自己花了点时间试着写了一下。在此和大家分享一下。

下面先看这个效果图：

说明：这个效果在点击别的tabwidget的时候，下面绿色的部分有滑动的效果，这个和网易的那个导航一样的。

这个的实现xml文件：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#808080"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:layout_marginTop="10dp"
                android:tabStripEnabled="false" />

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="80dp"
                android:layout_height="10dp"
                android:background="#00CC00" />
        </LinearLayout>
    </LinearLayout>

</TabHost>

注意：

android:id="@android:id/tabhost"

android:id="@android:id/tabcontent"

android:id="@android:id/tabs"

以上三个Id 是固定的，如果更改的话是会报错的。

效果图下面绿色的部分只是TabWidget下加个ImageView,imageView 随着TabWidget的移动而移动就可以了。

实际上只是对TabHost的OnTabChangeListener事件监听就可以啦

实现java代码：

mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
			int startX = 0;
			int endX =0;
			@Override
			public void onTabChanged(String tabId) {
				Log.d("TabHost", "OnTabChangeListener = "+tabId);
				mTabSpecWidth = mTabHost.getCurrentTabView().getWidth();
				Log.e("TabHost", "mTabSpecWidth ="+mTabSpecWidth+"\ngetChildCount="+mTabHost.getChildCount());
				
				endX = mTabSpecWidth*(Integer.parseInt(tabId)-1);
				
				mTranslateAnimation = new TranslateAnimation(startX,endX,0,0);
				mTranslateAnimation.setDuration(200);
				mTranslateAnimation.setFillEnabled(true);
				mTranslateAnimation.setFillAfter(true);
				mImageView.startAnimation(mTranslateAnimation);
				startX = endX;
				if(tabId.equals("6")){
				startActivity(new Intent(TabHostBottomActivity.this,TabHostActivity.class));	
				}
			}
		});

下面介绍一下第二种Tabhost的实现：

先上图，有图有真相啊

这种实现原理也简单，只是在点击的前换一下背景图就行了。

TabSpec.setsetIndicator(view )这个View 是自己是实现的View。

我实现的View源代码：

package cn.com.hh;

import android.content.Context;
import android.view.Gravity;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TabHostView extends LinearLayout {

	private Context mContext;
	private LinearLayout parent;
	private TextView mTextView;
	private ImageView mImageView;

	public TabHostView(Context context) {
		super(context);
	}
	/**
	 * 只有文字的选项卡
	 * @param context
	 * @param str
	 */
	public TabHostView(Context context, String str) {
		this(context,str,0,true);
	}
	/**
	 * 含有文字和图片的选项卡
	 * @param context
	 * @param str 文字
	 * @param imageResourceId 图片
	 */
	public TabHostView(Context context, String str, int imageResourceId) {
		this(context,str,imageResourceId,true);

	}
	/**
	 * 含有文字和图片的选项卡,图片在上，文字在下
	 * @param context
	 * @param str 文字
	 * @param imageResourceId 图片
	 * @param topNavigation 导航方向
	 */
	public TabHostView(Context context, String str, int imageResourceId,boolean topNavigation) {
		super(context);
		mContext = context;
		mTextView = new TextView(context);
		mTextView.setText(str);
		mTextView.setGravity(Gravity.CENTER);
		if(imageResourceId != 0){
			this.setOrientation(LinearLayout.VERTICAL);
			this.setGravity(Gravity.CENTER);
			mImageView = new ImageView(context);
			mImageView.setImageResource(imageResourceId);
			if(topNavigation ==true){
				this.addView(mImageView,new LayoutParams(LayoutParams.WRAP_CONTENT,
						LayoutParams.WRAP_CONTENT));
				this.addView(mTextView,new LayoutParams(LayoutParams.WRAP_CONTENT,
						LayoutParams.WRAP_CONTENT));
			}else{
				this.addView(mTextView,new LayoutParams(LayoutParams.WRAP_CONTENT,
						LayoutParams.WRAP_CONTENT));
				this.addView(mImageView,new LayoutParams(LayoutParams.WRAP_CONTENT,
						LayoutParams.WRAP_CONTENT));
			}
			
		}else{
			this.addView(mTextView,new LayoutParams(LayoutParams.MATCH_PARENT,
					LayoutParams.MATCH_PARENT));
		}

	}
	
	
	/**
	 * 初始化选项卡
	 */
	private void initTabHostView(){
		
	}
}

由于个人表达能力不是很好，不知道说没说明白。不明白的请留言吧。

花了点时间看了一下TabHost实现的相关的源代码，看懂了点，但是目前没有理清楚思路。以后理清后在分享吧

项目完整的源代码地址：http://download.csdn.net/detail/nxh_love/3806607