ActionBar + ViewPager实现左右滑动切换Tab页效果

来源:互联网 发布:轩辕网络新三板股票 编辑:程序博客网 时间:2024/05/16 22:47

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">废话不多说,先上一张效果图。</span>


        如上图所示,我们今天要实现的就是一个可以左右滑动切换Tab页的效果。这个效果比较简单,我们可以通过多种方法实现,今天我们就用ActionBar + ViewPager的方式去实现该效果。

布局如下:

activity_main.xml

<LinearLayout 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"    android:padding="0dp"    android:orientation="vertical"    tools:context=".MainActivity$PlaceholderFragment">    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:orientation="vertical">        <Button            android:id="@+id/add_tab"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/add_tab"/>        <Button            android:id="@+id/remove_tab"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/remove_tab"/>    </LinearLayout></LinearLayout>

fargment_mian.xml

fragment_tab.xml
布局文件比较简单,看下就可以了,接下来上代码:
TabFragment.java
TabFragment类就是一个基本的Fragment,里边仅有有一个TextView用来显示测试内容。
MainFragment.java
MainFragment类是主要的类,处理逻辑都在其中。

在该方法中,会修改ActionBar的显示模式,让它显示Tab
该方法为添加tab页的方法,再该方法中,现在ActionBar中添加一个Tab,然后再在viewPger中添加一个数据。
注意在给ActionBar添加Tab的时候,要给Tab添加一个TabListener监听,这样当点击Tab进行切换的时候,我们才会监听的到,从而添加各种处理。
同时,为了让点击切换Tab的时候,让下面ViewPager也显示相应的内容,还要设置ViewPager.setCurrentItem(int index)。
再左右滑动切换ViewPager页面的时候,为了让ActionBar的Tab页切换,还要给ViewPager添加一个OnPageChangeListener监听。当切换页面后,同事也设置ActionBar的选中Tab。
这样就可以实现左右滑动切换Tab效果了。但是上面还是有一个小Bug,就是点击Tab进行切换时,会触发TabListener的onTabReselected()方法,该方法会被重复选择已经被选中的Tab时触发。
我们来看下触发流程:点击Tab,触发onTabSelected()方法 --> 切换viewpager,设置setCurrentItem()--> 触发OnPageChangeListener监听 --> 设置ActionBar的选中Tab

因为最后一次设置的选择Tab已经被选中了,所以会触发TabListener的onTabReselected()方法。这里我们需要在onTabReselected()方法里判断下事件的来源,如果来源于ViewPager的OnPageChangeListener,则不进行处理;否则就进行处理。MainFragment类中的flag就是为了处理该问题设置的。

好了,到这里应该差不多,接下来说两句闲话。这是我第一次写技术博客,写到这里我都不知道上面到底都写了些什么东西,到现在才知道写技术博客根本不是一件容易的事情,除了研究技术,写demo外,还要想着怎么组织语言,怎么才能将文章写的通俗易懂,在这里不得不对那些将将文章写的通俗易懂又有干货的大神佩服的五体投地。

源码:链接: http://pan.baidu.com/s/1c0ri92K 密码: sre1

0 0
原创粉丝点击