美文网首页Android工具集
使用ViewPager做海报滑动

使用ViewPager做海报滑动

作者: Small_Cake | 来源:发表于2019-06-20 11:28 被阅读0次

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


    滑动效果

    相关文章

      网友评论

        本文标题:使用ViewPager做海报滑动

        本文链接:https://www.haomeiwen.com/subject/fsrdqctx.html