只需三步,用Delphi实现一个支持手势切换和缩放的图片浏览器!

OrangeUI控件包中有一个图片列表查看控件,叫ImageListViewer,

它一开始主要是用来做为APP首页广告轮播功能的,

但也能用它来轻松实现一个支持手势切换和手势缩放的图片查看器

比如查看订单商品的多张图片:

ImageListViewer 在Android上测试查看多张商品图片

或者发布朋友圈时查看选择的多张图片:

怎么来实现呢?

首先需要放一个SkinImageList,取名为imglistWelcome,

将所有要显示的图片都添加进去

我们在Frame上放一个ImageListViewer控件,取名为imglistviewerCommon,

将它的Align设置为Client,让它占满整个窗体,

怎么让它来显示SkinImageList中的图片呢?

将它的Properties.Picture.SkinImageList设置为我们上面添加的那个imglistWelcome即可

来看一下效果:

因为我们添加的图片有点大的,是1080*1920的,但是我们的控件尺寸太小,显示不下,

只需要将图片绘制参数设置为拉伸即可,尺寸自适应,避免变形,

将它的SelfOwnMaterial.DrawPictureParam.IsStretch设置为True,IsAutoFit设置为True,

目前效果如下:

可以看出来,图片是全部显示出来了,但是没在居中显示,

所以还需要调整一下:

将SelfOwnMaterial.DrawPictureParam.PictureHorzAlign设置为phaCenter,

PictureVertAlign设置为pvaCenter,

效果如下:

显示相关的设置到此就结束了

接下来设置手势切换

设置它的Properties.CanGestureSwitch为True,即表示允许手势切换,

还有一个属性叫CanGestureSwitchDistance,它表示手势切换超过多少距离才允许切换到下一张图片。

在Windows下我们可以用鼠标拖动来模拟手势切换:

ImageListViewer 在Windows上模拟手势切换

但是这里还有一个细节,就是手势切换到最后一页,就切换不过去的,

效果如下:

ImageListViewer 在Windows上模拟手势切换 最后一张手势切换不过去

有些同学可能还需要还能再切换回第一页去,这样循环切换,

只需要将它的Properties.GestureSwitchLooped设置为True即可:

效果如下:

ImageListViewer 在Windows上模拟手势切换 设置为可以循环切换

最后设置手势缩放

将它的Properties.CanGestureZoom设置为True:

这样还不够,

我在之前一篇文章中讲过窗体有手势的Touch属性和OnGesture事件,

当然控件也有Touch.InteractiveGestures属性和OnGesture事件,但是我在测试的过种中发现没有没有窗体的事件灵敏,

并且我们还需要在窗体的OnTouch事件中获取缩放时两根手指所触摸的位置来确定缩放中心点,

所以,我们还需要在窗体中做如下处理,

将窗体设置为触发缩放和双击的手势:

在OnTouch事件中将手指的触摸位置和个数保存到gFormTouch*的全局变量中,

在OnGesture事件中对控件进行缩放:

在手机运行看下效果:

ImageListViewer 在Android上测试手势切换

就这样,一个图片浏览器就做好了

你就可以应用到你的项目中去啦!

你也可以直接使用控件包中的ViewPictureListFrame,

本文开头的两张图片都是直接调用这个页面的。

使用OrangeUI,带你轻松进入Delphi开发APP的世界!

对OrangeUI感兴趣的朋友可以加入QQ群相互学习交流:

IMG_256

也可以关注本公众号来获取更多Delphi相关的内容:

IMG_256