使用ViewPager和FragmentPagerAdapter实现Tab

前面我们分别利用ViewPager和Fragment实现了Tab效果。但是使用Fragment实现的Tab不能够左右滑动。如果我们既想使用Fragment又想让Tab能够滑动，那么怎么办呢？这 就是今天的方法，利用ViewPager和FragmentPagerAdapter来实现Tab。

没看过前两篇文章的读者可以点击下面的地址：

http://www.cnblogs.com/fuly550871915/p/4850056.html

废话不多说了，效果还是之前的效果。由于有些代码我们已经写过了。我们复用《使用Fragment实现Tab》这篇文章里的代码，保留所有的东西，只需要修改两个地方即可。

一、修改主布局

只需要把activity_main.xml的布局中间的改为ViewPager即可。代码如下：

 <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:orientation="vertical"
     >

     <include layout="@layout/top"/>

     <android.support.v4.view.ViewPager
         android:id="@+id/id_vp"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1">

     </android.support.v4.view.ViewPager>

     <include layout="@layout/bottum"/>"

 </LinearLayout>

二、修改MainAcitivty

其实方法跟第一篇文章《使用ViewPager实现Tab》类似，只不过是将适配器改为了FragmentPagerAdapter而已，那么相应的数据集里面的泛型也就应该是Fragment实例了。总结，如果前两篇文章你认真看了并做了，下面的代码还是挺简单的。具体如下：

 import java.util.ArrayList;
 import java.util.List;

 import android.os.Bundle;
 import android.app.Activity;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentPagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.Menu;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.widget.ImageButton;
 import android.widget.LinearLayout;

 public class MainActivity extends FragmentActivity implements OnClickListener{

     private ImageButton himg;
     private ImageButton simg;
     private ImageButton uimg;
     private ImageButton yimg;

     private Fragment hfrag;
     private Fragment sfrag;
     private Fragment ufrag;
     private Fragment yfrag;

     private LinearLayout hlay;
     private LinearLayout slay;
     private LinearLayout ulay;
     private LinearLayout ylay;

     private ViewPager vp;
     private FragmentPagerAdapter mAdapter;//适配器
     private List<Fragment> mDatas = new ArrayList<Fragment>();

     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         initView();//依旧是初始化

         initEvent();//初始化事件
     }

     private void initEvent() {
         //设定点击事件

         hlay.setOnClickListener(this);
         slay.setOnClickListener(this);
         ulay.setOnClickListener(this);
         ylay.setOnClickListener(this);

         vp.setOnPageChangeListener(new OnPageChangeListener() {

             public void onPageSelected(int arg0) {

                 resetImg();
                 int i = vp.getCurrentItem();

                 setTab(i);

             }

             public void onPageScrolled(int arg0, float arg1, int arg2) {

             }

             public void onPageScrollStateChanged(int arg0) {

             }
         });

     }

     private void initView() {
                 //获得按钮
                 himg = (ImageButton) findViewById(R.id.ibtn_hudie);
                 simg = (ImageButton) findViewById(R.id.ibtn_set);
                 uimg = (ImageButton) findViewById(R.id.ibtn_user);
                 yimg = (ImageButton) findViewById(R.id.ibtn_yang);

                 //获得底部的线性布局
                 hlay = (LinearLayout) findViewById(R.id.lay_hudie);
                 slay = (LinearLayout) findViewById(R.id.lay_set);
                 ulay = (LinearLayout) findViewById(R.id.lay_user);
                 ylay = (LinearLayout) findViewById(R.id.lay_yang);

                 //获取fragment
                 hfrag = new HFragment();
                 sfrag = new SFragment();
                 ufrag = new UFragment();
                 yfrag = new YFragment();

                 //加入数据集
                 mDatas.add(hfrag);
                 mDatas.add(sfrag);
                 mDatas.add(ufrag);
                 mDatas.add(yfrag);

                 vp = (ViewPager) findViewById(R.id.id_vp);

                 mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

                     public int getCount() {

                         return mDatas.size();
                     }

                     public Fragment getItem(int position) {

                         return mDatas.get(position);
                     }
                 };

                 vp.setAdapter(mAdapter);

     }

     public void onClick(View v) {

     resetImg();//将按钮复位

         switch(v.getId()){

         case R.id.lay_hudie:
             setSelected(0);
             break;
         case R.id.lay_set:
             setSelected(1);
             break;
         case R.id.lay_user:
             setSelected(2);
             break;
         case R.id.lay_yang:
             setSelected(3);
             break;
         }
     }

     private void setSelected(int i) {
         //需要将按钮变亮，且需要切换fragment的状体

                 setTab(i);
             vp.setCurrentItem(i);//设定当前的item    

     }

     //该方法用来设定按钮的高亮
     private void setTab(int i){
         switch(i){
         case 0:
             himg.setImageResource(R.drawable.hudie2);
             break;
         case 1:
             simg.setImageResource(R.drawable.set2);
             break;
         case 2:
             uimg.setImageResource(R.drawable.user2);
             break;
         case 3:
             yimg.setImageResource(R.drawable.yang2);
             break;
         }
     }

     private void resetImg() {

         himg.setImageResource(R.drawable.hudie);
         simg.setImageResource(R.drawable.set);
         uimg.setImageResource(R.drawable.user);
         yimg.setImageResource(R.drawable.yang);

     }
 }

好了，至此完成了所有的代码，快运行试试，是不是又可以左右滑动了。

三、总结

如果你的app中不要求具有左右滑动的功能，建议使用Fragment实现Tab。如果想有滑动效果的话，建议使用ViewPager和FragmenPagerAdapter来实现Tab。总之，使用Fragment可以大大提高我们的代码质量。