Android工具集

使用ViewPager做海报滑动

2019-06-20  本文已影响0人  Small_Cake

原文链接: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每个人不同,大家自己定义了。最后的效果:


滑动效果
上一篇下一篇

猜你喜欢

热点阅读