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);
     }
 }