原创不易，转载的话请注明出处，谢谢。
前言
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
如果有其他疑问，请评论留言，谢谢大家支持。
