Android 高仿QQ空间广告位 ——— 一个位置来回切换两张广告图

本文出自阿钟的博客，转载请注明出处: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 高仿QQ空间广告位 ——— 一个位置来回切换两张广告图相关推荐

使用RecyclerView实现QQ空间广告位一个位置两个图时偶遇bug
前段时间就发现手机qq空间内,在动态中插入的广告在滑动的时候有猫腻(一个位置来回切换两张广告图),一直想要去实现这个效果,但是一直都没有时间去研究,昨天刷空间的时候就又看到了这个效果,所以就在网上找了 ...
android弹窗使用总结，高仿QQ空间操作弹窗
android弹窗一共有两种方式,一种是dialog及其子类,另一种是popupwindow:Dialog及其子类尤其AlertDialog是最常用的,也是最自由的一种. **Popupwindow与 ...
android qq红点,Android高仿QQ小红点功能
先给大家展示下效果图: 绘制贝塞尔曲线: 主要是当在一定范围内拖拽时算出固定圆和拖拽圆的外切直线以及对应的切点,就可以通过path.quadTo()来绘制二阶贝塞尔曲线了~ 整体思路: 1.当小红点静 ...
高仿QQ空间项目实战开发(带服务器端程序)
大家好,今天我在这里分享一个小程序.高仿QQ空间的APP,这里给大家分享一个安卓APP和PHP写的服务器程序.想提高安卓开发能力或安卓和后台服务器一起做的初学者值得一看,老鸟跳过. 接下来我们看看效果 ...
android qq底部图片选择器,Android 高仿QQ图片选择器
当做一款APP,需要选择本地图片时,首先考虑的无疑是系统相册,但是Android手机五花八门,再者手机像素的提升,大图无法返回等异常因数,导致适配机型比较困难,微信.QQ都相继的在自己的APP里集成了 ...
android+qq底部界面,Android 高仿QQ 界面滑动效果
Android高仿QQ界面滑动效果点击或者滑动切换画面,用ViewPager实现, 首先是布局文件: android:layout_width="match_parent" an ...
Android高仿qq及微信底部菜单的几种实现方式
文章目录导航类型第一种方式:侧滑菜单+底部导航,已经实现聊天,表情,图片,位置,语音等信息的发送. 第二种方式:Fragment+PopupWindow仿QQ空间最新版底部菜单栏第三种方式:Fr ...
Android高仿QQ及微信底部菜单的多种实现方式【附源码地址】
第一种方式:侧滑菜单+底部导航,已经实现聊天,表情,图片,位置,语音等信息的发送. 看效果: 下载地址:https://github.com/HuTianQi/QQ 第二种方式:Fragment+Po ...
仿QQ空间用一个tableview显示多种自定义cell
2019独角兽企业重金招聘Python工程师标准>>> 第一部分要实现效果先来看看真实QQ空间的效果吧: 从这张截图中,可以看到两种自定义的cell,其实在QQ空间的我的空间中有 ...
Android高仿QQ消息列表、侧拉删除菜单按钮效果
目录(本篇字数:3000) 介绍 Item布局自定义存放Item父容器 Bug分析 ·一.解决滑动冲突二.解决Item点击事件的冲突三.限制只能有一个menu被打开博文续篇 ListV ...