Android仿微信底部实现Tab选项卡切换效果

在网上看了比较多的关于Tab的教程，发现都很杂乱。比较多的用法是用TitlePagerTabStrip和ViewPaper。不过TitlePagerTabStrip有个很大的缺陷，Tab里面的内容刚进去是没有的，要滑一次才能加载出来。而且滑动的时候，Tab里面的内容位置不是固定的，滑倒最后会出现一片空白，非常不美观。虽然有其他的补救方法，但是非常的麻烦，所以我就按照自己的方法实现了一个，功能不错而且非常简单。
直接点击或者是滑动界面，都可以转到相应的页面。
效果图：

原理是用了三个按钮和ViewPaper，抛弃了TitlePagerTabStrip。
ViewPaper通俗的说，它是一个装页面的容器。如上图我有三个不同的界面，是因为我把三个view加了进去。然后再把这个viewPaper加到主界面的布局中。
这样，主界面上就有三个按钮，按钮下方是一个viewPaper，这个viewPaper里面有三个view，我每滑一下或点击按钮就会跳到相应的view。
就是说我们看到的，其实都是主界面，按钮是一直在那的。我们只是不断的转换viewPaper这个容器里面的视图而已。
主界面的布局代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity" ><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="wrap_content"android:layout_height="wrap_content" ></RelativeLayout>

怎么实现，按相应的按钮跳转到viewPaper中相应的视图呢？很简单，只要为按钮设置监听，然后调用viewPaper的setCurrentItem（）这个函数就行。
对于相应的页面，我们的按钮也应该有相应的变化，如上图我们的按钮中的英文变成了√。这个只要在viewPaper的监听器中重载onPageSelected（）这个函数就行，
每个页面被选中，都会调用这个函数。在这个函数里判断当前的页面是哪一个，然后再对按钮做出相应的改变即可。
onCreate的代码

 //设置viewPaperViewPager pager = null;ArrayList<View> viewContainter = new ArrayList<View>（）;@Overrideprotected void onCreate（Bundle savedInstanceState） {super.onCreate（savedInstanceState）;setContentView（R.layout.activity_add）;//实例化ViewPaperpager = （ViewPager） this.findViewById（R.id.viewpager3）;//设置按钮跳转到相应的viewPaper页面按钮1.setOnClickListener（new View.OnClickListener（） {@Overridepublic void onClick（View v） {//跳到第一个页面pager.setCurrentItem（0）;}}）;按钮2.setOnClickListener（new View.OnClickListener（） {@Overridepublic void onClick（View v） {//第二个页面pager.setCurrentItem（1）;}}）;按钮3.setOnClickListener（new View.OnClickListener（） {@Overridepublic void onClick（View v） {//第三个页面pager.setCurrentItem（2）;}}）;//为viewPaper设置内容//view是我们放进viewPaper里面的东西，要为它设置好布局，再放进去View view1 = LayoutInflater.from（this）.inflate（R.layout.自己的布局文件1, null）;View view2 = LayoutInflater.from（this）.inflate（R.layout.自己的布局文件2, null）;View view3 = LayoutInflater.from（this）.inflate（R.layout.自己的布局文件3, null）;//这是个ArrayList,加进去了3个viewviewContainter.add（view1）;viewContainter.add（view2）;viewContainter.add（view3）;//设置适配器 这里的代码复制即可pager.setAdapter（new PagerAdapter（） {//viewpager中的组件数量@Overridepublic int getCount（） {return viewContainter.size（）;}//滑动切换的时候销毁当前的组件@Overridepublic void destroyItem（ViewGroup container, int position,Object object） {（（ViewPager） container）.removeView（viewContainter.get（position））;}//每次滑动的时候生成的组件@Overridepublic Object instantiateItem（ViewGroup container, int position） {（（ViewPager） container）.addView（viewContainter.get（position））;return viewContainter.get（position）;}@Overridepublic boolean isViewFromObject（View arg0, Object arg1） {return arg0 == arg1;}@Overridepublic int getItemPosition（Object object） {return super.getItemPosition（object）;}}）;//页面变化时的监听 改变按钮pager.setOnPageChangeListener（new ViewPager.OnPageChangeListener（） {@Overridepublic void onPageScrolled（int i, float v, int i1） {}@Overridepublic void onPageSelected（int i） {switch （i） {//如果是第一个页面case 0:按钮1.setText（"√"）;按钮2.setText（"TAB2"）;按钮3.setText（"TAB3"）;break;//如果是第二个页面case 1:按钮1.setText（"TAB1"）;按钮2.setText（"√"）;按钮3.setText（"TAB3"）;break;//如果是第三个页面case 1:按钮1.setText（"TAB1"）;按钮2.setText（"TAB2"）;按钮3.setText（"√"）;break;}}@Overridepublic void onPageScrollStateChanged（int i） {}}）;}

想用到每个view里面的控件的话，在主界面上是找不到这些控件的，都是空的。必须在instantiateItem这个函数里面指定。

@Overridepublic Object instantiateItem（ViewGroup container, int position） {（（ViewPager） container）.addView（viewContainter.get（position））;switch （position）{case 0: {//在第一个页面中}}}

以上就是本文的全部内容，希望对大家的学习有所帮助。