写一个android带动画效果的TabHost(类似微博客户端的切换效果)
来源:互联网 发布:网络与新媒体专业好吗 编辑:程序博客网 时间:2024/05/21 17:42
先上图:
这个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下载
0 1
- 写一个android带动画效果的TabHost(类似微博客户端的切换效果)
- 写了一个android带动画翻页效果的程序
- 【Android进阶】自定义带动画切换效果的ViewPager
- Android中使用TabHost实现类似标签栏的效果
- iCarousel 使用 (类似iOS9任务切换动画的效果)
- imageVIew自带的动画效果(类似TOM…
- android google 自带的下拉刷新 类似nice的加载数据动画效果
- Android Activity切换动画效果的修改
- Android ViewPager的切换动画效果PageTransformer
- Android Fragment切换时的动画效果
- 用Fragment实现tabhost的切换效果
- Android带动画效果的弹窗
- Android开发:带动画的分享效果
- 带缩放动画效果的图片切换的功能实现
- 带标签的viewpager自动切换+滑动切换+点击标签切换 带动画效果
- Android学习笔记(25):带动画效果的View切换ViewAnimator及其子类
- Activity的动画切换效果
- ViewPager 的切换动画效果
- 简单的Linux command命令
- C++ primer学习笔记 第8章
- 博客浏览:oracle创建表空间
- jsp页面中,el表达式获取list长度
- 2037 今年暑假不AC
- 写一个android带动画效果的TabHost(类似微博客户端的切换效果)
- 虚拟机跟主机不在同一网段
- 数组字符串系列之,将矩阵逆时针旋转90度,要求使用最少的额外空间
- JQuery源码分析-02正则表达式-RegExp-常用正则表达式
- 坦克大战GUI版(java)
- C++ builder 中 ListView 定位焦点到某一行。
- MapReduce 生成Hfile 的Mrunit单元测试提示Serialization空指针
- Error: The output jar is empty. Did you specify the proper '-keep' options?
- 2039 三角形