在项目中，我们常常需要实现界面滑动切换的效果。例如，微信界面的左右滑动切换效果。那这种效果是怎么实现的？今天我就带大家简单了解ViewPager，并通过实例来实现该效果。
一. ViewPager 官方API
首先我们来看一下ViewPager官方给出的解释，如图：
具体意思如下：
Layout管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑实现PagerAdapter接口来显示该效果。
ViewPager很多时候会结合Fragment一块使用，这种方法使得管理每个页面的生命周期变得很方便。其中，有一些adapter的具体实现，可以适合于这种ViewPager结合Fragment使用的情况。这些adapter包括：FragmentPagerAdapter,和FragmentStatePagerAdapter。
而本文就是通过ViewPager结合Fragment利用FragmentpagerAdapter适配器来实现左右滑动的效果。
二.效果如下：
三.代码实现：
1.xml布局文件
1>主布局activity_main.xml
<spanstyle="font-family:MicrosoftYaHei;font-size:18px;"><LinearLayoutxmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <includelayout="@layout/activity_main_top_tab"/> <android.support.v4.view.ViewPager android:id="@+id/id_page_vp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </android.support.v4.view.ViewPager> </LinearLayout></span> 注意：布局中加载android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情况系统会自动引入)
2>顶部导航activity_main_top_tab.xml
<spanstyle="font-family:MicrosoftYaHei;font-size:18px;"><LinearLayoutxmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:id="@+id/id_switch_tab_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:baselineAligned="false" > <LinearLayout android:id="@+id/id_tab_chat_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round_selector" android:gravity="center" android:orientation="horizontal" android:padding="10dip"> <TextView android:id="@+id/id_chat_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="聊天" android:textColor="#0000FF" android:textSize="15dip"/> </LinearLayout> <LinearLayout android:id="@+id/id_tab_friend_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round_selector" android:clickable="true" android:gravity="center" android:orientation="horizontal" android:padding="10dip" android:saveEnabled="false"> <TextView android:id="@+id/id_friend_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="好友" android:textColor="#000000" android:textSize="15dip"/> </LinearLayout> <LinearLayout android:id="@+id/id_tab_contacts_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/guide_round_selector" android:focusable="false" android:gravity="center" android:orientation="horizontal" android:padding="10dip"> <TextView android:id="@+id/id_contacts_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="通讯录" android:textColor="#000000" android:textSize="15dip"/> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/id_tab_line_iv" android:layout_width="200dp" android:layout_height="wrap_content" android:contentDescription="tab" android:background="@drawable/tab_selected_pressed_holo"> </ImageView> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#000000"/> </LinearLayout></span>
3>Fragment显示布局activity_tab_chat.xml，activity_tab_contacts.xml，activity_tab_friend.xml(只给出一个，其他类似) <spanstyle="font-family:MicrosoftYaHei;font-size:18px;"><LinearLayoutxmlns:android="/apk/res/android" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="聊天界面" android:textColor="#FF0000" android:textSize="20sp" android:gravity="center" ></TextView> </LinearLayout></span> 4>主函数MainActivity.java <spanstyle="font-family:MicrosoftYaHei;font-size:18px;">packagecom.example.viewpagerdemo; importjava.util.ArrayList; importjava.util.List; importandroid.graphics.Color; importandroid.os.Bundle; importandroid.support.v4.app.Fragment; importandroid.support.v4.app.FragmentActivity; importandroid.support.v4.view.ViewPager; importandroid.support.v4.view.ViewPager.OnPageChangeListener; importandroid.util.DisplayMetrics; importandroid.util.Log; importandroid.widget.ImageView; importandroid.widget.LinearLayout; importandroid.widget.TextView; publicclassMainActivityextendsFragmentActivity{ privateList<Fragment>mFragmentList=newArrayList<Fragment>(); privateFragmentAdaptermFragmentAdapter; privateViewPagermPageVp; /** *Tab显示内容TextView */ privateTextViewmTabChatTv,mTabContactsTv,mTabFriendTv; /** *Tab的那个引导线 */ privateImageViewmTabLineIv; /** *Fragment */ privateChatFragmentmChatFg; privateFriendFragmentmFriendFg; privateContactsFragmentmContactsFg; /** *ViewPager的当前选中页 */ privateintcurrentIndex; /** *屏幕的宽度 */ privateintscreenWidth; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findById(); init(); initTabLineWidth(); } privatevoidfindById(){ mTabContactsTv=(TextView)this.findViewById(R.id.id_contacts_tv); mTabChatTv=(TextView)this.findViewById(R.id.id_chat_tv); mTabFriendTv=(TextView)this.findViewById(R.id.id_friend_tv); mTabLineIv=(ImageView)this.findViewById(R.id.id_tab_line_iv); mPageVp=(ViewPager)this.findViewById(R.id.id_page_vp); } privatevoidinit(){ mFriendFg=newFriendFragment(); mContactsFg=newContactsFragment(); mChatFg=newChatFragment(); mFragmentList.add(mChatFg); mFragmentList.add(mFriendFg); mFragmentList.add(mContactsFg); mFragmentAdapter=newFragmentAdapter( this.getSupportFragmentManager(),mFragmentList); mPageVp.setAdapter(mFragmentAdapter); mPageVp.setCurrentItem(0); mPageVp.setOnPageChangeListener(newOnPageChangeListener(){ /** *state滑动中的状态有三种状态（0，1，2）1：正在滑动2：滑动完毕0：什么都没做。 */ @Override publicvoidonPageScrollStateChanged(intstate){ } /** *position:当前页面，及你点击滑动的页面offset:当前页面偏移的百分比 *offsetPixels:当前页面偏移的像素位置 */ @Override publicvoidonPageScrolled(intposition,floatoffset, intoffsetPixels){ LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)mTabLineIv .getLayoutParams(); Log.e("offset:",offset+""); /** *利用currentIndex(当前所在页面)和position(下一个页面)以及offset来 *设置mTabLineIv的左边距滑动场景： *记3个页面, *从左到右分别为0,1,2 *0->1;1->2;2->1;1->0 */ if(currentIndex==0&&position==0)//0->1 { lp.leftMargin=(int)(offset*(screenWidth*1.0/3)+currentIndex *(screenWidth/3)); }elseif(currentIndex==1&&position==0)//1->0 { lp.leftMargin=(int)(-(1-offset) *(screenWidth*1.0/3)+currentIndex *(screenWidth/3)); }elseif(currentIndex==1&&position==1)//1->2 { lp.leftMargin=(int)(offset*(screenWidth*1.0/3)+currentIndex *(screenWidth/3)); }elseif(currentIndex==2&&position==1)//2->1 { lp.leftMargin=(int)(-(1-offset) *(screenWidth*1.0/3)+currentIndex *(screenWidth/3)); } mTabLineIv.setLayoutParams(lp); } @Override publicvoidonPageSelected(intposition){ resetTextView(); switch(position){ case0: mTabChatTv.setTextColor(Color.BLUE); break; case1: mTabFriendTv.setTextColor(Color.BLUE); break; case2: mTabContactsTv.setTextColor(Color.BLUE); break; } currentIndex=position; } }); } /** *设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定) */ privatevoidinitTabLineWidth(){ DisplayMetricsdpMetrics=newDisplayMetrics(); getWindow().getWindowManager().getDefaultDisplay() .getMetrics(dpMetrics); screenWidth=dpMetrics.widthPixels; LinearLayout.LayoutParamslp=(LinearLayout.LayoutParams)mTabLineIv .getLayoutParams(); lp.width=screenWidth/3; mTabLineIv.setLayoutParams(lp); } /** *重置颜色 */ privatevoidresetTextView(){ mTabChatTv.setTextColor(Color.BLACK); mTabFriendTv.setTextColor(Color.BLACK); mTabContactsTv.setTextColor(Color.BLACK); } } </span>
注意：
1.MainActivity继承于FragmentActivity;
2.初始化导航条的宽度：initTabLineWidth()，由于本例给出的是3个界面切换，固长度为整个屏幕宽度的1/3;
3.监听事件OnPageChangeListener的onPageScrolled方法主要捕捉滑动事件;
其中给出了3个参数所表示的意义。根据滑动的4中变化(左-中-右-中-左)，给出导航条距离左边的边距，显示导航条滑动的效果。
5>Fragment适配器FragmentAdapter，继承于FragmentPagerAdapter <spanstyle="font-family:MicrosoftYaHei;font-size:18px;">packagecom.example.viewpagerdemo; importjava.util.ArrayList; importjava.util.List; importandroid.support.v4.app.Fragment; importandroid.support.v4.app.FragmentManager; importandroid.support.v4.app.FragmentPagerAdapter; publicclassFragmentAdapterextendsFragmentPagerAdapter{ List<Fragment>fragmentList=newArrayList<Fragment>(); publicFragmentAdapter(FragmentManagerfm,List<Fragment>fragmentList){ super(fm); this.fragmentList=fragmentList; } @Override publicFragmentgetItem(intposition){ returnfragmentList.get(position); } @Override publicintgetCount(){ returnfragmentList.size(); } } </span>
6>Fragment显示函数ChatFragment.java,ContactsFragment.java,FriendFragment.java(只给出一个，其他类似) <spanstyle="font-family:MicrosoftYaHei;font-size:18px;">packagecom.example.viewpagerdemo; importandroid.os.Bundle; importandroid.support.v4.app.Fragment; importandroid.view.LayoutInflater; importandroid.view.View; importandroid.view.ViewGroup; publicclassChatFragmentextendsFragment{ @Override publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){ super.onCreateView(inflater,container,savedInstanceState); ViewchatView=inflater.inflate(R.layout.activity_tab_chat,container,false); returnchatView; } @Override publicvoidonActivityCreated(BundlesavedInstanceState){ super.onActivityCreated(savedInstanceState); } } </span>
上面就是本文的所有内容。
