高仿QQ空间广告位 ——— 一个位置来回切换两张广告图，高仿广告位,一：接下来就来说说这个效

高仿QQ空间广告位 ——— 一个位置来回切换两张广告图，高仿广告位,一：接下来就来说说这个效

刷动态时无意间发现了这个效果觉得用在打广告上实在是妙，用户只需要上下滑动列表就会自动切换广告图（感兴趣的可以在刷空间的时候留意一下）。

一：接下来就来说说这个效果的具体实现思路

• 通过自定义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);
}

这里就是依赖于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();
}

我是有底线的： Apk下载体验 源码下载

作者：阿钟程序猿