正文

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

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0723

这篇文章主要为大家介绍了Android仿微信底部实现Tab选项卡切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

 直接点击或者是滑动界面，都可以转到相应的页面。

效果图：

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

 原理是用了三个按钮和viewpaper，抛弃了titlepagertabstrip。

 viewpaper通俗的说，它是一个装页面的容器。如上图我有三个不同的界面，是因为我把三个view加了进去。然后再把这个viewpaper加到主界面的布局中。

这样，主界面上就有三个按钮，按钮下方是一个viewpaper，这个viewpaper里面有三个view，我每滑一下或点击按钮就会跳到相应的view。

就是说我们看到的，其实都是主界面，按钮是一直在那的。我们只是不断的转换viewpaper这个容器里面的视图而已。

主界面的布局代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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的代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
//设置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这个函数里面指定。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
@override
      public object instantiateitem(viewgroup container, int position) {
        ((viewpager) container).addview(viewcontainter.get(position));
 
        switch (position){
 
          case 0: {
 
            //在第一个页面中
 
            }
          }
}

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