Android ViewPager和Fragment实现顶部导航界面滑动效果、标签下的tab位置

在项目中，我们常常需要实现界面滑动切换的效果。例如，微信界面的左右滑动切换效果。那这种效果是怎么实现的？今天我就带大家简单了解ViewPager，并通过实例来实现该效果。

一. ViewPager 官方API

首先我们来看一下ViewPager官方给出的解释，如图：

具体意思如下：

Layout 管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑实现PagerAdapter接口来显示该效果。

ViewPager很多时候会结合Fragment一块使用，这种方法使得管理每个页面的生命周期变得很方便。其中，有一些adapter的具体实现，可以适合于这种ViewPager结合Fragment使用的情况。这些adapter包括：FragmentPagerAdapter,和 FragmentStatePagerAdapter。

而本文就是通过ViewPager结合Fragment利用FragmentpagerAdapter适配器来实现左右滑动的效果。

二.效果如下：

三.代码实现：

1.xml布局文件

1>主布局activity_main.xml

1. <span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <include layout="@layout/activity_main_top_tab" />  
8.   
9.     <android.support.v4.view.ViewPager  
10.         android:id="@+id/id_page_vp"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="0dp"  
13.         android:layout_weight="1" >  
14.     </android.support.v4.view.ViewPager>  
15.   
16. </LinearLayout></span>  

注意：布局中加载android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情况系统会自动引入)

2>顶部导航activity_main_top_tab.xml

1. <span style="font-family:Microsoft YaHei;font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="vertical" >  
6.   
7.     <LinearLayout  
8.         android:id="@+id/id_switch_tab_ll"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:orientation="horizontal"   
12.         android:baselineAligned="false"  
13.         >  
14.   
15.         <LinearLayout  
16.             android:id="@+id/id_tab_chat_ll"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="wrap_content"  
19.             android:layout_weight="1"  
20.             android:background="@drawable/guide_round_selector"  
21.             android:gravity="center"  
22.             android:orientation="horizontal"  
23.             android:padding="10dip" >  
24.   
25.             <TextView  
26.                 android:id="@+id/id_chat_tv"  
27.                 android:layout_width="wrap_content"  
28.                 android:layout_height="wrap_content"  
29.                 android:gravity="center"  
30.                 android:text="聊天"  
31.                 android:textColor="#0000FF"  
32.                 android:textSize="15dip" />  
33.         </LinearLayout>  
34.