仿知乎创新广告

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 517 | 阅读时长 ≈ 2

1、效果描述

知乎看到的一种非常有特色的广告展现方式，即在列表页，某一个Item显示背后部分广告图，随着列表滚动，会逐渐展示全部图片。

2、实现

  • 2.1 实现思路

在需要列表滚动时候，改变图片的显示部分

有两个核心点

  1. 捕获列表滚动变化的dy，不管是ListView还是RecyclerView都可以做到

  2. 图片显示部分变化，可以利用canvas.translate

方案一：

自定义view，自己去绘制bitmap，对外暴露setDy（dy），然后根据dy做canvas.translate偏移重绘即可

方案二：(更优)

利用Drawable本身就是可以绘制的，直接利用drawable去完成，当然还是要结合canvas.translate

注意super.onDrawer的调用时机

3、涉及到的技术点

  • 3.1 ImageView:ScaleType

不进行缩放:

1
2
MATRIX 
CENTER : 不改变原图大小从ImageView的左上角开始绘制，超过ImageView部分不再显示。

等比例缩放

1
2
3
4
5
6
7
8
9
CENTER_CROP: 对原图居中显示后进行等比放缩处理，使原图最小边等于ImageView的相应边。

CENTER_INSIDE: 若原图宽高小于ImageView宽高，这原图不做处理居中显示，否则按比例放缩原图宽(高)是之等于ImageView的宽(高)。 

FIT_START: 对原图按比例放缩使之等于ImageView的宽高，若原图高大于宽则左对齐否则上对齐。 

FIT_CENTER: 对原图按比例放缩使之等于ImageView的宽高使之居中显示。 

FIT_END: 对原图按比例放缩使之等于ImageView的宽高，若原图高大于宽则右对齐否则下对齐。

不等比例缩放

1
FIT_XY： 对原图宽高进行放缩，该放缩不保持原比例来填充满ImageView。

图片信息可能丢失

1
2
3
4
MATRIX 
CENTER ： 不缩放就有可能丢失 

CENTER_CROP

图片过小时不会放大的情况

1
2
3
4
不缩放肯定就不会放大 MATRIX 
CENTER

CENTER_INSIDE

参考：

http://mp.weixin.qq.com/s/BHbmtfUzg3XTaGrGcX5-bg

0%