写一个android带动画效果的TabHost(类似微博客户端的切换效果)

先上图:

这个Layout是:

<?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="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0" >

            <LinearLayout
                android:id="@+id/tab_news1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="Tab1"
                    android:textSize="30sp" >
                </TextView>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_news2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="Tab2"
                    android:textSize="30sp" >
                </TextView>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_news3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="Tab3"
                    android:textSize="30sp" >
                </TextView>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_news4"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="Tab4"
                    android:textSize="30sp" >
                </TextView>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_news5"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="Tab5"
                    android:textSize="30sp" >
                </TextView>
            </LinearLayout>
        </FrameLayout>
	<!--
		这个是底部的tab,上面覆盖一个imageview ,tab_widget_image是可以滑动的
	 -->
        <FrameLayout
            android:id="@+id/tab_widget_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/tab_bottom" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />

            <ImageView
                android:id="@+id/tab_widget_image"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="left"
                android:scaleType="fitXY"
                android:src="@drawable/tab_bottom_selected" />
        </FrameLayout>
    </LinearLayout>

</TabHost>

代码里先初始化:

private void initTabHost() {
		mTabHost = getTabHost();
		mTabWidget = mTabHost.getTabWidget();
		
		mTabHost.setCurrentTab(0);

		/** 主页 */
		View homeWidgetView = mLayoutInflater.inflate(R.layout.tab_indicator, mTabWidget, false);
		Intent intent = new Intent();
		intent.setClass(this, MainActivity.class);
		TabHost.TabSpec tabSpec = mTabHost.newTabSpec(HOME_TAB);
		TextView homeTitle = (TextView) homeWidgetView.findViewById(R.id.title);
		homeTitle.setText(R.string.main_tab_home);
		ImageView homeIcon = (ImageView) homeWidgetView.findViewById(R.id.icon);
		homeIcon.setBackgroundResource(NORMAL_IMAGE[0]);
		tabSpec = tabSpec.setIndicator(homeWidgetView).setContent(intent);
		
		mTabHost.addTab(tabSpec);

		/** 聊吧 */
		View barWidgetView = mLayoutInflater.inflate(R.layout.tab_indicator, mTabWidget, false);
		tabSpec = this.mTabHost.newTabSpec(CHAT_TAB);
		intent = new Intent(this, EditTextExample.class);
		TextView barTitle = (TextView) barWidgetView.findViewById(R.id.title);
		barTitle.setText(R.string.main_tab_bar);
		ImageView barIcon = (ImageView) barWidgetView.findViewById(R.id.icon);
		barIcon.setBackgroundResource(NORMAL_IMAGE[1]);
		
		tabSpec = tabSpec.setIndicator(barWidgetView).setContent(intent);
		mTabHost.addTab(tabSpec);

		/** 消息中心 */
		View msgWidgetView = mLayoutInflater.inflate(R.layout.tab_indicator, mTabWidget, false);
		tabSpec = this.mTabHost.newTabSpec(MESSAGE_TAB);
		intent = new Intent(this, MainActivity.class);
		TextView msgTitle = (TextView) msgWidgetView.findViewById(R.id.title);
		msgTitle.setText(R.string.main_tab_message);
		ImageView msgIcon = (ImageView) msgWidgetView.findViewById(R.id.icon);
		msgIcon.setBackgroundResource(NORMAL_IMAGE[2]);
		tabSpec = tabSpec.setIndicator(msgWidgetView).setContent(intent);
		mTabHost.addTab(tabSpec);

		/** 我的资料 */
		View myinfoWidgetView = mLayoutInflater.inflate(R.layout.tab_indicator, mTabWidget, false);
		tabSpec = this.mTabHost.newTabSpec(PROFILE_TAB);
		intent = new Intent(this, MainActivity.class);
		TextView myinfoTitle = (TextView) myinfoWidgetView.findViewById(R.id.title);
		myinfoTitle.setText(R.string.main_tab_myinfo);
		ImageView myinfoIcon = (ImageView) myinfoWidgetView.findViewById(R.id.icon);
		myinfoIcon.setBackgroundResource(NORMAL_IMAGE[3]);
		tabSpec = tabSpec.setIndicator(myinfoWidgetView).setContent(intent);
		mTabHost.addTab(tabSpec);

		/** 更多 */
		View moreWidgetView = mLayoutInflater.inflate(R.layout.tab_indicator, mTabWidget, false);
		tabSpec = this.mTabHost.newTabSpec(MORE_TAB);
		intent = new Intent(this, EditTextExample.class);
		TextView moreTitle = (TextView) moreWidgetView.findViewById(R.id.title);
		moreTitle.setText(R.string.main_tab_more);
		ImageView moreIcon = (ImageView) moreWidgetView.findViewById(R.id.icon);
		moreIcon.setBackgroundResource(NORMAL_IMAGE[4]);
		tabSpec = tabSpec.setIndicator(moreWidgetView).setContent(intent);
		mTabHost.addTab(tabSpec);
		mTabHost.setOnTabChangedListener(new TabHostListener(this));

		((ImageView)mTabWidget.getChildAt(0).findViewById(R.id.icon))
            .setImageResource(SELECTED_IMAGE[0]);
		((TextView)mTabWidget.getChildAt(0).findViewById(R.id.title))
    		.setTextColor(TabActivityWithAnimation.this.getResources().getColor(R.color.white));
		mTabWidget.getChildAt(0).setBackgroundResource(R.drawable.tab_bottom_selected);
		
		animImage = (ImageView) findViewById(R.id.tab_widget_image);
		animImage.setVisibility(View.INVISIBLE);
	}

动画效果是通过滑动移动来提现的，表示目前切换到哪个tab:

 private void showAnimation() {
	     Log.v("test", "showAnimation");
	     if (lastTabIndex == currTabIndex) {
	         return;
	     }
	     if (mTabWidget.getChildCount() < 2) {
	         return;
	     }
	     
	     //这个是为了支持横屏效果，重新给子view set宽高
	     if (getResources().getConfiguration().orientation != lastImageChangeOrientation) {
	         lastImageChangeOrientation = getResources().getConfiguration().orientation;
	         
	         widgetItemWidth = mTabWidget.getWidth() / mTabWidget.getChildCount();
	         
	         View currView = mTabWidget.getChildAt(currTabIndex);
	         focusWidgetItemWidth = currView.getWidth();
	         focusWidgetItemHeight = currView.getHeight();
	         
	         LayoutParams lp = animImage.getLayoutParams();
	         lp.width = focusWidgetItemWidth;
	         lp.height = focusWidgetItemHeight;
	         animImage.setLayoutParams(lp);
	     }
	        
	     int fromX = lastTabIndex * widgetItemWidth;
	     int toX = currTabIndex * widgetItemWidth;
	     Log.v("test", "fromX:" + fromX + " toX:" + toX);
         TranslateAnimation animation = new TranslateAnimation(fromX, toX, 0, 0);
         animation.setDuration(600);
         animation.setAnimationListener(new AnimationListener() {
            
            @Override
            public void onAnimationStart(Animation animation) {
                mTabWidget.getChildAt(lastTabIndex).setBackgroundResource(R.drawable.tab_bottom);
                ((ImageView)mTabWidget.getChildAt(lastTabIndex).findViewById(R.id.icon))
                    .setImageResource(NORMAL_IMAGE[lastTabIndex]);
                ((TextView)mTabWidget.getChildAt(lastTabIndex).findViewById(R.id.title))
            		.setTextColor(TabActivityWithAnimation.this.getResources().getColor(R.drawable.gray2));
                animImage.setVisibility(View.VISIBLE);
            }
            
            @Override
            public void onAnimationRepeat(Animation animation) {
            }
            
            @Override
            public void onAnimationEnd(Animation animation) {
                animImage.setVisibility(View.INVISIBLE);
                ((ImageView)mTabWidget.getChildAt(currTabIndex).findViewById(R.id.icon))
                    .setImageResource(SELECTED_IMAGE[currTabIndex]);
                ((TextView)mTabWidget.getChildAt(currTabIndex).findViewById(R.id.title))
                	.setTextColor(TabActivityWithAnimation.this.getResources().getColor(R.color.white));
                mTabWidget.getChildAt(currTabIndex).setBackgroundResource(R.drawable.tab_bottom_selected);
                lastTabIndex = currTabIndex;
            }
        });
         animImage.startAnimation(animation);
     }
	 
	
	
	 private class TabHostListener implements TabHost.OnTabChangeListener {
		 Context context;
		 public TabHostListener(Context context){
			 this.context = context;
		 }
		 public void onTabChanged(String paramString) {
		     lastTabIndex = currTabIndex;
		     currTabIndex = mTabHost.getCurrentTab();
		     if (lastTabIndex != currTabIndex) {
		         showAnimation();
		     }
		     
		 }
	 }
	 

代码可以在 http://download.csdn.net/detail/baidu_nod/7614423下载