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: { //在第一个页面中 } } }
以上就是本文的全部内容,希望对大家的学习有所帮助。
下一篇: PHP,咸鱼翻生?