使用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可以大大提高我们的代码质量。