Android viewPager+fragment实现滑页效果

先上图，手指在手机向左或者向右滑就可以实现相应的页面切换。

先看activity_main.xml文件，非常简单，主要是三个标题TextView和viewpager

<?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="fill_parent"
    android:layout_centerVertical="true"
    android:orientation="vertical"
    android:paddingTop="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginTop="5dp"
        android:orientation="horizontal"
        android:paddingLeft="20dp"
        android:paddingRight="20dp">

        <TextView
            android:id="@+id/tv_layout_one"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="0.5"
            android:gravity="center"
            android:text="one" />

        <TextView
            android:id="@+id/tv_layout_two"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="0.5"
            android:gravity="center"
            android:text="two" />

        <TextView
            android:id="@+id/tv_layout_three"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="0.5"
            android:gravity="center"
            android:text="three" />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_marginTop="5dp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

我们再看看相应的MainActivity需要准备些什么

package com.example.keranbin.view.activity;

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

import com.example.keranbin.view.R;
import com.example.keranbin.view.adapter.MFragmentPagerAdapter;
import com.example.keranbin.view.fragment.OneFragment;
import com.example.keranbin.view.fragment.ThreeFragment;
import com.example.keranbin.view.fragment.TwoFragment;

import java.util.ArrayList;

public class MainActivity extends FragmentActivity {
    private ViewPager viewPager;                         //页面viewpager
    private ArrayList<Fragment> fragmentlists;            //fragment集合,
    private MFragmentPagerAdapter mFragmentPagerAdapter;   //viewpager适配器
    private TextView tvOne;
    private TextView tvTwo;
    private TextView tvThree;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();         //初始化页面组件及一些数据
        setListener();      //对页面一些组件设置一些监听事件

    }


    //初始化页面组件及一些数据
    private void initView() {
        viewPager= (ViewPager) this.findViewById(R.id.vp);
        tvOne= (TextView) this.findViewById(R.id.tv_layout_one);
        tvTwo= (TextView) this.findViewById(R.id.tv_layout_two);
        tvThree= (TextView) this.findViewById(R.id.tv_layout_three);


        //初始化one two three的背景
        tvOne.setBackgroundResource(R.drawable.solid_half_elipse_blue_left);
        tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);
        tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);

        //往fragment集合里添加fragment
        fragmentlists=new ArrayList<Fragment>();
        OneFragment oneFragment=new OneFragment();
        TwoFragment twoFragment=new TwoFragment();
        ThreeFragment threeFragment=new ThreeFragment();
        fragmentlists.add(oneFragment);
        fragmentlists.add(twoFragment);
        fragmentlists.add(threeFragment);
        
        
        //初始化viewpager适配器
        initViewPagerAdapter();

    }


    //初始化viewpager适配器
    private void initViewPagerAdapter() {
        mFragmentPagerAdapter=new MFragmentPagerAdapter(getSupportFragmentManager(),fragmentlists);
        viewPager.setAdapter(mFragmentPagerAdapter);
        viewPager.setCurrentItem(0);
    }

    //对页面一些组件设置一些监听事件
    private void setListener() {
        //分别对one，two，three三个TextView设置点击监听事件，发生点击事件时改变相应的背景及viewpager的内容
        tvOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tvOne.setBackgroundResource(R.drawable.solid_half_elipse_blue_left);
                tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);
                tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);
                viewPager.setCurrentItem(0);
            }
        });

        tvTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left);
                tvTwo.setBackgroundResource(R.drawable.solid_blue_rectangle);
                tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);
                viewPager.setCurrentItem(1);
            }
        });

        tvThree.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left);
                tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);
                tvThree.setBackgroundResource(R.drawable.solid_half_elipse_blue_right);
                viewPager.setCurrentItem(2);
            }
        });




        //对页面viewpager设置监听事件
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //页面滑动时改变"one"，"two","three"三个TextView的背景颜色
                if(position==0){
                    tvOne.setBackgroundResource(R.drawable.solid_half_elipse_blue_left);
                    tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);
                    tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);
                }else if(position==1){
                    tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left);
                    tvTwo.setBackgroundResource(R.drawable.solid_blue_rectangle);
                    tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);
                }else if(position==2){
                    tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left);
                    tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);
                    tvThree.setBackgroundResource(R.drawable.solid_half_elipse_blue_right);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });



    }

}

大体思路是，我们先定义一个页面集合ArrayList<Fragment>,接着建立相应的Fragment装载到集合中，然后定义自己的viewPager适配器，最后调用viewpager的setAdapter即可。

自定义的viewpager适配器代码如下

package com.example.keranbin.view.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

/**
 * Created by keranbin on 2015/10/12.
 */
public class MFragmentPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<Fragment> fragmentlists;

    public MFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragmentlists) {
        super(fm);
        this.fragmentlists=fragmentlists;
    }

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

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