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

 更新时间:2020年04月17日 16:34:22   作者:wzben  
这篇文章主要为大家介绍了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.ViewPager
  android:id="@+id/viewpager"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" >
 
</RelativeLayout>

怎么实现,按相应的按钮跳转到viewPaper中相应的视图呢?很简单,只要为按钮设置监听,然后调用viewPaper的setCurrentItem()这个函数就行。

对于相应的页面,我们的按钮也应该有相应的变化,如上图我们的按钮中的英文变成了√。这个只要在viewPaper的监听器中重载onPageSelected()这个函数就行,

每个页面被选中,都会调用这个函数。在这个函数里判断当前的页面是哪一个,然后再对按钮做出相应的改变即可。
onCreate的代码

 //设置viewPaper
 ViewPager pager = null;
 ArrayList<View> viewContainter = new ArrayList<View>();

 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_add);

  //实例化ViewPaper
  pager = (ViewPager) this.findViewById(R.id.viewpager3);



  //设置按钮跳转到相应的viewPaper页面
  
  按钮1.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {

    //跳到第一个页面
    pager.setCurrentItem(0);

   }
  });

  按钮2.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {

    //第二个页面
    pager.setCurrentItem(1);

   }
  });
  
  按钮3.setOnClickListener(new View.OnClickListener() {
   @Override
   public 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个view
  viewContainter.add(view1);
  viewContainter.add(view2);
  viewContainter.add(view3);
  

  //设置适配器 这里的代码复制即可
  pager.setAdapter(new PagerAdapter() {


   //viewpager中的组件数量
   @Override
   public int getCount() {
    return viewContainter.size();
   }

   //滑动切换的时候销毁当前的组件

   @Override
   public void destroyItem(ViewGroup container, int position,
         Object object) {
    ((ViewPager) container).removeView(viewContainter.get(position));
   }

   //每次滑动的时候生成的组件
   @Override
   public Object instantiateItem(ViewGroup container, int position) {
    ((ViewPager) container).addView(viewContainter.get(position));
    return viewContainter.get(position);
   }

   @Override
   public boolean isViewFromObject(View arg0, Object arg1) {
    return arg0 == arg1;
   }

   @Override
   public int getItemPosition(Object object) {
    return super.getItemPosition(object);
   }


  });

  //页面变化时的监听 改变按钮
  pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   @Override
   public void onPageScrolled(int i, float v, int i1) {

   }

   @Override
   public 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;



    }

   }

   @Override
   public void onPageScrollStateChanged(int i) {

   }
  });

 }

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

@Override
   public Object instantiateItem(ViewGroup container, int position) {
    ((ViewPager) container).addView(viewContainter.get(position));

    switch (position){

     case 0: {

      //在第一个页面中

      }
     }
}

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

相关文章

  • Android Studio Gradle插件版本与Gradle版本之间的对应关系

    Android Studio Gradle插件版本与Gradle版本之间的对应关系

    今天小编就为大家分享一篇关于Android Studio Gradle插件版本与Gradle版本之间的对应关系,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • Android自定义View实现动画效果详解

    Android自定义View实现动画效果详解

    这篇文章主要为大家详细介绍了Android如何通过自定义View实现动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-02-02
  • Android应用中设置alpha值来制作透明与渐变效果的实例

    Android应用中设置alpha值来制作透明与渐变效果的实例

    这篇文章主要介绍了Android应用中设置alpha值来制作透明与渐变效果的实例,展示了基础的透明渐变动画的编写方法,需要的朋友可以参考下
    2016-04-04
  • Android 原始资源文件的使用详解

    Android 原始资源文件的使用详解

    本篇文章是对Android中原始资源文件的使用进行了详细的分析介绍,需要的朋友参考下
    2013-05-05
  • React Native中Android物理back键按两次返回键即退出应用

    React Native中Android物理back键按两次返回键即退出应用

    这篇文章主要给大家介绍了关于React Native中Android物理back键按两次返回键即退出应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • Android AndBase框架使用封装好的函数完成Http请求(三)

    Android AndBase框架使用封装好的函数完成Http请求(三)

    这篇文章主要介绍了Android AndBase框架使用封装好的函数完成Http请求的相关资料,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • Android自定义view绘制圆环占比动画

    Android自定义view绘制圆环占比动画

    这篇文章主要为大家详细介绍了Android自定义view绘制圆环占比动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 解析Android中的Serializable序列化

    解析Android中的Serializable序列化

    这篇文章主要介绍了Android中的Serializable序列化技术,通过Serializable可以需要的朋友可以参考下
    2016-03-03
  • 基于Android实现烟花效果

    基于Android实现烟花效果

    这篇文章文章我们将介绍如何通过Canvas 2D坐标系实现粒子效果,文中通过代码示例和图文结合介绍的非常详细,对大家的学习或工作有一定的帮助,感兴趣的同学可以自己动手尝试一下
    2023-11-11
  • 如何利用Kotlin实现极简回调

    如何利用Kotlin实现极简回调

    这篇文章主要给大家介绍了关于如何利用Kotlin实现极简回调的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01

最新评论