效果：
PagerData类：
1 package com.cloud.viewpagerdemo; 2 3 import java.io.Serializable; 4 5 class PagerData implements Serializable { 6 7private int mImageResId; 8private String mContent; 9 10PagerData(int imageResId, String content) {11 mImageResId = imageResId;12 mContent = content;13}14 15public int getImageResId() {16 return mImageResId;17}18 19public void setImageResId(int imageResId) {20 mImageResId = imageResId;21}22 23public String getContent() {24 return mContent;25}26 27public void setContent(String content) {28 mContent = content;29}30 }
PagerFragment类：
1 package com.cloud.viewpagerdemo; 2 3 import android.graphics.Outline; 4 import android.os.Bundle; 5 import android.support.annotation.NonNull; 6 import android.support.annotation.Nullable; 7 import android.support.v4.app.Fragment; 8 import android.view.LayoutInflater; 9 import android.view.View;10 import android.view.ViewGroup;11 import android.view.ViewOutlineProvider;12 import android.widget.ImageView;13 import android.widget.TextView;14 15 public class PagerFragment extends Fragment {16 17private static final String ARG_DATA = "data";18 19private PagerData mData;20 21private ImageView mImageView;22private TextView mContent;23 24/**25* 通过静态方法获取Fragment实例，向Fragment传参数26* @param data 数据27* @return Fragment28*/29public static PagerFragment newInstance(PagerData data) {30 PagerFragment fragment = new PagerFragment();31 32 //使用FragmentArguments传递参数33 Bundle args = new Bundle();34 args.putSerializable(ARG_DATA, data);35 fragment.setArguments(args);36 return fragment;37}38 39@Override40public void onCreate(@Nullable Bundle savedInstanceState) {41 super.onCreate(savedInstanceState);42 mData = (PagerData) getArguments().getSerializable(ARG_DATA);43}44 45@Nullable46@Override47public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,48@Nullable Bundle savedInstanceState) {49 View view = inflater.inflate(R.layout.fragment_pager, container, false);50 51 //绑定控件52 mImageView = view.findViewById(R.id.image_view);53 mContent = view.findViewById(R.id.text_content);54 55 //ImageView设置圆角56 ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {57 @Override58 public void getOutline(View view, Outline outline) {59 outline.setRoundRect(0, 0, mImageView.getWidth(), mImageView.getHeight(), 16);60 }61 };62 63 mImageView.setOutlineProvider(viewOutlineProvider);64 mImageView.setClipToOutline(true);65 mImageView.setImageResource(mData.getImageResId());66 mContent.setText(mData.getContent());67 68 return view;69}70 }
PagerActivity:
1 package com.cloud.viewpagerdemo; 2 3 import android.support.v4.app.Fragment; 4 import android.support.v4.app.FragmentManager; 5 import android.support.v4.app.FragmentStatePagerAdapter; 6 import android.support.v4.view.ViewPager; 7 import android.support.v7.app.AppCompatActivity; 8 import android.os.Bundle; 9 import android.widget.TextView;10 11 import java.util.ArrayList;12 import java.util.List;13 14 public class PagerActivity extends AppCompatActivity {15 16private List<PagerData> mPagerData = new ArrayList<>();17 18private ViewPager mViewPager;19private TextView mTextPage;20 21private String page = "1 / 3";22 23@Override24protected void onCreate(Bundle savedInstanceState) {25 super.onCreate(savedInstanceState);26 setContentView(R.layout.activity_pager);27 28 initData();29 30 FragmentManager fragmentManager = getSupportFragmentManager();31 32 mViewPager = findViewById(R.id.view_pager);33 mTextPage = findViewById(R.id.text_page);34 //设置ViewPager适配器35 mViewPager.setAdapter(new FragmentStatePagerAdapter(fragmentManager) {36 @Override37 public Fragment getItem(int position) {38 return PagerFragment.newInstance(mPagerData.get(position));39 }40 41 @Override42 public int getCount() {43 return mPagerData.size();44 }45 });46 47 //监听页面改变48 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {49 @Override50 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {51 52 }53 54 @Override55 public void onPageSelected(int position) {56 //页面选中57 page = String.valueOf(position + 1) + " / " + String.valueOf(mPagerData.size());58 mTextPage.setText(page);59 }60 61 @Override62 public void onPageScrollStateChanged(int state) {63 64 }65 });66 //设置缓存页数67 mViewPager.setOffscreenPageLimit(3);68 //设置默认页69 mViewPager.setCurrentItem(0);70 71 mTextPage.setText(page);72}73 74private void initData() {75 //添加三项数据76 mPagerData.add(new PagerData(R.drawable.img_0, "Photo by Adam Krowitz"));77 mPagerData.add(new PagerData(R.drawable.img_1, "Photo by Samuel Ferrara"));78 mPagerData.add(new PagerData(R.drawable.img_2, "Photo by Earth"));79}80 }
fragment_pager：
1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.constraint.ConstraintLayout 3xmlns:android="/apk/res/android" 4xmlns:app="/apk/res-auto" 5xmlns:tools="/tools" 6android:layout_width="match_parent" 7android:layout_height="match_parent"> 8 9<LinearLayout10 android:layout_width="match_parent"11 android:layout_height="match_parent"12 android:layout_marginBottom="32dp"13 android:layout_marginEnd="16dp"14 android:layout_marginStart="16dp"15 android:layout_marginTop="16dp"16 android:background="@drawable/pager_background"17 android:elevation="4dp"18 android:orientation="vertical"19 app:layout_constraintBottom_toBottomOf="parent"20 app:layout_constraintEnd_toEndOf="parent"21 app:layout_constraintStart_toStartOf="parent"22 app:layout_constraintTop_toTopOf="parent">23 24 <ImageView25 android:id="@+id/image_view"26 android:layout_width="match_parent"27 android:layout_height="0dp"28 android:layout_margin="8dp"29 android:layout_weight="1"30 android:contentDescription="@null"31 android:scaleType="centerCrop" />32 33 <TextView34 android:id="@+id/text_content"35 android:layout_width="match_parent"36 android:layout_height="125dp"37 android:gravity="center"38 android:padding="8dp"39 android:textSize="18sp"40 android:textColor="#000000"41 tools:text="Content" />42 43</LinearLayout>44 45 </android.support.constraint.ConstraintLayout>
activity_pager：
1 <?xml version="1.0" encoding="utf-8"?> 2 <android.support.constraint.ConstraintLayout 3xmlns:android="/apk/res/android" 4xmlns:app="/apk/res-auto" 5xmlns:tools="/tools" 6android:layout_width="match_parent" 7android:layout_height="match_parent" 8tools:context=".PagerActivity"> 9 10<android.support.v7.widget.Toolbar11 android:id="@+id/toolbar"12 android:layout_width="match_parent"13 android:layout_height="48dp"14 android:background="@color/colorPrimary"15 android:elevation="4dp"16 app:layout_constraintEnd_toEndOf="parent"17 app:layout_constraintStart_toStartOf="parent"18 app:layout_constraintTop_toTopOf="parent">19 20 <TextView21 android:layout_width="wrap_content"22 android:layout_height="wrap_content"23 android:layout_gravity="center"24 android:textSize="18sp"25 android:textColor="#FFFFFF"26 android:text="@string/app_name" />27 28</android.support.v7.widget.Toolbar>29 30<android.support.v4.view.ViewPager31 android:id="@+id/view_pager"32 android:layout_width="0dp"33 android:layout_height="0dp"34 app:layout_constraintBottom_toBottomOf="parent"35 app:layout_constraintEnd_toEndOf="parent"36 app:layout_constraintStart_toStartOf="parent"37 app:layout_constraintTop_toBottomOf="@+id/toolbar">38 39</android.support.v4.view.ViewPager>40 41<TextView42 android:id="@+id/text_page"43 android:layout_width="wrap_content"44 android:layout_height="wrap_content"45 android:layout_marginBottom="4dp"46 app:layout_constraintBottom_toBottomOf="parent"47 app:layout_constraintEnd_toEndOf="parent"48 app:layout_constraintStart_toStartOf="@+id/toolbar"49 tools:text="page" />50 51 </android.support.constraint.ConstraintLayout>
