在开发项目中，为了适配各种尺寸的设备，我们通常使用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()
}
