android自定义ViewPager之——水平滑动弹性效果

最新推荐文章于 2021-05-28 05:21:40 发布
最新推荐文章于 2021-05-28 05:21:40 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： 应用程序 andorid ui ViewPager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcq5211314123/article/details/40820665
版权
andorid 同时被 3 个专栏收录
63 篇文章 1 订阅
订阅专栏
应用程序
52 篇文章 0 订阅
订阅专栏
ui
7 篇文章 0 订阅
订阅专栏

　　android ViewPager是一個经常要用到的组件，但android系统本身为我们提供的ViewPager是没有任何效果的，只能是一页一页的滑动，这样会让人感觉很死板，在看一些知名大公司的App时，看到了他们的ViewPager在滑动到最开始或者最后的时候是有一个弹性效果的，使用起来感觉非常的好，于是乎就是百度搜了一下，在StackOverflow中看到一篇文章就是讲如何实现这个效果的。

　　先看下效果图：滑动到最后一页时仍然可以拉动……

代码如下：

　package com.example.myviewpager;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Camera;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewConfigurationCompat;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Transformation;

import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.Animator.AnimatorListener;
import com.nineoldandroids.animation.ObjectAnimator;

public class BounceBackViewPager extends ViewPager
{

    /**
     * maximum z distance to translate child view
     */
    final static int DEFAULT_OVERSCROLL_TRANSLATION = 500;

    /**
     * duration of overscroll animation in ms
     */
    final private static int DEFAULT_OVERSCROLL_ANIMATION_DURATION = 400;

    @SuppressWarnings("unused")
    private final static String DEBUG_TAG = ViewPager.class.getSimpleName();
    private final static int INVALID_POINTER_ID = -1;

    /**
     *
     * @author renard, extended by Piotr Zawadzki
     *
     */
    private class OverscrollEffect
    {
        private float mOverscroll;
        private Animator mAnimator;

        /**
         * @param deltaDistance [0..1] 0->no overscroll, 1>full overscroll
         */
        public void setPull(final float deltaDistance)
        {
            mOverscroll = deltaDistance;
            invalidateVisibleChilds(mLastPosition);
        }

        /**
         * called when finger is released. starts to animate back to default position
         */
        private void onRelease()
        {
            if (mAnimator != null && mAnimator.isRunning())
            {
                mAnimator.addListener(new AnimatorListener()
                {

                    @Override
                    public void onAnimationStart(Animator animation)
                    {
                    }

                    @Override
                    public void onAnimationRepeat(Animator animation)
                    {
                    }

                    @Override
                    public void onAnimationEnd(Animator animation)
                    {
                        startAnimation(0);
                    }

                    @Override
                    public void onAnimationCancel(Animator animation)
                    {
                    }
                });
                mAnimator.cancel();
            }
            else
            {
                startAnimation(0);
            }
        }

        private void startAnimation(final float target)
        {
            mAnimator = ObjectAnimator.ofFloat(this, "pull", mOverscroll, target);
            mAnimator.setInterpolator(new DecelerateInterpolator());
            final float scale = Math.abs(target - mOverscroll);
            mAnimator.setDuration((long) (mOverscrollAnimationDuration * scale));
            mAnimator.start();
        }

        private boolean isOverscrolling()
        {
            if (mScrollPosition == 0 && mOverscroll < 0)
            {
                return true;
            }
            final boolean isLast = (getAdapter().getCount() - 1) == mScrollPosition;
            if (isLast && mOverscroll > 0)
            {
                return true;
            }
            return false;
        }

    }

    final private OverscrollEffect mOverscrollEffect = new OverscrollEffect();
    final private Camera mCamera = new Camera();

    private OnPageChangeListener mScrollListener;
    private float mLastMotionX;
    private int mActivePointerId;
    private int mScrollPosition;
    private float mScrollPositionOffset;
    final private int mTouchSlop;

    private float mOverscrollTranslation;
    private int mOverscrollAnimationDuration;

    public BounceBackViewPager(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        setStaticTransformationsEnabled(true);
        final ViewConfiguration configuration = ViewConfiguration.get(context);
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
        super.setOnPageChangeListener(new MyOnPageChangeListener());
        init(attrs);
    }

    private void init(AttributeSet attrs)
    {
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.BounceBackViewPager);
        mOverscrollTranslation = a.getDimension(R.styleable.BounceBackViewPager_overscroll_translation_bounce,
                DEFAULT_OVERSCROLL_TRANSLATION);
        mOverscrollAnimationDuration = a.getInt(R.styleable.BounceBackViewPager_overscroll_animation_duration_bounce,
                DEFAULT_OVERSCROLL_ANIMATION_DURATION);
        a.recycle();
    }

    public int getOverscrollAnimationDuration()
    {
        return mOverscrollAnimationDuration;
    }

    public void setOverscrollAnimationDuration(int mOverscrollAnimationDuration)
    {
        this.mOverscrollAnimationDuration = mOverscrollAnimationDuration;
    }

    public float getOverscrollTranslation()
    {
        return mOverscrollTranslation;
    }

    public void setOverscrollTranslation(int mOverscrollTranslation)
    {
        this.mOverscrollTranslation = mOverscrollTranslation;
    }

    @Override
    public void setOnPageChangeListener(OnPageChangeListener listener)
    {
        mScrollListener = listener;
    };

    private void invalidateVisibleChilds(final int position)
    {
        for (int i = 0; i < getChildCount(); i++)
        {
            getChildAt(i).invalidate();

        }
        // this.invalidate();
        // final View child = getChildAt(position);
        // final View previous = getChildAt(position - 1);
        // final View next = getChildAt(position + 1);
        // if (child != null) {
        // child.invalidate();
        // }
        // if (previous != null) {
        // previous.invalidate();
        // }
        // if (next != null) {
        // next.invalidate();
        // }
    }

    private int mLastPosition = 0;

    private class MyOnPageChangeListener implements OnPageChangeListener
    {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
        {
            if (mScrollListener != null)
            {
                mScrollListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }
            mScrollPosition = position;
            mScrollPositionOffset = positionOffset;
            mLastPosition = position;
            invalidateVisibleChilds(position);
        }

        @Override
        public void onPageSelected(int position)
        {

            if (mScrollListener != null)
            {
                mScrollListener.onPageSelected(position);
            }
        }

        @Override
        public void onPageScrollStateChanged(final int state)
        {

            if (mScrollListener != null)
            {
                mScrollListener.onPageScrollStateChanged(state);
            }
            if (state == SCROLL_STATE_IDLE)
            {
                mScrollPositionOffset = 0;
            }
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev)
    {
        try
        {
            final int action = ev.getAction() & MotionEventCompat.ACTION_MASK;
            switch (action)
            {
            case MotionEvent.ACTION_DOWN:
            {
                mLastMotionX = ev.getX();
                mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
                break;
            }
            case MotionEventCompat.ACTION_POINTER_DOWN:
            {
                final int index = MotionEventCompat.getActionIndex(ev);
                final float x = MotionEventCompat.getX(ev, index);
                mLastMotionX = x;
                mActivePointerId = MotionEventCompat.getPointerId(ev, index);
                break;
            }
            }
            return super.onInterceptTouchEvent(ev);
        }
        catch (IllegalArgumentException e)
        {
            e.printStackTrace();
            return false;
        }
        catch (ArrayIndexOutOfBoundsException e)
        {
            e.printStackTrace();
            return false;
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev)
    {
        try
        {
            return super.dispatchTouchEvent(ev);
        }
        catch (IllegalArgumentException e)
        {
            e.printStackTrace();
            return false;
        }
        catch (ArrayIndexOutOfBoundsException e)
        {
            e.printStackTrace();
            return false;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev)
    {
        boolean callSuper = false;

        final int action = ev.getAction();
        switch (action)
        {
        case MotionEvent.ACTION_DOWN:
        {
            callSuper = true;
            mLastMotionX = ev.getX();
            mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
            break;
        }
        case MotionEventCompat.ACTION_POINTER_DOWN:
        {
            callSuper = true;
            final int index = MotionEventCompat.getActionIndex(ev);
            final float x = MotionEventCompat.getX(ev, index);
            mLastMotionX = x;
            mActivePointerId = MotionEventCompat.getPointerId(ev, index);
            break;
        }
        case MotionEvent.ACTION_MOVE:
        {
            if (mActivePointerId != INVALID_POINTER_ID)
            {
                // Scroll to follow the motion event
                final int activePointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);
                final float x = MotionEventCompat.getX(ev, activePointerIndex);
                final float deltaX = mLastMotionX - x;
                final float oldScrollX = getScrollX();
                final int width = getWidth();
                final int widthWithMargin = width + getPageMargin();
                final int lastItemIndex = getAdapter().getCount() - 1;
                final int currentItemIndex = getCurrentItem();
                final float leftBound = Math.max(0, (currentItemIndex - 1) * widthWithMargin);
                final float rightBound = Math.min(currentItemIndex + 1, lastItemIndex) * widthWithMargin;
                final float scrollX = oldScrollX + deltaX;
                if (mScrollPositionOffset == 0)
                {
                    if (scrollX < leftBound)
                    {
                        if (leftBound == 0)
                        {
                            final float over = deltaX + mTouchSlop;
                            mOverscrollEffect.setPull(over / width);
                        }
                    }
                    else if (scrollX > rightBound)
                    {
                        if (rightBound == lastItemIndex * widthWithMargin)
                        {
                            final float over = scrollX - rightBound - mTouchSlop;
                            mOverscrollEffect.setPull(over / width);
                        }
                    }
                }
                else
                {
                    mLastMotionX = x;
                }
            }
            else
            {
                mOverscrollEffect.onRelease();
            }
            break;
        }
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
        {
            callSuper = true;
            mActivePointerId = INVALID_POINTER_ID;
            mOverscrollEffect.onRelease();
            break;
        }
        case MotionEvent.ACTION_POINTER_UP:
        {
            final int pointerIndex = (ev.getAction() & MotionEvent.ACTION_POINTER_INDEX_MASK) >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
            final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);
            if (pointerId == mActivePointerId)
            {
                // This was our active pointer going up. Choose a new
                // active pointer and adjust accordingly.
                final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                mLastMotionX = ev.getX(newPointerIndex);
                mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);
                callSuper = true;
            }
            break;
        }
        }

        if (mOverscrollEffect.isOverscrolling() && !callSuper)
        {
            return true;
        }
        else
        {
            return super.onTouchEvent(ev);
        }
    }

    @Override
    protected boolean getChildStaticTransformation(View child, Transformation t)
    {
        if (child.getWidth() == 0)
        {
            return false;
        }
        final int position = child.getLeft() / child.getWidth();
        final boolean isFirstOrLast = position == 0 || (position == getAdapter().getCount() - 1);
        if (mOverscrollEffect.isOverscrolling() && isFirstOrLast)
        {
            final float dx = getWidth() / 2;
            final int dy = getHeight() / 2;
            t.getMatrix().reset();
            final float translateX = (float) mOverscrollTranslation
                    * (mOverscrollEffect.mOverscroll > 0 ? Math.min(mOverscrollEffect.mOverscroll, 1) : Math.max(
                            mOverscrollEffect.mOverscroll, -1));
            mCamera.save();
            mCamera.translate(-translateX, 0, 0);
            mCamera.getMatrix(t.getMatrix());
            mCamera.restore();
            t.getMatrix().preTranslate(-dx, -dy);
            t.getMatrix().postTranslate(dx, dy);

            if (getChildCount() == 1)
            {
                this.invalidate();
            }
            else
            {
                child.invalidate();
            }
            return true;
        }
        return false;
    }
}

自定义属性如下： 

<declare-styleable name="BounceBackViewPager">
        <attr name="overscroll_translation_bounce" format="dimension" />

        <!-- Duration of animation when user releases the over scroll. Default is 400 ms. -->
        <attr name="overscroll_animation_duration_bounce" format="integer" />
    </declare-styleable>



qndroid
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android自定义ViewPager水平滑动弹性效果
01-04
但android系统本身为我们提供的ViewPager是没有任何效果的，只能是一页一页的滑动，这样会让人感觉很死板，在看一些知名大公司的App时，看到了他们的ViewPager在滑动到最开始或者最后的时候是有一个弹性效果的，...
关于ViewPager、ViewFilpper、ViewFlow三种实现水平向滑动方式的比较
jacky choise
08-14 926
实现简介 ViewPager ViewPager类提供了多界面切换的新效果。新效果有如下特征： [1] 当前显示一组界面中的其中一个界面。 [2] 当用户通过左右滑动界面时，当前的屏幕显示当前界面和下一个界面的一部分。 [3] 滑动结束后，界面自动跳转到当前选择的界面中   ViewPager来源于google 的补充组件android-support-v
Android 实现Viewpager效果
LuoyuOvO
03-24 233
public class ScrollerLayout extends ViewGroup { /** * 用于完成滚动操作的实例 */ private Scroller mScroller; /** * 判定为拖动的最小移动像素数 */ private int mTouchSlop; /** * 手机按下时的屏幕坐
android横向滑动组件,Android使用HorizontalScrollView实现水平滚动
weixin_34221154的博客
05-25 2014
HorizontalScrollView 和 ScrollView 都是由 FrameLayout 派生出来的。它们就是一个用于为普通组件添加滚动条的组件。且 HorizontalScrollView 和 ScrollView 里面最多只能包含一个组件(当然组件里面还可以嵌套组件)。它们不同的是 HorizontalScrollView 用于添加水平滚动，而 ScrollView 用于添加垂直滚动...
做5个滑动界面Android,揭秘Android界面水平滑动与竖直滑动实现
weixin_35430535的博客
05-28 457
第二步，我们需要一个List之类的对象来帮我存放这些窗花纸，使我们能按顺序调用上一个或下一个View，这就是ViewFlipper对象。先声明一个ViewFlipper类的引用。//定义一个ViewFlipper对象的引用privateViewFlippermyViewFlipper;其次，我们将layout下main.xml里的标签换为标签。有人问为何要只留一个，因为不清空的话这些main里...
android 水平滑动分页指示器_Android ViewPager指示器
weixin_42452892的博客
12-31 569
在很多常见的app中都有使用指示器，别的不说，简书app顶部就是一个指示器啦，那么指示器这种效果该怎么做呢？步骤有以下几点：1、构建布局。你的指示器应该长什么样子，在界面中的什么位置，它应该有多少个页面(即有多少个tab选项卡)，你给它设计的滑动跟随的东西是三角形还是一杠？2、自定义控件。虽然不用自定义控件貌似也能做出指示器的效果，但这样你就需要对多个控件单独控制，一个tab的内容就是一个Text...
Android自定义ViewPager实现纵向滑动翻页效果
08-27
主要为大家详细介绍了Android自定义ViewPager实现纵向滑动翻页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android自定义ViewPager指示器
09-01
主要为大家详细介绍了Android自定义ViewPager指示器的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android 弹性的Viewpager
weixin_51829969的博客
10-23 94
Android 弹性的Viewpager代码 代码 TouchMoveHelper.java import android.content.Context; import android.graphics.PointF; import android.view.MotionEvent; import android.view.ViewConfiguration; public class TouchMoveHelper { private PointF startPosition; pr
android viewpager 弹性效果的实现,首页往左拉弹回,尾页往右拉弹回
Dream It Possible
03-19 3560
http://blog.csdn.net/com314159/article/details/17762661 这个实现,我今天找了蛮久,最后决定用的方法是这个: http://stackoverflow.com/questions/13759862/android-viewpager-how-to-achieve-the-bound-effect 直接按照上面的方法
ViewPager的弹性缩回效果
04-16
NULL 博文链接：https://gundumw100.iteye.com/blog/1775588
弹性效果的ViewPager的小Demo
01-11
欢迎下载学习交流。 这是我的博客地址 http://blog.csdn.net/u010386612
ViewPage多页面切换+Cursor图片随手指一起移动
05-09
在网上用找到一些ViewPager的例子，都很好，但是呢。现在需要做Cursor图片是随着手指的移动而反向移动。这个我是没找到，于是自己加工了一下。 原本一直考虑用View.layout(l,t,r,b);后来发现不行，最后该用了leftMargin。 代码没做什么优化。单单实现功能
ViewPager局部滑动指引效果+ScrollView弹性异步加载效果
11-05
ViewPager局部滑动指引效果+ScrollView弹性异步加载效果，类似掌中新浪主页viewPager和新闻列表的效果！
可搭配ViewPager相互控制的弹性动画View。
u012956526的博客
12-03 355
BezierRoundView可搭配ViewPager相互控制的弹性动画View。
实现 ViewPager 回弹效果
Jesse_liao的博客
01-13 2737
实现 ViewPager 回弹效果在开发遇到产品需要实现回弹效果，我通过继承V4中的ViewPager来实现， 具体代码如下： public class ZoomViewPager extends ScanViewPager { private float preX = 0f; private static final float RATIO = 0.6f;//摩擦系数
Android——ViewPager多页面滑动切换以及动画效果
最新发布
05-27
ViewPager是一个Android中的View容器，可以让用户在多个页面之间进行滑动切换。要实现多页面滑动切换以及动画效果，可以按照以下步骤： 1. 在XML布局文件中添加ViewPager控件，并添加对应的布局文件，例如： ``` <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在Java代码中为ViewPager设置Adapter，用于显示多个页面。例如： ``` ViewPager viewPager = findViewById(R.id.viewPager); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); ``` 其中，MyPagerAdapter是自定义的PagerAdapter类，需要继承自FragmentPagerAdapter或FragmentStatePagerAdapter。 3. 在自定义的PagerAdapter类中实现getItem()方法，用于返回每个页面的Fragment实例。例如： ``` @Override public Fragment getItem(int position) { switch (position) { case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); default: return null; } } ``` 其中，Fragment1、Fragment2、Fragment3是自定义的Fragment类，用于显示对应页面的内容。 4. 如果需要添加页面切换的动画效果，可以在Java代码中为ViewPager设置PageTransformer。例如： ``` viewPager.setPageTransformer(true, new DepthPageTransformer()); ``` 其中，DepthPageTransformer是自定义的PageTransformer类，用于实现页面切换时的动画效果。可以参考以下代码示例： ``` public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0f); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1f); view.setTranslationX(0f); view.setScaleX(1f); view.setScaleY(1f); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0f); } } } ``` 以上就是实现Android中ViewPager多页面滑动切换以及动画效果的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值