android viewpager实现画廊效果,ViewPager实现2D、3D画廊效果
前言
PM在其他APP找到了一个效果不错的头部展示图，想要我们的APP也实现这样的效果。如图红框框所示
微信图片_20180827154338.jpg
横向滑动，居中显示，左右留出前后的一页。
分析
这是PM提出的需求，那我们作为程序员需要转换为自己的理解：这个界面我们需要使用横向列表进行展示，RecycleView或者Viewpager都可以实现,关键是左右需要露一点出来，滑一次翻一页要怎么做呢？RecyclerView：如果用RecycleView的话就让item不占满全屏，左右都露一点，然后用SnapHelper这个辅助类，实现一次滑一页的效果。ViewPager：ViewPager首先自带了一次滑一页的效果，那么只需要处理左右露出来一点就可以了，所以我推荐用ViewPager来处理。
ViewPager处理左右露一点
在查看了ViewPager文档后，找到了这一条属性：
20170524160823163.png这个属性的作用就是ViewPager的子View是否在它应有的边界内绘制。默认为true，在其边界内绘制。其实这个属性在其他的控件或布局也有。
代码实现
首先是父布局
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:id="@+id/view_pager"
android:clipChildren="false" //不要忘记加上这句属性 android:layout_marginStart="50dp"
android:layout_marginEnd="50dp"
android:layout_width="match_parent"
android:layout_height="200dp">
然后是Fragment的布局
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#444">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent">
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="16dp"
android:gravity="center_vertical"
android:text="你好，我是标题"
android:textColor="#fff" />
因为是demo，所以只是做个效果图：
2018-08-27_163306.png
接下来就是剩下的加载代码了：public class MainActivity extends AppCompatActivity { @BindView(R.id.view_pager)
ViewPager viewPager; private List 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:id="@+id/view_pager"
android:clipChildren="false"
android:layout_gravity="center"
android:layout_width="280dp" //调整宽度，左右留出合适的距离
android:layout_height="200dp">
public class MainActivity extends AppCompatActivity { @BindView(R.id.view_pager)ViewPager viewPager; private List 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
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
view.setTranslationX(scaleFactor * 2);
}
view.setScaleY(scaleFactor);
} else {
view.setScaleX(MIN_SCALE);
view.setScaleY(MIN_SCALE);
}
}
}
}
再次运行：
GIF1.gif
作者：Code_Panda
链接：https://www.jianshu.com/p/d06bf28014c2