首页 > 代码库 > 写一个android带动画效果的TabHost(类似微博客户端的切换效果)
写一个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=http://www.mamicode.com/"@drawable/tab_bottom_selected" />>
代码里先初始化: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下载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。