android修改home动画,如何写一个android带动画效果的TabHost(类似微博客户端的切换效果)...

我们先看一下效果，底下的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://img-blog.csdnimg.cn/2022010705465838286.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();

}

}

}