Android使用Path实现仿最新淘宝轮播广告底部弧形有锯齿的问题以及解决办法

在前面一篇博文《Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程》中已经基本介绍了实现轮播广告的基本思路和过程,但是仔细观察淘宝的轮播广告栏,发现在轮播广告栏的底部有个小小的弧形,为了实现更好的效果,在后期中在自己定义的无限轮播控件中添加了底部弧形的实现,在实现的过程中也遇到了一些问题,比较麻烦的就是绘制时弧形出现了锯齿的问题。

实现弧形的主要代码以及实现效果(带有锯齿的情况)

首先要感谢开源 感谢开源框架 https://github.com/florent37/ArcLayout ,弧形的实现效果是根据该框架而来,使用 path 来绘制弧形,首先就是要创建好 path 了。

1. 新建 path

private Path createClipPath() {
        final Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(0, height);
        path.quadTo(width / 2, height - 2 * arcHeight, width, height);
        path.lineTo(width, 0);
        path.close();

        return path;
}

2.测量计算

绘制弧形是根据轮播控件的宽度和高度而来的,所以需要先测量出轮播控件的宽度和高度,并且当子 View 的位置和尺寸变化时,需要重新测量绘制。

@Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (changed) {
            calculateLayout();
        }
    }

    /**
     *calculate layout
     */
    private void calculateLayout() {
        height = getMeasuredHeight();
        width = getMeasuredWidth();
        if (width > 0 && height > 0) {

            clipPath = createClipPath();
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && arcShape != ArcShape.inSide) {
                setOutlineProvider(new ViewOutlineProvider() {
                    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
                    @Override
                    public void getOutline(View view, Outline outline) {
                        outline.setConvexPath(clipPath);
                    }
                });
            }
        }
    }

3、绘制弧形

绘制图形时,有一个控件是很重要的,那就是 Canvas 画布,也是最后一步,在画布上面绘制。

@Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();

        canvas.clipPath(clipPath);
        super.dispatchDraw(canvas);

        canvas.restore();
    }

4、效果图

运行代码,可以看到效果,效果图如下。
效果图

问题

底部的弧形虽然已经绘制成功了,但是从效果图中可以明显看出弧形带有锯齿,效果并不好,再看下现在淘宝的效果,有点困扰了。

解决办法

在网上查找了资料,也没有发现什么好的办法,最后在 Github 上面找到了答案 https://github.com/florent37/ArcLayout/issues/8

解决方法并不难,但是需要引入另外一个绘图工具 —— Paint,通过 Paint 来消除锯齿,因为 Paint 本身就有自带的消除锯齿的方法 paint.setAntiAlias(true),当然还需要设置下 Xfermode,不过和目前网上提供的方法有所不同了,看下面的代码,修改在画布 Canvas 中的绘制方法。

@Override
    protected void dispatchDraw(Canvas canvas) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(Color.WHITE);
        int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        super.dispatchDraw(canvas);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
        canvas.drawPath(clipPath, paint);
        canvas.restoreToCount(saveCount);
        paint.setXfermode(null);
    }

最终效果图

修改代码后运行,获得最终效果,已经明显消除了锯齿,效果优美多了,弧形变得光滑了。

这里写图片描述

自定义的高仿京东淘宝控件已经修改完成了,代码已经开源在 Github 上面,https://github.com/LT5505/SliderLayout

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值