Android 高仿QQ空间广告位 ——— 一个位置来回切换两张广告图
2023-09-14 09:04:17 时间
本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon http://blog.csdn.net/a_zhon/article/details/75761182
刷动态时无意间发现了这个效果觉得用在打广告上实在是妙,用户只需要上下滑动列表就会自动切换广告图(感兴趣的可以在刷空间的时候留意一下)。
一:接下来就来说说这个效果的具体实现思路
- 通过自定义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
相关文章
- Android开发之解决APP启动白屏或者黑屏闪现的问题
- android ndk之hello world
- android 之断点续传详解三部曲之[二] → 断点续传下载
- android性能优化
- 熬夜再战Android之修炼Kotlin-互操作篇
- Android 系统服务 io多路复用
- Android kotlin 系列讲解(基础篇) 关键字:open、final和abstract(抽象类)
- android ViewFlipper实现垂直滚动动画
- 【Android Gradle 插件】自定义 Gradle 任务 ⑨ ( 控制 Gradle 执行任务顺序 | Task#finalizedBy 函数 | 控制 Gradle 执行任务顺序示例分析 )
- Android 开发 --Unable to resolve target 'android-19'
- Android里获取正在前端运行的Activity的包名
- Android Camera 运行流程