UIImageView
定义
iOS中，UIImageView用来展示单一的照片，或者通过轮播的方式展示一系列照片。
@available(iOS 2.0, *)
open class UIImageView : UIView {
public init(image: UIImage?)
@available(iOS 3.0, *)
public init(image: UIImage?, highlightedImage: UIImage?)
open var image: UIImage? // default is nil
@available(iOS 3.0, *)
open var highlightedImage: UIImage? // default is nil
@available(iOS 13.0, *)
open var preferredSymbolConfiguration: UIImage.SymbolConfiguration?
open var isUserInteractionEnabled: Bool // default is NO
@available(iOS 3.0, *)
open var isHighlighted: Bool // default is NO
open var animationImages: [UIImage]?
@available(iOS 3.0, *)
open var highlightedAnimationImages: [UIImage]?
open var animationDuration: TimeInterval
open var animationRepeatCount: Int
@available(iOS 7.0, *)
open var tintColor: UIColor!
open func startAnimating()
open func stopAnimating()
open var isAnimating: Bool { get }
}
可以看到，UIImageView继承自UIView，除了可以使用UIView的常用属性和方法外，本身定义的属性和方法非常简单。
本次我们分别使用UIImageView设置背景颜色、加载本地图片、网络图片、完成图片轮播，以及设置圆角边框等功能。效果如下：
设置一个背景颜色
// 背景颜色作为图片
lazy var imageView1:UIImageView = {
let imageView = UIImageView()
imageView.backgroundColor = UIColor.lightGray
imageView.frame = CGRect(x: 10, y: 64, width: 200, height: 100)
return imageView
}()
加载本地图片
// 加载本地图片
lazy var imageView2:UIImageView = {
let imageView = UIImageView()
imageView.backgroundColor = UIColor.lightGray
imageView.frame = CGRect(x: 10, y: 166, width: 200, height: 100)
imageView.image = UIImage(named: "baidu")
//从文件目录中获取图片
//let path = Bundle.main.path(forResource: "baidu", ofType:"png")
//let fileimage = UIImage(contentsOfFile: path!)
//imageView.image = fileimage
//关键属性
imageView.contentMode = .scaleAspectFit
//边框设置
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 2
//圆角的设置
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
//添加tap点击事件，重要
let guester = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageClicked))
imageView.addGestureRecognizer(guester)
imageView.isUserInteractionEnabled = true
return imageView
}()
常用的设置直接看注释，都很简单。
加载网络图片
// 加载网络图片
lazy var imageView3:UIImageView = {
let imageView = UIImageView()
imageView.frame = CGRect(x: 10, y: 268, width: 200, height: 100)
let url = URL(string:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
let data = try! Data(contentsOf: url!)
imageView.image = UIImage(data: data)
//边框设置
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 2
//关键属性
imageView.contentMode = .scaleAspectFit
return imageView
}()
设置图片轮播
// 图片轮播
lazy var imageView4:UIImageView = {
let imageView = UIImageView()
imageView.frame = CGRect(x: 10, y: 370, width: 200, height: 100)
//实现动画播放
let image1 = UIImage(named: "baidu")
let image2 = UIImage(named: "alibaba")
// 设置轮播的图片
imageView.animationImages = [image1!,image2!]
//设置图片变换持续时间
imageView.animationDuration = 2
//开始动画
imageView.startAnimating()
//结束动画
//imageView.stopAnimating()
//边框设置
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 2
//关键属性
imageView.contentMode = .scaleAspectFit
return imageView
}()
设置点击事件
和UILable一样，UIImageView默认不支持手势事件，可以通过设置isUserInteractionEnabled为true 激活。
//添加tap点击事件，重要
let guester = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageClicked))
imageView.addGestureRecognizer(guester)
imageView.isUserInteractionEnabled = true
contentMode
在上述代码中，我们设置图片的显示模式时，使用了一种重要属性contentMode，其值是一个枚举值，其中有些值类似android 中的android:scaleType属性效果：
public enum ContentMode : Int {
// 默认，会对图片进行拉伸处理，充满frame
case scaleToFill = 0
// 按原图比例进行拉伸，使图片完全，不一定充满frame
case scaleAspectFit = 1
// 按原图比例填充，图片完全展示在frame中，由于使按比例充填，可能会有一部分图片看不到
case scaleAspectFill = 2
// 在尺寸变化时强制重绘，会调用setNeedsDisplay
case redraw = 3
// 按原比例居中显示
case center = 4
// 显示在imageview的上部
case top = 5
// 显示在imageview的下部
case bottom = 6
case left = 7
case right = 8
case topLeft = 9
case topRight = 10
case bottomLeft = 11
case bottomRight = 12
}
具体的效果，可以每个设置看一下。
完整代码
class ViewController: UIViewController {
// 背景颜色作为图片
lazy var imageView1:UIImageView = {
let imageView = UIImageView()
imageView.backgroundColor = UIColor.lightGray
imageView.frame = CGRect(x: 10, y: 64, width: 200, height: 100)
return imageView
}()
// 加载本地图片
lazy var imageView2:UIImageView = {
let imageView = UIImageView()
imageView.backgroundColor = UIColor.lightGray
imageView.frame = CGRect(x: 10, y: 166, width: 200, height: 100)
imageView.image = UIImage(named: "baidu")
//从文件目录中获取图片
//let path = Bundle.main.path(forResource: "baidu", ofType:"png")
//let fileimage = UIImage(contentsOfFile: path!)
//imageView.image = fileimage
//关键属性
imageView.contentMode = .scaleAspectFit
//边框设置
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 2
//圆角的设置
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
//添加tap点击事件，重要
let guester = UITapGestureRecognizer(target: self, action: #selector(ViewController.imageClicked))
imageView.addGestureRecognizer(guester)
imageView.isUserInteractionEnabled = true
return imageView
}()
// 加载网络图片
lazy var imageView3:UIImageView = {
let imageView = UIImageView()
imageView.frame = CGRect(x: 10, y: 268, width: 200, height: 100)
let url = URL(string:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
let data = try! Data(contentsOf: url!)
imageView.image = UIImage(data: data)
//边框设置
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 2
//关键属性
imageView.contentMode = .scaleAspectFit
return imageView
}()
// 图片轮播
lazy var imageView4:UIImageView = {
let imageView = UIImageView()
imageView.frame = CGRect(x: 10, y: 370, width: 200, height: 100)
//实现动画播放
let image1 = UIImage(named: "baidu")
let image2 = UIImage(named: "alibaba")
// 设置轮播的图片
imageView.animationImages = [image1!,image2!]
//设置图片变换持续时间
imageView.animationDuration = 2
//开始动画
imageView.startAnimating()
//结束动画
//imageView.stopAnimating()
//边框设置
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.borderWidth = 2
//关键属性
imageView.contentMode = .scaleAspectFit
return imageView
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(imageView1)
view.addSubview(imageView2)
view.addSubview(imageView3)
view.addSubview(imageView4)
}
//点击事件处理
@objc func imageClicked(){
print("Logo 点击了……………")
}
}
