我们先看一下效果,底下的Tab切换会有一个移动的动画效果:
让Activity集成TabActivity,当然TabActivity已经过时了,现在都推荐使用Fragment来做了
之后我们会用主流的方法来搭建一个App的框架,首先我们看一下xml文件:<?xml version="1.0" encoding="UTF-8"?>
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0" >
android:id="@+id/tab_news1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Tab1"
android:textSize="30sp" >
android:id="@+id/tab_news2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Tab2"
android:textSize="30sp" >
android:id="@+id/tab_news3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Tab3"
android:textSize="30sp" >
android:id="@+id/tab_news4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Tab4"
android:textSize="30sp" >
android:id="@+id/tab_news5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Tab5"
android:textSize="30sp" >
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" >
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
android:id="@+id/tab_widget_image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:scaleType="fitXY"
android:class="lazyload" src="https://i-blog.csdnimg.cn/blog_migrate/cf094001df60a610215ee6d849e1943c.png" data-original="@drawable/tab_bottom_selected" />
每一个Item都是一个TabWidget,在Java文件中初始化这个TabHostprivate 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, PicWallActivity.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);
//类似add 另外4个Tab
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);
}
那么如何实现动画效果呢,其实,只是一个TranslateAnimation动画就可以实现,private void showAnimation() {
Log.v("test", "showAnimation");
if (lastTabIndex == currTabIndex) {
return;
}
if (mTabWidget.getChildCount()
return;
}
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();
}
}
}