给TabHost加上ViewPager滑动效果

原创 2015年07月07日 11:33:40

先说一下第一个示例,我做了一个可以拖动但是无法停留的效果,这个效果的实现是在TabHost的setCurrentTab方法里面加上动画,所以得自己写一个TabHost继承系统的TabHost并重写setCurrentTab方法。

那么我就把这个效果的代码给大家贴出来

package com.hwh.tab;  
  1.   
  2.   
  3. import android.content.Context;  
  4. import android.content.res.Resources;  
  5. import android.util.AttributeSet;  
  6. import android.util.DisplayMetrics;  
  7. import android.view.animation.Animation;  
  8. import android.view.animation.TranslateAnimation;  
  9. import android.widget.TabHost;  
  10.   
  11.   
  12. public class CustomTabHost extends TabHost {  
  13.     private Animation slideLeftIn;  
  14.     private Animation slideLeftOut;  
  15.     private Animation slideRightIn;  
  16.     private Animation slideRightOut;  
  17.   
  18.     private int tabCount;// tab页总数  
  19.     private int device_x; //屏幕宽  
  20.   
  21.     public CustomTabHost(Context context, AttributeSet attrs) {  
  22.         super(context, attrs);  
  23.         Resources resources = getResources();  
  24.         DisplayMetrics metrics=resources.getDisplayMetrics();  
  25.         device_x=metrics.widthPixels;  
  26.           
  27.         initAnima();  
  28.     }  
  29.   
  30.     private void initAnima() {  
  31.         slideLeftIn=new TranslateAnimation(device_x, 011);  
  32.         slideLeftIn.setDuration(500);  
  33.           
  34.         slideRightIn=new TranslateAnimation(-device_x,0,1,1);  
  35.         slideRightIn.setDuration(500);  
  36.           
  37.         slideLeftOut=new TranslateAnimation(0,-device_x,1,1);  
  38.         slideLeftOut.setDuration(500);  
  39.           
  40.         slideRightOut=new TranslateAnimation(0,device_x,1,1);  
  41.         slideRightOut.setDuration(500);  
  42.     }  
  43.       
  44.     public void setDevice_X(int device_x)  
  45.     {  
  46.         this.device_x=device_x;  
  47.         initAnima();  
  48.     }  
  49.   
  50.     public int getTabCount() {  
  51.         return tabCount;  
  52.     }  
  53.   
  54.     @Override  
  55.     public void addTab(TabSpec tabSpec) {  
  56.         tabCount++;  
  57.         super.addTab(tabSpec);  
  58.     }  
  59.   
  60.       
  61.     @Override  
  62.     public void setCurrentTab(int index) {  
  63.         // index为要切换到的tab页索引,currentTabIndex为现在要当前tab页的索引  
  64.         int currentTabIndex = getCurrentTab();  
  65.   
  66.         // 设置当前tab页退出时的动画  
  67.         if (null != getCurrentView()) {// 第一次进入MainActivity时,getCurrentView()取得的值为空  
  68.             if (currentTabIndex == (tabCount - 1) && index == 0) {// 处理边界滑动  
  69.                 getCurrentView().startAnimation(slideLeftOut);  
  70.             } else if (currentTabIndex == 0 && index == (tabCount - 1)) {// 处理边界滑动  
  71.                 getCurrentView().startAnimation(slideRightOut);  
  72.             } else if (index > currentTabIndex) {// 非边界情况下从右往左fleep  
  73.                 getCurrentView().startAnimation(slideLeftOut);  
  74.             } else if (index < currentTabIndex) {// 非边界情况下从左往右fleep  
  75.                 getCurrentView().startAnimation(slideRightOut);  
  76.             }  
  77.         }  
  78.   
  79.         super.setCurrentTab(index);  
  80.   
  81.         // 设置即将显示的tab页的动画  
  82.         if (currentTabIndex == (tabCount - 1) && index == 0) {// 处理边界滑动  
  83.             getCurrentView().startAnimation(slideLeftIn);  
  84.         } else if (currentTabIndex == 0 && index == (tabCount - 1)) {// 处理边界滑动  
  85.             getCurrentView().startAnimation(slideRightIn);  
  86.         } else if (index > currentTabIndex) {// 非边界情况下从右往左fleep  
  87.             getCurrentView().startAnimation(slideLeftIn);  
  88.         } else if (index < currentTabIndex) {// 非边界情况下从左往右fleep  
  89.             getCurrentView().startAnimation(slideRightIn);  
  90.         }  
  91.     }  
  92. }  
这个思路是从网上找到的。TabHost的切换动画有了,怎么实现拖动呢。这个就很简单了,在Activity里重写OnTouth方法
@Override  
  1.     public boolean onTouchEvent(MotionEvent event) {  
  2.         switch (event.getAction()) {  
  3.         case MotionEvent.ACTION_DOWN:  
  4.             start_x=(int) event.getX();  
  5.             break;  
  6.         case MotionEvent.ACTION_UP:  
  7.             end_x=(int) event.getX();  
  8.             int len=end_x-start_x;  
  9.             if(len<</SPAN>0)  
  10.             {  
  11.                 if(Math.abs(len)>device_x/2)  
  12.                 {  
  13.                     index+=1;  
  14.                 }  
  15.                 //向右  
  16.             }if(len>0)  
  17.             {  
  18.                 if(Math.abs(len)>device_x/2)  
  19.                 {  
  20.                     index-=1;  
  21.                 }  
  22.             }  
  23.             if(index==count)  
  24.             {  
  25.                 index=count-1;  
  26.             }  
  27.             if(index<</SPAN>0)  
  28.             {  
  29.                 index=0;  
  30.             }  
  31.             tabHost.setCurrentTab(index);  
  32.             break;  
  33.         }  
  34.         return false;  
  35.     }  
这样就可以拖动了,但是没办法实现像ViewPager那样可以拖动一半的效果。

基于这个原因,我就想能不能把ViewPager和TabHost合并呢,但是有个问题,ViewPager要的是个View,而TabHost里面是Activity,怎么把Activity里的View给得到呢。

一个重要的类:LocalActivityManager,此类有个方法可以得到activity的View,使用 startActivity(id, intent).getDecorView()即可得到,其中id可以随意写,intent就是对应activity的意图。思路说完了,下面把代码贴出来。

显示布局文件:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@android:id/tabhost"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent" >  
  6.   
  7.     <LinearLayout  
  8.         android:id="@+id/linearLayout1"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent"  
  11.         android:orientation="vertical" >  
  12.   
  13.         <TabWidget  
  14.             android:id="@android:id/tabs"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="wrap_content" >  
  17.         </TabWidget>  
  18.   
  19.     <android.support.v4.view.ViewPager  
  20.         android:id="@+id/vPager"  
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="wrap_content"  
  23.         android:layout_gravity="center"  
  24.         android:layout_weight="1.0"  
  25.         android:background="#000000"  
  26.         android:flipInterval="30"  
  27.         android:persistentDrawingCache="animation" />  
  28.   
  29.         <FrameLayout  
  30.             android:id="@android:id/tabcontent"  
  31.             android:layout_width="wrap_content"  
  32.             android:layout_height="wrap_content"  
  33.             android:visibility="gone" >  
  34.         </FrameLayout>  
  35.     </LinearLayout>  
  36.   
  37. </TabHost>  
Java代码:
  1. package com.hwh.demo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.LocalActivityManager;  
  7. import android.app.TabActivity;  
  8. import android.content.Context;  
  9. import android.content.Intent;  
  10. import android.graphics.BitmapFactory;  
  11. import android.graphics.Matrix;  
  12. import android.os.Bundle;  
  13. import android.os.Parcelable;  
  14. import android.support.v4.view.PagerAdapter;  
  15. import android.support.v4.view.ViewPager;  
  16. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  17. import android.util.DisplayMetrics;  
  18. import android.util.Log;  
  19. import android.view.View;  
  20. import android.view.View.OnClickListener;  
  21. import android.view.Window;  
  22. import android.view.animation.Animation;  
  23. import android.view.animation.TranslateAnimation;  
  24. import android.widget.ImageView;  
  25. import android.widget.TabHost;  
  26. import android.widget.TabHost.OnTabChangeListener;  
  27. import android.widget.TextView;  
  28.   
  29. public class DemoActivity extends TabActivity {  
  30.   
  31.         //页卡内容  
  32.         private ViewPager mPager;  
  33.         // Tab页面列表  
  34.         private List<View> listViews;   
  35.         // 当前页卡编号  
  36.         private LocalActivityManager manager = null;  
  37.         private final Context context = DemoActivity.this;  
  38.         private TabHost mTabHost;  
  39.   
  40.       
  41.     @Override  
  42.     public void onCreate(Bundle savedInstanceState) {  
  43.         super.onCreate(savedInstanceState);  
  44.           
  45.                   
  46.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  47.         setContentView(R.layout.main);  
  48.           
  49.         mTabHost =  getTabHost();    
  50.         mTabHost.addTab(mTabHost.newTabSpec("0").setIndicator(    
  51.                 "正在听").setContent(    
  52.                 new Intent(this, AActivity.class)));   
  53.           
  54.         mTabHost.addTab(mTabHost.newTabSpec("1").setIndicator(    
  55.                 "本地听").setContent(    
  56.                 new Intent(this, BActivity.class)));   
  57.           
  58.         mTabHost.addTab(mTabHost.newTabSpec("2").setIndicator(    
  59.                 "网络听").setContent(    
  60.                 new Intent(this, CActivity.class)));    
  61.           
  62.         mTabHost.setCurrentTab(0);    
  63.           
  64.         //tabhost改变同样改变ViewPager的内容  
  65.         mTabHost.setOnTabChangedListener(new OnTabChangeListener() {  
  66.               
  67.             @Override  
  68.             public void onTabChanged(String tabId) {  
  69.                 mPager.setCurrentItem(Integer.parseInt(tabId));  
  70.             }  
  71.         });  
  72.           
  73.         manager = new LocalActivityManager(thistrue);  
  74.         manager.dispatchCreate(savedInstanceState);  
  75.           
  76.         InitViewPager();  
  77.     }  
  78.       
  79.           
  80.         private void InitViewPager() {  
  81.                 mPager = (ViewPager) findViewById(R.id.vPager);  
  82.                 listViews = new ArrayList<View>();  
  83.                 MyPagerAdapter mpAdapter = new MyPagerAdapter(listViews);  
  84.                 Intent intent = new Intent(context, AActivity.class);  
  85.                 listViews.add(getView("A", intent));  
  86.                 Intent intent2 = new Intent(context, BActivity.class);  
  87.                 listViews.add(getView("B", intent2));  
  88.                 Intent intent3 = new Intent(context, CActivity.class);  
  89.                 listViews.add(getView("C", intent3));  
  90.                 mPager.setAdapter(mpAdapter);  
  91.                 mPager.setCurrentItem(0);  
  92.                 mPager.setOnPageChangeListener(new MyOnPageChangeListener());  
  93.         }  
  94.           
  95.           
  96.           
  97.         public class MyPagerAdapter extends PagerAdapter {  
  98.                 public List<View> mListViews;  
  99.   
  100.                 public MyPagerAdapter(List<View> mListViews) {  
  101.                         this.mListViews = mListViews;  
  102.                 }  
  103.   
  104.                 @Override  
  105.                 public void destroyItem(View arg0, int arg1, Object arg2) {  
  106.                         ((ViewPager) arg0).removeView(mListViews.get(arg1));  
  107.                 }  
  108.   
  109.                 @Override  
  110.                 public void finishUpdate(View arg0) {  
  111.                 }  
  112.   
  113.                 @Override  
  114.                 public int getCount() {  
  115.                         return mListViews.size();  
  116.                 }  
  117.   
  118.                 @Override  
  119.                 public Object instantiateItem(View arg0, int arg1) {  
  120.                         ((ViewPager) arg0).addView(mListViews.get(arg1), 0);  
  121.                         return mListViews.get(arg1);  
  122.                 }  
  123.   
  124.                 @Override  
  125.                 public boolean isViewFromObject(View arg0, Object arg1) {  
  126.                         return arg0 == (arg1);  
  127.                 }  
  128.   
  129.                 @Override  
  130.                 public void restoreState(Parcelable arg0, ClassLoader arg1) {  
  131.                 }  
  132.   
  133.                 @Override  
  134.                 public Parcelable saveState() {  
  135.                         return null;  
  136.                 }  
  137.   
  138.                 @Override  
  139.                 public void startUpdate(View arg0) {  
  140.                 }  
  141.         }  
  142.   
  143.   
  144.           
  145.         public class MyOnPageChangeListener implements OnPageChangeListener {  
  146.   
  147.                 @Override  
  148.                 public void onPageSelected(int arg0) {  
  149.                         switch (arg0) {  
  150.                         case 0:  
  151.                                 mTabHost.setCurrentTab(0);    
  152.                                 break;  
  153.                         case 1:  
  154.                                 mTabHost.setCurrentTab(1);  
  155.                                 break;  
  156.                         case 2:  
  157.                                 mTabHost.setCurrentTab(2);  
  158.                                 break;  
  159.                         }  
  160.                 }  
  161.   
  162.                 @Override  
  163.                 public void onPageScrolled(int arg0, float arg1, int arg2) {  
  164.                 }  
  165.   
  166.                 @Override  
  167.                 public void onPageScrollStateChanged(int arg0) {  
  168.                 }  
  169.         }  
  170.           
  171.         private View getView(String id,Intent intent)  
  172.         {  
  173.                 return manager.startActivity(id, intent).getDecorView();  
  174.         }  
  175. }  
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用TabHost和ViewPager实现页面切换

在android的开发过程中经常会遇到页面切换的问题,其中一个解决办法是使用fragment加Handler来实现,不过有些情况下这种方法并不是最好的选择。比如,你需要滑动切换页面的时候。这时使用Ta...
  • wode_dream
  • wode_dream
  • 2015年01月04日 10:54
  • 5403

Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡

 《Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡》 之前基于github上的第三方开源控件ViewPagerIndicator的UnderlinePageIn...
  • zhangphil
  • zhangphil
  • 2015年03月31日 11:21
  • 2469

首页-底部Tab导航(菜单栏)的实现:FragmentTabHost+ViewPager+Fragment

前言Android开发中使用底部菜单栏的频次非常高,这篇文章主要讲解的是用FragmentTabHost+ViewPager+Fragment实现首页底部Tab菜单栏...
  • carson_ho
  • carson_ho
  • 2016年05月30日 08:26
  • 11311

ViewPager做成可滑动切换的Tabhost的效果

  • 2015年01月23日 09:51
  • 1.62MB
  • 下载

使用RadioGroup+ViewPager+Fragment实现带滑动的页卡效果TabHost时遇到的问题

最近的项目中有一两个界面需要实现带滑动的页卡效果,我这次的需求是大概是这样的:有三个tab,左边的tab要求他的左上角与左下角都是带圆角的,右上角和右下角都是不带圆角的。中间的tab左上角与左下角右上...
  • dkdjfkdjfk
  • dkdjfkdjfk
  • 2015年04月27日 23:45
  • 955

使用自定义RadioButton和ViewPager实现TabHost效果和带滑动的页卡效果。

在工作中又很多需求都不是android系统自带的控件可以达到效果的,内置的TabHost就是,只能达到简单的效果 ,所以这个时候就要自定义控件来达到效果:这个效果就是: 使用自定义RadioButto...
  • dyllove98
  • dyllove98
  • 2013年04月17日 20:54
  • 3318

Fragment嵌套ViewPager加上RadioButton实现微信页面滑动点击效果

最近研究了一下各大app的页面,很多都是采用了点击加滑动来切换页面的操作逻辑,其实实现这种功能有很多方法,最常见的就是Fragment里嵌套ViewPager,然后在底部加上一组RadioButton...
  • u011780646
  • u011780646
  • 2015年02月06日 10:45
  • 1133

ViewPager+Fragment替代TabHost效果的简单示例

  • 2014年12月04日 15:35
  • 1.28MB
  • 下载

在ViewPager+Fragment实现Tabhost基础之上实现滑动到当前Fragment加载网络数据

处女贴,欢迎拍砖!!!      关于ViewPager+Fragment实现Tabhost相信大家都会了,网上资源很多,感谢开源!!!本文主要是实现滑动到当前Fragment加载网络数据。 1、...
  • Blow_
  • Blow_
  • 2014年10月18日 16:07
  • 593

TabHost+ViewPager实现 点击选项卡和滑动界面都可以切换页面

1. TabHostsu http://blog.csdn.net/shulianghan/article/details/18233209
  • mutougege
  • mutougege
  • 2014年05月25日 17:08
  • 871
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:给TabHost加上ViewPager滑动效果
举报原因:
原因补充:

(最多只允许输入30个字)