Snapkit使用（二）---自定义带加载进度条的图片控件

在开发项目中，为了适配各种尺寸的设备，我们通常使用Auto Layout来进行布局的约束，storyboard，xib是xcode提供的故事版布局，虽然他们可以完成大多数的布局，但是一些相对比较复杂的布局缺并不能轻易的实现Auto Layout是Xcode提供的一种布局方式，可以通过代码来实现约束，但是他的使用却比较困难，而通过snapkit这个开源的框架，我们能够奇松的视线布局的约束。
上一遍，我们已经介绍过SnapKit的简单使用，这一篇我们自定义一个图片显示控件，带进度条显示

• 新建一个UIView(SLProgressImageView)，定义一个imageView来加载图片，一个progressView来显示进度，这里的进度条我们使用DACircularProgress的第三方框架

let imageView = UIImageView().then {
        
        $0.backgroundColor = .hexColor(color: "f0f0f0", alpha: 1)
        $0.clipsToBounds = true
        $0.contentMode = .scaleAspectFill
    } 
let progressView = DALabeledCircularProgressView().then {
        
        $0.roundedCorners = 5
        $0.isHidden = true
        
    }

• 添加到UIView中，并使用SnapKit来布局

fileprivate func initContent() {
        
        self.addSubview(self.imageView)
        self.addSubview(self.progressView)
        
        self.imageView.snp.makeConstraints {
            $0.edges.equalTo(UIEdgeInsetsMake(0, 0, 0, 0))
        }
        self.progressView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.width.height.equalToSuperview().multipliedBy(0.3)
        }
    }

• 定义一个接受图片地址的参数imageURL，当参数传值的时候，imageView加载图片我们使用Kingfisher

var imageUrl: String! {
        didSet {
            
            self.imageView.snp.remakeConstraints { (maker) in
              //这里我设置了一个上，左的间距，可以不设置
                maker.edges.equalTo(UIEdgeInsetsMake(CGFloat(itemMargin), CGFloat(itemMargin), 0, 0))
            }
            
            self.progressView.isHidden = false
            self.imageView.kf.setImage(with: URL(string: imageUrl), placeholder: nil, options: [.cacheMemoryOnly], progressBlock: { (receivedSize, expectedSize) in
                let progress: CGFloat = 1.0 * CGFloat(receivedSize) / CGFloat(expectedSize)
                self.progressView.progress = progress
                
            }) { (image, error, cacheType, url) in
                self.progressView.isHidden = true
            }
        }
    }

• 也可以直接定义个UIImage的参数来接受图片

var image: UIImage! {
        didSet {
            
            self.progressView.isHidden = true
            self.imageView.image = image
        }
    }

• 如何使用？

 let imageView = SLProgressImageView()
 self.addSubview(imageView)
 imageView.snp.remakeConstraints {
          $0.width.height.equalTo(100)
          $0.center.equalToSuperView()           
 }