原创不易，转载的话请注明出处，谢谢。

前言

PM在其余APP找到了一个效果不错的头部展现图，想要我们的APP也实现这样的效果。如图红框框所示

微信图片_20180827154338.jpg

横向滑动，居中显示，左右留出前后的一页。

分析

这是PM提出的需求，那我们作为程序员需要转换为自己的了解：

这个界面我们需要用横向列表进行展现，RecycleView或者者Viewpager都可以实现,关键是左右需要露一点出来，滑一次翻一页要怎样做呢？

RecyclerView：假如使用RecycleView的话就让item不占满全屏，左右都露一点，而后使用SnapHelper这个辅助类，实现一次滑一页的效果。

ViewPager：ViewPager首先自带了一次滑一页的效果，那么只要要解决左右露出来一点即可以了，所以我推荐使用ViewPager来解决。

ViewPager解决左右露一点

在查看了ViewPager文档后，找到了这一条属性：

20170524160823163.png

这个属性的作使用就是ViewPager的子View能否在它应有的边界内绘制。默认为true，在其边界内绘制。其实这个属性在其余的控件或者布局也有。

代码实现

首先是父布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:clipChildren="false" //不要不记得加上这句属性    tools:context=".MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:clipChildren="false"  //不要不记得加上这句属性        android:layout_marginStart="50dp"        android:layout_marginEnd="50dp"        android:layout_width="match_parent"        android:layout_height="200dp">    </android.support.v4.view.ViewPager></LinearLayout>

而后是Fragment的布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="180dp"    android:orientation="vertical">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="140dp"        android:background="#444">    </FrameLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/colorAccent">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_marginStart="16dp"            android:gravity="center_vertical"            android:text="你好，我是标题"            android:textColor="#fff" />    </LinearLayout></LinearLayout>

由于是demo，所以只是做个效果图：

2018-08-27_163306.png

接下来就是剩下的加载代码了：

public class MainActivity extends AppCompatActivity {    @BindView(R.id.view_pager)    ViewPager viewPager;    private List<Fragment> mFragmentList = new ArrayList<>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        mFragmentList.add(new PagerFragment());        mFragmentList.add(new PagerFragment());        mFragmentList.add(new PagerFragment());        mFragmentList.add(new PagerFragment());        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());        viewPager.setAdapter(adapter);        viewPager.setOffscreenPageLimit(2);        viewPager.setPageMargin(80);    }    class ViewPagerAdapter extends FragmentPagerAdapter {        public ViewPagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return mFragmentList.get(position);        }        @Override        public int getCount() {            return mFragmentList.size();        }    }}

运行效果

最后我们运行起来看看效果：

GIF.gif

3D效果实现

既然2D效果我们能做到，那我们怎样实现3D效果的呢？其实我们只要要利使用ViewPager的切换动画，即可以轻松实现当页放大的3D效果，简简单单修改代码：

<android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:clipChildren="false"        android:layout_gravity="center"        android:layout_width="280dp" //调整宽度，左右留出合适的距离        android:layout_height="200dp">    </android.support.v4.view.ViewPager>

public class MainActivity extends AppCompatActivity {    @BindView(R.id.view_pager)    ViewPager viewPager;    private List<Fragment> mFragmentList = new ArrayList<>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.bind(this);        mFragmentList.add(new PagerFragment());        mFragmentList.add(new PagerFragment());        mFragmentList.add(new PagerFragment());        mFragmentList.add(new PagerFragment());        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());        viewPager.setAdapter(adapter);        viewPager.setPageTransformer(true,new ZoomOutPageTransformer());//设置切换动画        viewPager.setOffscreenPageLimit(2);        viewPager.setPageMargin(10);//改小间隔    }    class ViewPagerAdapter extends FragmentPagerAdapter {        public ViewPagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return mFragmentList.get(position);        }        @Override        public int getCount() {            return mFragmentList.size();        }    }//切换动画    class ZoomOutPageTransformer implements ViewPager.PageTransformer {        private static final float MAX_SCALE = 1.0f;        private static final float MIN_SCALE = 0.8f;        @Override        public void transformPage(View view, float position) {            if (position < -1) {                view.setScaleX(MIN_SCALE);                view.setScaleY(MIN_SCALE);            } else if (position <= 1) {                float scaleFactor = MIN_SCALE + (1 - Math.abs(position)) * (MAX_SCALE - MIN_SCALE);                view.setScaleX(scaleFactor);                if (position > 0) {                    view.setTranslationX(-scaleFactor * 2);                } else if (position < 0) {                    view.setTranslationX(scaleFactor * 2);                }                view.setScaleY(scaleFactor);            } else {                view.setScaleX(MIN_SCALE);                view.setScaleY(MIN_SCALE);            }        }    }}

再次运行：

GIF1.gif

假如有其余疑问，请评论留言，谢谢大家支持。