在前面一篇博文《Android高仿京東淘寶自動無限迴圈輪播控制元件的實現思路和過程》中已經基本介紹了實現輪播廣告的基本思路和過程，但是仔細觀察淘寶的輪播廣告欄，發現在輪播廣告欄的底部有個小小的弧形，為了實現更好的效果，在後期中在自己定義的無限輪播控制元件中添加了底部弧形的實現，在實現的過程中也遇到了一些問題，比較麻煩的就是繪製時弧形出現了鋸齒的問題。

實現弧形的主要程式碼以及實現效果（帶有鋸齒的情況）

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、效果圖

執行程式碼，可以看到效果，效果圖如下。

問題

底部的弧形雖然已經繪製成功了，但是從效果圖中可以明顯看出弧形帶有鋸齒，效果並不好，再看下現在淘寶的效果，有點困擾了。

解決辦法

解決方法並不難，但是需要引入另外一個繪圖工具 —— 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);
    }

最終效果圖

修改程式碼後執行，獲得最終效果，已經明顯消除了鋸齒，效果優美多了，弧形變得光滑了。