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

前言

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

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