寫一個android帶動畫效果的TabHost(類似微博客戶端的切換效果)

先上圖:

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+1eK49kxheW91dMrHOjwvcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;"> <frameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" > </frameLayout> <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" > </frameLayout>
代碼裡先初始化:

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下載