![iOS开发:从零基础到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/796/26793796/b_26793796.jpg)
7.3 图片控件UIImageView
7.3.1 基本使用
UIImageView是用来显示图片的UI控件,在使用过程中需要重点区分UIImageView以及UIImage的区别,另外,还需要重点掌握UIImageView的创建以及相关样式设置的操作方法。
1.UIImageView与UIImage的区别
UIImageView与UIImage对于初学者来讲比较容易混淆,因此在学习UIImageView之前,首先需要了解UIImageView与UIImage的联系和区别。
- UIImageView:这是UI控件,继承自UIView,是用来显示图片的控件,UIImageView中有一个UIImage类型的属性——image,用来存放需要显示的图片。
- UIImage:可以理解为是图片文件,文件是不能显示的,文件相当于保存在磁盘上的一堆二进制编码。UIImage的父类是NSObject。创建UIImage对象可以使用imageNamed:以及imageWithContentsOfFile:方法,区别在于需要传入的图片文件的路径不同。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T201_22755.jpg?sign=1739333832-AqYEeOj5oxEcn5sOMXY6uZ7ESaMn2Lo2-0-b8b0eed7a84a2fde4df96e129512cd98)
2.UIImageView对象的创建
UIImageView对象的创建可以使用代码以及XIB的方式创建。当使用代码方式创建时,可以使用如下方法:
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T202_22827.jpg?sign=1739333832-qt1Zpgm0OszuFPO18MkO8UKXwDm1FpKy-0-2081eb1f14be1d65ed5ee0d775f70d0e)
运行结果如图7-28所示。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-P202_22829.jpg?sign=1739333832-9FmtUdmjmkFWzdHe2u5CDEtZZBbcz3Lv-0-e54d38151cfda1efef798e692afbb16b)
图7-28 运行结果
当使用XIB的方式创建UIImageView时,可以在Storyboard中添加UIImageView控件,并对其image属性进行设置,如图7-29所示。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-P202_22833.jpg?sign=1739333832-Zo4UeAHBKVWWnfWJTgbSGQAPt4LhNeWu-0-c0c00e607018657cb27d373b956ce492)
图7-29 XIB方式创建UIImageView
7.3.2 常用操作
当创建完成一个UIImageView对象后,通常情况下会对其样式进行一些定制,例如,裁剪UIImageView对象的边角,添加边框,添加手势等。
1.设置圆角/圆形头像
默认情况下,UIImageView是一个矩形,其边角是没有圆滑过渡的。在实际的开发过程中,经常需要把图片的边角设置为圆角,此时可以通过修改UIImageView的layer属性实现,如图7-30所示。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-P203_22919.jpg?sign=1739333832-9uIVODmTIzd0uK06dgv1dUZTMym8Z4hp-0-40f315bbf8c63825bf321c1b70a45da0)
图7-30 圆角效果
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T203_82887.jpg?sign=1739333832-wRKNmmLq1bRq1Dnl67rxzocldpHDcPd8-0-f22d5476ecc1cc41287ca65a70c7f5da)
通过上面的方法,当设置cornerRadius的值为UIImageView宽度的一半时,最终展示的就是一个圆形的图片,如图7-31所示。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-P203_22924.jpg?sign=1739333832-U9umLFa71GMfM5gE4RWwUx6Tk0UisxPl-0-9895ec2dc772379e5c641939c80294ed)
图7-31 圆形图片
2.设置边框
UIImageView对象创建后,默认情况下是没有边框的,可以通过修改layer的borderWidth以及borderColor来设置UIImageView的边框属性。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T204_82888.jpg?sign=1739333832-vbMIkKHG3nt01jcBmT1YGcTf7TKGmLSN-0-b4b1058f1b1cfb2d35b23864a371fb1e)
运行结果如图7-32所示。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-P204_23031.jpg?sign=1739333832-IrxPDX1MvQ0Olyxa2r1BVtDxUlYpyiFD-0-d53432132069ebd4827d96bab69571a4)
图7-32 设置边框
3.添加手势点击事件
默认情况下,UIImageView对象是不能够响应用户交互的,这是因为在UIImageView类中其userInteractionEnabled属性的默认取值为NO。这里可以修改该属性的值,并且为该UIImageView对象添加手势后,即可响应用户交互。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T204_23035.jpg?sign=1739333832-rwf7OJQzV7hgmyS9I9hlWVTSH6EGP3az-0-73bf0e9e9a93028bee808694ef304fc9)
下面的示例代码中为imageView对象添加了一个点击手势。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T204_23037.jpg?sign=1739333832-bujWJb5ilCxPnPeslRZBpWvsUuONvtxW-0-f858e2b9f0e2959563175f1b8585021d)
7.3.3 帧动画功能
UIImageView可以支持帧动画的播放,即按照顺序播放一组图片,如果播放足够快,会有动画效果,原理同早期的胶片电影播放一致。在若干年前流行的“会说话的TOM猫”,就是利用UIImageView的帧动画播放功能实现。
1.UIImageView动画播放相关属性与方法
在UIImageView类中定义了如下与帧动画播放相关的属性和方法,通过设置这些属性和方法就可以实现帧动画的播放。
- 图片存放的数组。把所有需要播放的图片有序地放到该数组中。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T205_23138.jpg?sign=1739333832-sLNoRKW2Ae15G77u9pJr4IKR38KlzoLd-0-890fb40607ca02f4bdb64f51dcd7a866)
- 动画播放的时长,默认取值为:animationImages中图片的数量*1/30。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T205_23140.jpg?sign=1739333832-NqDmfTXWmJdonfiF81dTAMvP2TzPpmi4-0-aefccf4be3ae31b58adba6bb45a20e11)
- 动画播放的次数。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T205_23142.jpg?sign=1739333832-yUMb90jTC7m1St9uOMnluMTfbpEb5EKE-0-1166e61f86c85c286e03d56af0b40ee1)
- 动画播放与停止。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T205_23144.jpg?sign=1739333832-uYZRPkGef4H7hi4k816hnYpVFYAFVWeh-0-d36b61e1cd9881c7c81719908035491e)
2.自动清除
由于animationImages数组会在内存中保存大量的图片,且动画播放完毕后不会自动销毁,所以会一直占用较大的内存,因此,动画播放完毕后需要自动清除该属性中保存的图片。通常的操作方式是在动画播放完成后,把该数组指向nil。
![](https://epubservercos.yuewen.com/D4B438/15253388904120706/epubprivate/OEBPS/Images/Figure-T205_23146.jpg?sign=1739333832-zpGl57mwtUZaZ1xmJ5sx8Vh79EH1o7Yx-0-e63dee595ff8f3977a7e4a5496bed798)