viewpager + fragment实现滑动切换效果

先上一张效果图（非动图，但是可以实现滑动切换，点击下方按钮，也可以进行切换）：

MainActivity之中的代码

public class Main2Activity extends AppCompatActivity implements View.OnClickListener{
    private TextView title;
    private  oneFragment oFragment;
    private  twoFragment tFragment;
    private  threeFragment thFragment;
    private  fourFragment fFragment;
    private List<Fragment> mFragmentList = new ArrayList<Fragment>();
    private FragmentAdapter mFragmentAdapter;
    private ViewPager vp;
    String[] titles = new String[]{"消息", "联系人", "动态", "设置"};
    private Button btn1,btn2,btn3,btn4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去除工具栏
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main2);
        initViews();
        mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);
        //该方法用来设置当前显示页面左右两边各缓存的页面数。
        // ViewPager的缓存为4帧
        vp.setOffscreenPageLimit(4);
        //该方法为ViewPager设置适配器
        vp.setAdapter(mFragmentAdapter);

        //该方法设置显示item位置的界面。
        // 初始设置ViewPager选中第一帧
        vp.setCurrentItem(0);
        //ViewPager的监听事件
        vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                /*此方法在页面被选中时调用*/
                title.setText(titles[position]);
                changeTextColor(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                /*此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。
                arg0 ==1的时辰默示正在滑动，
                arg0==2的时辰默示滑动完毕了，
                arg0==0的时辰默示什么都没做。*/
            }
        });


    }
    /**
     * 点击底部Text 动态修改ViewPager的内容
     */

    public void onClick(View v) {
        switch (v.getId()){
            case R.id.bb1:
                vp.setCurrentItem(0,true);
                break;
            case R.id.bb2:
                vp.setCurrentItem(1,true);
                break;
            case R.id.bb3:
                vp.setCurrentItem(2,true);
                break;
            case R.id.bb4:
                vp.setCurrentItem(3,true);
                break;
        }
    }
    public class FragmentAdapter extends FragmentPagerAdapter {

        List<Fragment> fragmentList = new ArrayList<Fragment>();

        public FragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) {
            super(fm);
            this.fragmentList = fragmentList;
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }

    }
    /**
     * 初始化布局View
     */
    private void initViews() {
        title = (TextView) findViewById(R.id.title);
        btn1 = findViewById(R.id.bb1);
        btn2 = findViewById(R.id.bb2);
        btn3 = findViewById(R.id.bb3);
        btn4 = findViewById(R.id.bb4);
        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);
        btn4.setOnClickListener(this);
        vp = (ViewPager) findViewById(R.id.mainViewPager);
        oFragment = new oneFragment();
        tFragment = new twoFragment();
        thFragment = new threeFragment();
        fFragment = new fourFragment();
        //给FragmentList添加数据
        mFragmentList.add(oFragment);
        mFragmentList.add(tFragment);
        mFragmentList.add(thFragment);
        mFragmentList.add(fFragment);

    }
    /*
        *由ViewPager的滑动修改底部导航Text的颜色
        */
    private void changeTextColor(int position) {
        if (position == 0) {
            btn1.setBackgroundResource(R.drawable.xx);
            btn3.setBackgroundResource(R.drawable.dt1);
            btn2.setBackgroundResource(R.drawable.lxr1);
            btn4.setBackgroundResource(R.drawable.sz1);

        } else if (position == 1) {
            btn1.setBackgroundResource(R.drawable.xx1);
            btn3.setBackgroundResource(R.drawable.dt1);
            btn2.setBackgroundResource(R.drawable.lxr);
            btn4.setBackgroundResource(R.drawable.sz1);
        } else if (position == 2) {
            btn1.setBackgroundResource(R.drawable.xx1);
            btn3.setBackgroundResource(R.drawable.dt);
            btn2.setBackgroundResource(R.drawable.lxr1);
            btn4.setBackgroundResource(R.drawable.sz1);
        } else if (position == 3) {
            btn1.setBackgroundResource(R.drawable.xx1);
            btn3.setBackgroundResource(R.drawable.dt1);
            btn2.setBackgroundResource(R.drawable.lxr1);
            btn4.setBackgroundResource(R.drawable.sz);
        }
    }
}

1.先对onCreat中的函数进行详细解释：

//去除工具栏
        getSupportActionBar().hide();

这个函数可以隐藏界面中的最上方蓝色标题框！

2.  调用了initViews();

这个函数是对布局文件进行初始化的一个函数，函数体在Activity的后面，如下：

 /**
     * 初始化布局View
     */
    private void initViews() {
        title = (TextView) findViewById(R.id.title);
        btn1 = findViewById(R.id.bb1);
        btn2 = findViewById(R.id.bb2);
        btn3 = findViewById(R.id.bb3);
        btn4 = findViewById(R.id.bb4);
        btn1.setOnClickListener(this);
        btn2.setOnClickListener(this);
        btn3.setOnClickListener(this);
        btn4.setOnClickListener(this);
        vp = (ViewPager) findViewById(R.id.mainViewPager);
        oFragment = new oneFragment();
        tFragment = new twoFragment();
        thFragment = new threeFragment();
        fFragment = new fourFragment();
        //给FragmentList添加数据
        mFragmentList.add(oFragment);
        mFragmentList.add(tFragment);
        mFragmentList.add(thFragment);
        mFragmentList.add(fFragment);

    }

3.

mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList);

为mFragmentAdapter初始化。

this.getSupportFragmentManager()

是为了获取能管理和当前Activity有关联的Fragment的FragmentManager

4.

vp.setOffscreenPageLimit(4);

//该方法用来设置当前显示页面左右两边各缓存的页面数。
        // ViewPager的缓存为4帧
        vp.setOffscreenPageLimit(4);

5.

//该方法为ViewPager设置适配器
        vp.setAdapter(mFragmentAdapter);

6.

//该方法为ViewPager设置适配器
        vp.setAdapter(mFragmentAdapter);

其实Activity里面都是有注释的。Activity里面出现了4个Fragment，代码如下（oneFragment.class）：

public class oneFragment extends Fragment {
    public oneFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.layout_fragment, container, false);
    }
}

layout_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tx1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="我是消息"
        android:textSize="40dp"
        android:gravity="center"/>

</LinearLayout>

main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
  >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ddd">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="消息"
            android:textColor="@android:color/black"
            android:textSize="25sp"/>
    </RelativeLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/mainViewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@drawable/bg_rb"
        android:paddingBottom="1dp"        >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb1"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/xx"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="消息"
                android:textSize="35sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb2"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/lxr1"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="联系人"
                android:textSize="35sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb3"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/dt1"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="动态"
                android:textSize="35sp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1">
            <Button
                android:id="@+id/bb4"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:background="@drawable/sz1"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="设置"
                android:textSize="35sp"/>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

ok,最基本最核心的东西都已经贴上去了！good  luck!