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 点击了……………")
	}
	
}