Android ViewPager + Fragment实现滑动页面效果

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

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

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

<?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>

<?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>