寫一個android帶動畫效果的TabHost(類似微部落格戶端的轉場效果)

標籤：androidtab切換   tabviewcontroller   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下載