刷動態時無意間發現了這個效果覺得用在打廣告上實在是妙，使用者只需要上下滑動列表就會自動切換廣告圖（感興趣的可以在刷空間的時候留意一下）。

一：接下來就來說說這個效果的具體實現思路

• 通過自定義ImageView、繪製兩張圖片在上面。通過刮刮卡原理在ImageView上繪製一個圓不斷加大半徑來顯示第二張圖片
• 當廣告位（也就是ImageVIew）剛好完全顯示在螢幕底部時，便開始根據圖片距離底部的距離來顯示第二張廣告（圖片）

二：怎麼知道View剛好顯示在螢幕底部呢？

View中有一個getLocationOnScreen()函式可以用來獲取當前view所在螢幕上的座標（以左上角位座標點），通過設定RecyclerView的滑動監聽來不斷獲取View的座標如下：

int[] location = new int[2];
//獲取view在螢幕上的座標
getLocationOnScreen(location);
//x座標
int x = location[0];
//y座標
int y = location[1];

三：將需要展示的兩張圖片繪製在ImageView上，先繪製的會置於底部顯示

重寫onMeasure()函式獲取View的寬高並解析圖片

private int[] images = {R.drawable.waller_three, R.drawable.waller};

@Override
protected void onMeasure(int widthMeasureSpec, int
 
 heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
   /*獲取view的高寬*/
  int width = MeasureSpec.getSize(widthMeasureSpec);
  int height = MeasureSpec.getSize(heightMeasureSpec);
  //以view的大小繪製一個矩形，
  RectF rectF = new RectF(0, 0, width, height);
  /*解析圖片*/
  Bitmap background = ((BitmapDrawable) getResources().getDrawable(images[0
 
])).getBitmap();//置於底部的圖片
  Bitmap frontImage = ((BitmapDrawable) getResources().getDrawable(images[1])).getBitmap();//置於頂部的圖片
  /*建立一個空bitmap*/
  Bitmap frontBg = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  //在frontBg 上做畫
  Canvas frontCanvas = new Canvas(frontBg);
}

四：接下就是繪製bitmap顯示在ImageView上

@Override
@SuppressLint("DrawAllocation")
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //將顯示於頂部的圖片繪製到frontCanvas畫布上
    frontCanvas.drawBitmap(frontImage, null, rectF, null);
    //繪製背景廣告  
    canvas.drawBitmap(background, null, rectF, null);
    //繪製前景廣告
    canvas.drawBitmap(frontBg, null, rectF, null);
    //請注意canvas繪製的順序，為什麼上層廣告需要 空bitmap呢？ 因為執setXfermode操作需要canvas，需要建立新的canvas中介
    //一句話，canvas正常繪製，對上層圖片操作，因此需要Canvas frontCanvas = new Canvas(frontBg);   
    //frontCanvas給空的frontBg附上bitmap內容(真實的frontImage)，執行Xfermode操作，使用frontCanvas
}

這裡就是依賴於paint的一個 Xfermode 屬性Xfermode 教學 —>paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 取兩層繪製交集，顯示下層內容

五：初始化我們的paint，並在滑動的時候畫圓這樣就可以使得底部的圖片顯示出來

private void init() {
    paint = new Paint();
    paint.setAlpha(0);
    /*在已有的影象上繪圖將會在其上面新增一層新的圖層，如果新圖層的paint是不透明的,那麼它將遮擋住下面的paint；
    如果新圖層它是部分透明的,那麼它不透明的地方將會被染上下面的顏色*/
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
    paint.setStyle(Paint.Style.FILL);
    paint.setAntiAlias(true);
    paint.setStrokeWidth(0);
    //設定筆觸和連線處能更加圓滑
    paint.setStrokeJoin(Paint.Join.ROUND);
    paint.setStrokeCap(Paint.Cap.ROUND);
}

/**
 *繪製兩個圖片的交集部分，達到顯示兩個圖片的目的
 */
private void getLocation() {
    int[] location = new int[2];
    //獲取view在螢幕上的座標
    this.getLocationOnScreen(location);
    int y = location[1];
    //圖片在螢幕中的話 0 < y  圖片完全顯示在螢幕中
    int height = y + getHeight();//view底部距離螢幕頂部的高度
    if (y > 0 && screenHeight >= height) {
        //圖片顯示在螢幕中了 ,r即為圓的半徑
        r = (float) ((screenHeight - height) * 1.5);
        frontCanvas.drawCircle(width, height, r, paint);
    } else {
        //向下滑動
        if (r < width)
            r = 0;
    }
    invalidate();}

github 傳送地址(不知道是不是同一作者)，https://github.com/CocoQueen/QQZoneAdvertising