Android ViewPager + Fragment实现滑动页面

效果：

PagerData类：

 package com.cloud.viewpagerdemo;

 import java.io.Serializable;

 class PagerData implements Serializable {

     private int mImageResId;
     private String mContent;

     PagerData(int imageResId, String content) {
         mImageResId = imageResId;
         mContent = content;
     }

     public int getImageResId() {
         return mImageResId;
     }

     public void setImageResId(int imageResId) {
         mImageResId = imageResId;
     }

     public String getContent() {
         return mContent;
     }

     public void setContent(String content) {
         mContent = content;
     }
 }

PagerFragment类：

 package com.cloud.viewpagerdemo;

 import android.graphics.Outline;
 import android.os.Bundle;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewOutlineProvider;
 import android.widget.ImageView;
 import android.widget.TextView;

 public class PagerFragment extends Fragment {

     private static final String ARG_DATA = "data";

     private PagerData mData;

     private ImageView mImageView;
     private TextView mContent;

     /**
      * 通过静态方法获取Fragment实例，向Fragment传参数
      * @param data 数据
      * @return Fragment
      */
     public static PagerFragment newInstance(PagerData data) {
         PagerFragment fragment = new PagerFragment();

         //使用FragmentArguments传递参数
         Bundle args = new Bundle();
         args.putSerializable(ARG_DATA, data);
         fragment.setArguments(args);
         return fragment;
     }

     @Override
     public void onCreate(@Nullable Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         mData = (PagerData) getArguments().getSerializable(ARG_DATA);
     }

     @Nullable
     @Override
     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                              @Nullable Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.fragment_pager, container, false);

         //绑定控件
         mImageView = view.findViewById(R.id.image_view);
         mContent = view.findViewById(R.id.text_content);

         //ImageView设置圆角
         ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
             @Override
             public void getOutline(View view, Outline outline) {
                 outline.setRoundRect(0, 0, mImageView.getWidth(), mImageView.getHeight(), 16);
             }
         };

         mImageView.setOutlineProvider(viewOutlineProvider);
         mImageView.setClipToOutline(true);
         mImageView.setImageResource(mData.getImageResId());
         mContent.setText(mData.getContent());

         return view;
     }
 }

PagerActivity:

 package com.cloud.viewpagerdemo;

 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentManager;
 import android.support.v4.app.FragmentStatePagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import android.widget.TextView;

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

 public class PagerActivity extends AppCompatActivity {

     private List<PagerData> mPagerData = new ArrayList<>();

     private ViewPager mViewPager;
     private TextView mTextPage;

     private String page = "1 / 3";

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_pager);

         initData();

         FragmentManager fragmentManager = getSupportFragmentManager();

         mViewPager = findViewById(R.id.view_pager);
         mTextPage = findViewById(R.id.text_page);
         //设置ViewPager适配器
         mViewPager.setAdapter(new FragmentStatePagerAdapter(fragmentManager) {
             @Override
             public Fragment getItem(int position) {
                 return PagerFragment.newInstance(mPagerData.get(position));
             }

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

         //监听页面改变
         mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
             @Override
             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

             }

             @Override
             public void onPageSelected(int position) {
                 //页面选中
                 page = String.valueOf(position + 1) + " / " + String.valueOf(mPagerData.size());
                 mTextPage.setText(page);
             }

             @Override
             public void onPageScrollStateChanged(int state) {

             }
         });
         //设置缓存页数
         mViewPager.setOffscreenPageLimit(3);
         //设置默认页
         mViewPager.setCurrentItem(0);

         mTextPage.setText(page);
     }

     private void initData() {
         //添加三项数据
         mPagerData.add(new PagerData(R.drawable.img_0, "Photo by Adam Krowitz"));
         mPagerData.add(new PagerData(R.drawable.img_1, "Photo by Samuel Ferrara"));
         mPagerData.add(new PagerData(R.drawable.img_2, "Photo by Earth"));
     }
 }

fragment_pager：

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_marginBottom="32dp"
         android:layout_marginEnd="16dp"
         android:layout_marginStart="16dp"
         android:layout_marginTop="16dp"
         android:background="@drawable/pager_background"
         android:elevation="4dp"
         android:orientation="vertical"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">

         <ImageView
             android:id="@+id/image_view"
             android:layout_width="match_parent"
             android:layout_height="0dp"
             android:layout_margin="8dp"
             android:layout_weight="1"
             android:contentDescription="@null"
             android:scaleType="centerCrop" />

         <TextView
             android:id="@+id/text_content"
             android:layout_width="match_parent"
             android:layout_height="125dp"
             android:gravity="center"
             android:padding="8dp"
             android:textSize="18sp"
             android:textColor="#000000"
             tools:text="Content" />

     </LinearLayout>

 </android.support.constraint.ConstraintLayout>

activity_pager：

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".PagerActivity">

     <android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="48dp"
         android:background="@color/colorPrimary"
         android:elevation="4dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent">

         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:textSize="18sp"
             android:textColor="#FFFFFF"
             android:text="@string/app_name" />

     </android.support.v7.widget.Toolbar>

     <android.support.v4.view.ViewPager
         android:id="@+id/view_pager"
         android:layout_width="0dp"
         android:layout_height="0dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/toolbar">

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

     <TextView
         android:id="@+id/text_page"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="4dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="@+id/toolbar"
         tools:text="page" />

 </android.support.constraint.ConstraintLayout>