ViewPager 一屏显示多个效果

项目中我们经常要求实现像上图那种ViewPager中一屏显示多个页面的做法，下面来看怎么实现这种效果。
首先我们先了解android:clipChildren=”false”,这个属性，默认是true。
使用的时候给子View和根节点View控件都设置android:clipChildren=”false”，那么这个子View就不会限制在父View当中，会产生那种旁边页溢出的效果。
设置ViewPager android:layout_marginLeft=”28dp” android:layout_marginRight=”28dp”,然后再代码中设置 mViewpager.setPageMargin(60);//设置页与页之间的间距，具体如下

代码：

`public class ViewPagerZoomActivity extends FragmentActivity {
private ViewPager mViewpager;

private ArrayList<ViewPagerItemFragment> mList = new ArrayList<>();

private ViewPagerAnimationAdapter viewPagerAnimationAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_view_pager_zoom);
    mViewpager = (ViewPager) findViewById(R.id.viewpager);
    initData();
}

private void initData() {
    addPage(ViewPagerItemFragment.PAGE_ONE);
    addPage(ViewPagerItemFragment.PAGE_TWO);
    addPage(ViewPagerItemFragment.PAGE_THREE);
    addPage(ViewPagerItemFragment.PAGE_FOUR);

    viewPagerAnimationAdapter = new ViewPagerAnimationAdapter(getSupportFragmentManager());
    viewPagerAnimationAdapter.setList(mList);
    mViewpager.setAdapter(viewPagerAnimationAdapter);
    mViewpager.setOffscreenPageLimit(2);//设置缓存页数
    mViewpager.setPageMargin(60);//设置页与页之间的间距
}

private void addPage(int page) {

    Bundle bundle = new Bundle();
    bundle.putInt("fromWhere", page);
    ViewPagerItemFragment buyRecordItemFragmentOne = ViewPagerItemFragment.newInstance(bundle);
    mList.add(buyRecordItemFragmentOne);


}

}`

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_view_pager_zoom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false"
    android:orientation="vertical">


        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="28dp"
            android:layout_marginRight="28dp"
            android:layout_marginTop="40dp"
            android:clipChildren="false" />


</LinearLayout>

在根view和子View中要设置 android:clipChildren=”false”。

ViewPager中的Fragment

public class ViewPagerItemFragment extends Fragment {


    public static final int PAGE_ONE = 0;

    public static final int PAGE_TWO = 1;
    public static final int PAGE_THREE = 2;
    public static final int PAGE_FOUR = 3;

    private TextView tvName;


    /**
     * model
     *
     * @param bundle bundle值
     * @return 对象
     */
    public static ViewPagerItemFragment newInstance(Bundle bundle) {
        ViewPagerItemFragment fragment = new ViewPagerItemFragment();
        fragment.setArguments(bundle);
        return fragment;
    }


    public ViewPagerItemFragment() {

    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = LayoutInflater.from(getActivity()).inflate(
                R.layout.buyrecord_itempager_layout, null);

        tvName = (TextView) view.findViewById(R.id.tv_name);


        Bundle bundle = getArguments();

        if (bundle != null) {

            int fromWhere = bundle.getInt("fromWhere");

            if (fromWhere == PAGE_ONE) {

                tvName.setText("one Page");

            } else if (fromWhere == PAGE_TWO) {

                tvName.setText("two Page");
            } else if (fromWhere == PAGE_THREE) {

                tvName.setText("three Page");
            } else if (fromWhere == PAGE_FOUR) {

                tvName.setText("four Page");
            }

        }

        return view;

    }


    @Override
    public void onResume() {
        super.onResume();
    }

    @Override
    public void onPause() {
        super.onPause();
    }


}

Fragment布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg_color_cornner_solid_yellow"
    android:orientation="vertical">


    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="dssf" />


</RelativeLayout>