当前位置：移动技术网 > 移动技术>移动开发>Android > Android仿微信底部实现Tab选项卡切换效果

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

2019年07月24日 | 移动技术网移动技术 | 我要评论

在网上看了比较多的关于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: {

            //在第一个页面中

            }
          }
}

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