写一个android带动画效果的TabHost(类似微博客户端的切换效果)
浏览数：34 /
时间：2015年06月11日
先上图:
这个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下载
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
