原文链接:https://www.jianshu.com/p/571362deda72
1.布局,在需要的LinearLayout布局中添加
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_weight="1"
android:id="@+id/view_pager"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingEnd="64dp"
android:paddingLeft="64dp"
android:paddingRight="64dp"
android:paddingStart="64dp"
android:layout_height="0dp"/>
其中android:overScrollMode="never"
是去掉滑动时的光晕效果,参考:
https://www.jianshu.com/p/48506a2c2784
而android:clipToPadding
是裁剪顶部Padding,避免顶部间隙过大,参考:
https://www.jianshu.com/p/9f74fa934607
2.效果的体现,自定义PageTransformer
滑动片段的动画效果:
/**
* 画廊动画效果
*/
public class LoopTransformer implements ViewPager.PageTransformer {
//最小的缩放比例
private static final float MIN_SCALE = 0.9f;
@Override
public void transformPage(View view, float position) {
/**
* 过滤那些 <-1 或 >1 的值,使它区于【-1,1】之间
*/
if (position < -1) {
position = -1;
} else if (position > 1) {
position = 1;
}
/**
* 判断是前一页 1 + position ,右滑 pos -> -1 变 0
* 判断是后一页 1 - position ,左滑 pos -> 1 变 0
*/
float tempScale = position < 0 ? 1 + position : 1 - position; // [0,1]
float scaleValue = MIN_SCALE + tempScale * 0.1f; // [0,1]
view.setScaleX(scaleValue);
view.setScaleY(scaleValue);
}
}
3.使用,初始化适配器,设置页面转换动画
int selectPosition=2;//当前选择的项,默认中间项
private void initViewPager() {
//设置边距
viewPager.setPageMargin(4);
viewPager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
@Override
public Fragment getItem(int i) {
return InviteFriendItemFragment.newInstance(i);
}
@Override
public int getCount() {
return 5;
}
});
viewPager.setOffscreenPageLimit(4);
//定位到中间的一张海报
viewPager.setCurrentItem(2);
//页面转换动画设置
viewPager.setPageTransformer(false,new LoopTransformer());
//页面变换事件
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
selectPosition = i;
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
其中的InviteFriendItemFragment每个人不同,大家自己定义了。最后的效果:
滑动效果
网友评论