最近在实现一个类似淘宝中的评论列表的功能,其中要在列表中显示评论图,点击图片后显示大图进行查看,各家app几乎都会有这样的功能。

大学生就业培训,高中生培训,在职人员转行培训,企业团训

可以看到,一个体验较好的查看大图的基本功能有,

第一,左右滑动时切换图片;

第二,双击或双指缩放实现图片的缩放;

第三,图片放大时,滑动到边缘继续滑动时,切换图片。

因为我们的app中使用了fresco库,但fresco提供的SimpleDraweeView不支持缩放,看网上有人扩展了SimpleDraweeView,使之支持缩放。但经过漫长的调研,发现fresco近期提供了一个新的sample:ZoomableDraweeView,专门用来支持缩放,欣喜若狂的下载下来把玩了一把,发现三个需求点都满足!可惜的是,这个控件在细节上有几点不满足:双击后放大到最大,再双击后却缩小为最小(期望恢复为正常大小),虽然最小可以设置,但这个值应该是在双指缩小时才用到。另一点是在双指缩小并松开后,图片保持在那个缩小的尺寸(期望自动恢复为正常大小)。

查看代码后发现需要修改几点就可以满足我的需求。下面的内容主要记录我思考问题、解决问题的思路,如果你也有类似的需求,可以直接拿代码:https://github.com/ibosong/CommentGallery

1. 双击恢复正常尺寸

修改DoubleTapGestureListener 中的onDoubleTapEvent方法,因为主要修改的逻辑在双指松开后,于是我们在MotionEvent.ACTION_UP的case中修改相关逻辑。首先判断mDoubleTapScroll,即是否是双击后不松开并滑动的操作,这种操作下如果在松开手指时,图片为缩小状态,应当恢复正常大小,所以将原代码:

if (mDoubleTapScroll) {  float scale = calcScale(vp);
  zc.zoomToPoint(scale, mDoubleTapImagePoint, mDoubleTapViewPoint);
}

修改为:

大学生就业培训,高中生培训,在职人员转行培训,企业团训

        		

网友评论