自定义View之炫酷的水滴ViewPageIndicator

2023-10-23 07:38

本文主要是介绍自定义View之炫酷的水滴ViewPageIndicator,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 *本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 

        去年在是某个Android群了看到有人发了一个设计图,觉得很好。想自己实现一下,到上网搜了一些资料,比如参考,这位兄弟已经把如何绘制一个弹性的圆写的很详细了,在此对他表示感谢。不过他没有完整实现这个自定义控件,所以还是自己动手实现一个,但是我觉得效果和原设计还有差距,一直没写博客。这几天抽时间把里面的效果在改了改,顺便也把博客写了。

源码地址放在最后,先上效果图:

下面开始分析写得思路,先来个方法截图:



        用贝塞尔曲线绘制一个圆需要12个点,如上图所示。然后在绘制时用mPath.cubicTo()依次连接,canvas.drawPath(mPath, mPaint)就能绘制一个完整的圆了,弹性圆就是在此基础上调整p的参数。比如{p2,p3,p4},增加X坐标,会使圆向右凸起。

代码中XPoint为x相同的一组点:p2,p3,p4和p8,p9,p10,YPoint 同理。代码中的mc对应图中的M,绘制圆时这个值是固定的,理论参考:How to create circle with Bézier curves?。p1={p5,p6,p7}.,p3={p11,p0,p1},p2={p2,p3,p4},p4={p8,p9,p10},radius为圆半径。

private XPoint p2, p4;
private YPoint p1, p3;
private void resetP() {p1.setY(radius);
    p1.setX(0);
    p1.setMc(mc);

    p3.setY(-radius);
    p3.setX(0);
    p3.setMc(mc);

    p2.setY(0);
    p2.setX(radius);
    p2.setMc(mc);

    p4.setY(0);
    p4.setX(-radius);
    p4.setMc(mc);
}
resetP()在完成选项切换时都需要调用一下,重置绘制的圆形形状,不然有时候会绘制不规则的圆,造成这个的原因是view刷新频率是有限的,有些临界状态直接就跳过了,导致参数没跟着变化就绘制了图像。

下面根据两种切换viewpager的方式分析:

第一种情况,点击indicator切换:

在onTouchEvent计算将要切换的位置,调用startAniTo(int currentPos, int toPos),  animator监听setTouchAble(!animating)是禁止动画未结束用户又去手动滑动viewpager切换。

private boolean startAniTo(int currentPos, int toPos) {this.currentPos = currentPos;
    this.toPos = toPos;
    if (currentPos == toPos)return true;
    startColor = roundColors[(this.currentPos) % 4];
    endColor = roundColors[(toPos) % 4];
    resetP();
    startX = div + radius + (this.currentPos) * (div + 2 * radius);
    distance = (toPos - this.currentPos) * (2 * radius + div) + (toPos > currentPos ? -radius : radius);
    if (animator == null) {animator = ValueAnimator.ofFloat(0, 1.0f);
        animator.setDuration(duration);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Override
            public void onAnimationUpdate(ValueAnimator animation) {mCurrentTime = (float) animation.getAnimatedValue();
                invalidate();
            }});
        animator.addListener(new Animator.AnimatorListener() {@Override
            public void onAnimationStart(Animator animation) {animating = true;
                setTouchAble(!animating);
            }@Override
            public void onAnimationEnd(Animator animation) {goo();
                animating = false;
                setTouchAble(!animating);
            }@Override
            public void onAnimationCancel(Animator animation) {goo();
                animating = false;
                setTouchAble(!animating);
            }@Override
            public void onAnimationRepeat(Animator animation) {}});
    }animator.start();
    if (mViewPager != null) {mViewPager.setCurrentItem(toPos);
    }return true;
}

下面是dispatchDraw方法,为了更简单看懂,我就截取position从左向右的情况;处理临界情况很重要,没处理好你会发现绘制出来的是什么鬼!

@Override
protected void dispatchDraw(Canvas canvas) {canvas.save();
    mPath.reset();
    tabNum = getChildCount();
    for (int i = 0; i < tabNum; i++) {canvas.drawCircle(div + radius + i * (div + 2 * radius), startY, radius, mPaintCircle);
    }if (mCurrentTime == 0) {resetP();
        canvas.drawCircle(div + radius + (currentPos) * (div + 2 * radius), startY, 0, mClickPaint);
        mPaint.setColor(startColor);
        canvas.translate(startX, startY);
        p2.setX(radius);
    }if (mCurrentTime > 0 && mCurrentTime <= 0.2) {if (animating)canvas.drawCircle(div + radius + (toPos) * (div + 2 * radius), startY, radius * 1.0f * 5 * mCurrentTime, mClickPaint);
        canvas.translate(startX, startY);
        p2.setX(radius + 2 * 5 * mCurrentTime * radius / 2);
    } else if (mCurrentTime > 0.2 && mCurrentTime <= 0.5) {canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);
        p2.setX(2 * radius);
        p1.setX(0.5f * radius * (mCurrentTime - 0.2f) / 0.3f);
        p3.setX(0.5f * radius * (mCurrentTime - 0.2f) / 0.3f);
        p2.setMc(mc + (mCurrentTime - 0.2f) * mc / 4 / 0.3f);
        p4.setMc(mc + (mCurrentTime - 0.2f) * mc / 4 / 0.3f);
    } else if (mCurrentTime > 0.5 && mCurrentTime <= 0.8) {canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);
        p1.setX(0.5f * radius + 0.5f * radius * (mCurrentTime - 0.5f) / 0.3f);
        p3.setX(0.5f * radius + 0.5f * radius * (mCurrentTime - 0.5f) / 0.3f);
        p2.setMc(1.25f * mc - 0.25f * mc * (mCurrentTime - 0.5f) / 0.3f);
        p4.setMc(1.25f * mc - 0.25f * mc * (mCurrentTime - 0.5f) / 0.3f);
    } else if (mCurrentTime > 0.8 && mCurrentTime <= 0.9) {p2.setMc(mc);
        p4.setMc(mc);
        canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);
        p4.setX(-radius + 1.6f * radius * (mCurrentTime - 0.8f) / 0.1f);
    } else if (mCurrentTime > 0.9 && mCurrentTime < 1) {p1.setX(radius);
        p3.setX(radius);
        canvas.translate(startX + distance, startY);
        p4.setX(0.6f * radius - 0.6f * radius * (mCurrentTime - 0.9f) / 0.1f);
    }if (mCurrentTime == 1) {lastCurrentTime = 0;
        mPaint.setColor(endColor);
        p1.setX(radius);
        p3.setX(radius);
        canvas.translate(startX + distance, startY);
        p4.setX(0);
        currentPos = toPos;
        resetP();
        canvas.translate(radius, 0);
    }mPath.moveTo(p1.x, p1.y);
    mPath.cubicTo(p1.right.x, p1.right.y, p2.bottom.x, p2.bottom.y, p2.x, p2.y);
    mPath.cubicTo(p2.top.x, p2.top.y, p3.right.x, p3.right.y, p3.x, p3.y);
    mPath.cubicTo(p3.left.x, p3.left.y, p4.top.x, p4.top.y, p4.x, p4.y);
    mPath.cubicTo(p4.bottom.x, p4.bottom.y, p1.left.x, p1.left.y, p1.x, p1.y);
    if (mCurrentTime > 0 && mCurrentTime < 1)mPaint.setColor(getCurrentColor(mCurrentTime, startColor, endColor));
    canvas.drawPath(mPath, mPaint);
    canvas.restore();
    super.dispatchDraw(canvas);
}
mCurrentTime 是动画变化时刷新的值,从0到1,根据这个值重绘时计算圆的坐标。我将mCurrentTime 分为下列几种状态:
mCurrentTime == 0: 
        这个状态就是根据position绘制正常的圆。
mCurrentTime > 0 && mCurrentTime <= 0.2:
        这个此时圆向右凸起,但是原本的canvas.translate和上个状态不变,所以是圆停止在当前位置并且慢慢凸起的效果。
mCurrentTime > 0.2 && mCurrentTime <= 0.5:
        这时圆开始平移,canvas.translate(startX + (mCurrentTime - 0.2f) * distance / 0.7f, startY);那为啥是除以0.7呢?因为0到0.2没平移,0.2到0.9平移完成,0.9到1处理回弹。平移时间只有0.9-0.2=0.7,这段时间要完成一个distance的距离的平移。同时之前圆向右凸起时,p2组的点x坐标总共增加了一个radius(这个决定凸起程度)。现在要把它弄回对称椭圆,所以p1组和p3组的点要右移半个radius,同时mc调整一下使椭圆不那么尖;
mCurrentTime > 0.5 && mCurrentTime <= 0.8:
        p1和p3的X坐标继续往右移,mc逐渐重置为原来大小,效果就是圆的最右端固定不变,左边的凸起缩回去,
mCurrentTime > 0.8 && mCurrentTime <= 0.9:
        左边的p4.组点往右平移过头,圆形成凹陷,
mCurrentTime > 0.9 && mCurrentTime < 1:
        这个阶段是处理回弹,p4.组点x逐渐恢复正常。表现为回弹恢复为标准圆。
mCurrentTime == 1:
        position此时真实改变了,重置为正常的圆。
        以上的每个阶段在进入下个阶段时,都需要重置一下p坐标,因为view刷新频率是有限的,有些结束的临界状态值直接就跳过了,导致参数没跟着变化就绘制了图像。


第二种情况,拖动viewpager切换:

viewPager.addOnPageChangeListener,在onPageScrolled中调用 updateDrop(position, positionOffset, positionOffsetPixels),更新位置。这里需要注意的是点击indicator也会回调, 若不进行判断会造成重复的移动,所以之前在动画开启的监听时设置boolean animating值。

private void updateDrop(int position, float positionOffset, int positionOffsetPixels) {if (animator != null)animator.cancel();
    if ((position + positionOffset) - currentPos > 0)direction = true;
    else if ((position + positionOffset) - currentPos < 0)direction = false;
    if (direction)toPos = currentPos + 1;
    else
        toPos = currentPos - 1;
    startColor = roundColors[(currentPos) % 4];
    endColor = roundColors[(currentPos + (direction ? 1 : -1)) % 4];
    startX = div + radius + (currentPos) * (div + 2 * radius);
    distance = direction ? ((2 * radius + div) + (direction ? -radius : radius)) : (-(2 * radius + div) + (direction ? -radius : radius));
    mCurrentTime = position + positionOffset - (int) (position + positionOffset);
    if (!direction)mCurrentTime = 1 - mCurrentTime;
    if (Math.abs(lastCurrentTime - mCurrentTime) > 0.2) {//突变时根据接近0或1更改为0或1;
        if (lastCurrentTime < 0.1)mCurrentTime = 0;
        else if (lastCurrentTime > 0.9)mCurrentTime = 1;
    }lastCurrentTime = mCurrentTime;
    invalidate();
}
        这里我用mCurrentTime = position + positionOffset - (int) (position + positionOffset);然而这样计算是有问题的,比如向左滑动,它是从0到0.9几,然后突变为0,为了这个判断添加了一个lastCurrentTime ,根据接近接近0或1更改为0或1。

        总结一下,需要注意的是mCurrentTime 状态的划分、临界状态的处理、以及在合适的位置重置p坐标,在写的过程几次碰到绘制的图像莫名其妙,这是p的坐标问题,查找原因一般也是状态没重置。

       写在最后:昨天投稿了,今天收到郭神的回复,会帮我发布文章,但是由于稿件的积压,需要等上一段时间,还是很开心,感谢郭神。

源码地址:https://github.com/Ulez/DropIndicator


这篇关于自定义View之炫酷的水滴ViewPageIndicator的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/266466

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”(Authentication)“授权” (Auth

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter(过滤器)类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter(过滤器)简介dubbo 过滤器运行时机自定义 filter第一种 @A

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06