1.首先如何在一個頁面顯示多個ViewPager的Item:

只需要在父容器和ViewPager中都添加上clipChildren屬性，然后給ViewPager設置左右兩個margin，使其不致于把整個屏幕占滿。

<LinearLayout 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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    tools:context="com.example.ywt.viewpagertest.MainActivity">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_margin="20dp"
        android:clipChildren="false" />

</LinearLayout>

android：clipChildren="false"
此屬性的意思是子View不必拘束在父控件的內(nèi)部：
當子View的大小超過父控件時，仍然可以顯示，這個屬性的默認值一般為true。
注意：此處要求 viewPager 的高度為確定值EXACTLY，
即 match_parsent 或者精確的值，必須給子View設置一個高度，不能是 wrap_content。

2.其次寫ViewPager的Adapter:

public class ViewPagerAdapter extends PagerAdapter {

    private List<Bean> list;
    private Context mContext;

    public ViewPagerAdapter(List<Bean> list, Context mContext) {
        this.list = list;
        this.mContext = mContext;
    }

    /**
     * 返回list長度
     *
     * @return
     */
    @Override
    public int getCount() {
        return list.size();
    }

    /**
     * 判斷instantiateItem(ViewGroup container, int position)返回的要加載的pager對象是不是view視圖，
     * 是則返回true并顯示，不是返回false不顯示。
     *
     * @param view
     * @param object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    /**
     * @param container 用來裝填list的ViewPager對象
     * @param position  裝填過程中給每個list的下標
     * @return 返回的對象就是當前填充進去的list對象
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = LayoutInflater.from(container.getContext()).inflate(R.layout.item_viewpager, container, false);
        //獲取圖片與標題id
        ImageView imageView = view.findViewById(R.id.img);
        TextView tv_title = view.findViewById(R.id.tv_title);

        Bean bean = list.get(position);

        imageView.setImageResource(bean.getImg());
        tv_title.setText(bean.getTitle());

        container.addView(view);
        return view;
    }

    /**
     * 銷毀多余3個的pager對象。
     *
     * @param container vp對象
     * @param position  vp對象的下標
     * @param object
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
        container.removeView((View) object);
    }

3.最后再來看看Activity:

public class MainActivity extends AppCompatActivity {

    private List<Bean> list;
    private ViewPager viewPager;
    ViewPagerAdapter viewPagerAdapter;
    Context context;

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

        viewPager = findViewById(R.id.viewpager);
        initData();
    }

    private void initData() {
        list = new ArrayList<>();
        list.add(new Bean(R.mipmap.img_one, "標題一"));
        list.add(new Bean(R.mipmap.img_two, "標題二"));
        list.add(new Bean(R.mipmap.img_one, "標題三"));

        //設置Page間間距
        viewPager.setPageMargin(20);
        //設置緩存的頁面數(shù)量
        viewPager.setOffscreenPageLimit(3);
        //設置自定義滑動動畫
        //  viewPager.setPageTransformer(false, new GalleryTransformer());

        viewPagerAdapter = new ViewPagerAdapter(list, context);
        viewPager.setAdapter(viewPagerAdapter);

        viewPager.setOnTouchListener(new View.OnTouchListener() {
            int flage = 0;

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        flage = 0;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        flage = 1;
                        break;
                    case MotionEvent.ACTION_UP:
                        if (flage == 0) {
                            int item = viewPager.getCurrentItem();
                            if (item == 0) {
                                Toast.makeText(MainActivity.this, "點擊1", Toast.LENGTH_SHORT).show();
                            } else if (item == 1) {
                                Toast.makeText(MainActivity.this, "點擊2", Toast.LENGTH_SHORT).show();
                            } else if (item == 2) {
                                Toast.makeText(MainActivity.this, "點擊3", Toast.LENGTH_SHORT).show();
                            }
                        }
                        break;
                }
                return false;
            }
        });
    }

}

4.關于PageTransformer：

可以自定義PageTransformer來顯示viewpager的動畫效果。
詳情請參照：https://github.com/jfeinstein10/JazzyViewPager

本文參照：
http://m.itdecent.cn/p/c9e8448472ed https://blog.csdn.net/u012702547/article/details/52334161
我的Demo