写一个android带动画效果的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下载

写一个android带动画效果的TabHost(类似微博客户端的切换效果)

时间： 2024-12-24 23:26:35

写一个android带动画效果的TabHost(类似微博客户端的切换效果)的相关文章

ios如果写一个提示带动画的View,可以来引导用户行为

先上图: 这个UIView可以这样写: -(id)initWithFrame:(CGRect)frame backImage:(UIImage*)image msgStr:(NSString*)txt txtColor:(UIColor*)color{ self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor clearColor]; _paopaoImage = image; _txt = t

ios假设写一个提示带动画的View,能够来引导用户行为

先上图: 这个UIView能够这样写: -(id)initWithFrame:(CGRect)frame backImage:(UIImage*)image msgStr:(NSString*)txt txtColor:(UIColor*)color{ self = [super initWithFrame:frame]; if (self) { self.backgroundColor = [UIColor clearColor]; _paopaoImage = image; _txt = t

如果写一个android桌面滑动切换屏幕的控件(二)

在viewgroup执行: public void snapToScreen(int whichScreen) { whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1)); boolean changingScreens = whichScreen != mCurrentScreen; mNextScreen = whichScreen; int mScrollX = this.getScrollX(); fin

如果写一个android桌面滑动切换屏幕的控件(三)

下面我们把这个控件内嵌到Layout中做一些动画和展示,效果图: 这个子控件可以上下移动,可以左右滑动,如果上下滑动距离大于左右滑动距离,则必须上下滑动 这样来写onTouch事件: @Override public boolean onTouchEvent(MotionEvent ev) { if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMov

为PhoneGap写一个android插件

为PhoneGap写一个android插件,要怎么做? 其实这句话应该反过来说,为android写一个PhoneGap插件,要怎么做? 这里以最简单的Hello World!为例,做个说明: 1.第一步,要先建立一个支持PhoneGap(Cordova)的android工程 因为这个插件本质上是安卓插件,用于PhoneGap,因此,要二者支持才行,所以我们要建立一个支持PhoneGap(Cordova)的android工程,插件在这个工程里面编写. 扫盲:PhoneGap现在已经出售给了Apac

来，咱们自己写一个Android的IOC框架！

到目前位置,afinal开发框架也是用了好几个月了,还记得第一次使用注释完成控件的初始化和事件绑定的时候,当时的心情是多么的兴奋- -代码竟然可以这样写!然后随着不断的学习,也慢慢的对IOC框架和注解反射等东西有了一点简单的了解,之前的一篇文章简单的介绍了一下Java的反射机制,今天的文章,就完成一个简单的,基于IOC的小Demo,让大家慢慢的对IOC有一点简单的了解. 首先,什么是IOC呢? 控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来

写一个Android输入法——最简步骤

本文演示用Android Studio写一个最简单的输入法.界面和交互都很简陋,只为剔肉留骨,彰显写一个Android输入法的要点. 1.打开Android Studio创建项目,该项目和普通APP的不同之处在于它不需要添加任何Activity: 我给该输入法命名为AndroidXXIME. 2.修改manifest文件 如前文<Android下创建一个输入法>中所说:输入法是一个包含IME service的安卓应用程序,首先应该在程序的manifest中声明service.我的manifes

如果写一个android支持的html文件

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

如果写一个android桌面滑动切换屏幕的控件(一)

首先这个控件应该是继承ViewGroup: 初始化: public class MyGroup extends ViewGroup{ private Scroller mScroller; private float mOriMotionX; private float mLastMotionX; private VelocityTracker mVelocityTracker; private int mTouchState = TOUCH_STATE_REST; private static