调用方法：
// 我这里是将HxNineGridView添加到UITableViewCell里，你可以将它用在其他地方
let nineGridView = HxNineGridView()
self.contentView.addSubview(nineGridView)
nineGridView.snp.makeConstraints { (make) -> Void in
make.top.equalTo(self.contentView).offset(10)
make.leading.equalTo(self.contentView).offset(25)
make.trailing.equalTo(self.contentView).offset(-25)
}
nineGridView.width = UIScreen.main.bounds.size.width - 50 // 这里减去的值为leading+trailing （根据你自己的排版去调整）
nineGridView.imageSrcs = ["http://106.14.132.45:80/app/k_english/file/web/image/2018/02/20/2018-02-20-20-E50FC3E161CEF970F1F0F78D7B80EB95.jpg", "http://106.14.132.45:80/app/k_english/file/web/image/2018/02/20/2018-02-20-20-79E3CACCC31EDCF4FCEAF5F595C0FEBC.jpg", "http://106.14.132.45:80/app/k_english/file/web/image/2018/02/20/2018-02-20-20-82A0DB130A0436A510E3CA17B4D458FD.jpg"]
效果图：
源代码：
//
// HxNineGridView.swift
// App
//
// Created by kila on 19/02/2018.
// Copyright © 2018 kila. All rights reserved.
//
import UIKit
import SnapKit
import Kingfisher
// 九宫格视图类
class HxNineGridView: UIView {
/*
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
}
*/
var delegate: HxNineGridViewDelegate?
// 以下属性均为默认值，可外部赋值进行修改
var topSpace: CGFloat = 0 // 顶部间隙
var bottomSpace: CGFloat = 0 // 底部间隙
var leadingSpace: CGFloat = 0 // 左边间隙
var trailingSpace: CGFloat = 0 // 右边间隙
var middleSpace: CGFloat = 5 // 中间间隙
var width: CGFloat = 320 // NineGridView宽度（根据屏幕宽和当前HxNineGridView需要展示的真实宽度进行调整）
var isTwoRowsTwoColumns: Bool = true // 当4张照片时是否采用2行2列排版
var viewBox: UIView!
// 图片列表
var imageSrcs: [String] = [String]() {
didSet {
addCellViews()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
private func addCellViews() {
if nil != viewBox {
viewBox.removeFromSuperview() // 这一步很重要，tablecell重用的时候，需要刷新控件（即把旧的内容清除掉）
}
let count = self.imageSrcs.count
if 0<count {
viewBox = UIView()
self.addSubview(viewBox)
viewBox.snp.makeConstraints { (make) in
make.edges.equalTo(self).inset(UIEdgeInsetsMake(0, 0, 0, 0))
}
var index: Int = 0
var cellWidth: CGFloat = 110
var cellHeight: CGFloat = 110
var x: CGFloat?
var y: CGFloat?
/* 注！这里按HxNineGridView中心进行排版 */
// 求出第2个的中心坐标x
let centerX: CGFloat = self.width/2
// 求出每个cell的宽高
cellWidth = (self.width - leadingSpace - trailingSpace - (middleSpace * 2))/3
cellHeight = cellWidth
// 求出第1个的中心坐标x,y
let centerX0 = centerX - cellWidth - middleSpace
let centerY0 = (cellHeight/2) + topSpace
var rows: Int = 3
var columns: Int = 3
if 4 == count && self.isTwoRowsTwoColumns {
rows = 2
columns = 2
}
// 构造九宫格
for i in 0..<rows {
for j in 0..<columns {
// 每个cell的中心坐标x,y
x = centerX0 + CGFloat(j) * (cellWidth + middleSpace)
y = centerY0 + CGFloat(i) * (cellHeight + middleSpace)
// 创建cell视图
let cellView = HxNineGridCellView()
cellView.index = index
// 添加图片点击事件
let tap = UITapGestureRecognizer(target: self, action: #selector(self.onTapImageView(_:)))
cellView.imageView.kf.setImage(with: URL(string: self.imageSrcs[index]))
cellView.imageView.addGestureRecognizer(tap)
viewBox.addSubview(cellView)
cellView.snp.makeConstraints { (make) in
make.centerX.equalTo(x!)
make.centerY.equalTo(y!)
make.width.equalTo(cellWidth)
make.height.equalTo(cellHeight)
}
index += 1
if index==count{
cellView.snp.makeConstraints { (make) in
make.bottom.equalTo(viewBox.snp.bottom).offset(-bottomSpace)
}
break
}
}
if index==count{
break
}
}
}
}
@objc func onTapImageView(_ sender: UITapGestureRecognizer) {
if let view = sender.view?.superview as? HxNineGridCellView {
self.delegate?.onClickImageView(imageSrcs: self.imageSrcs, index: view.index!)
}
}
}
// 代理
protocol HxNineGridViewDelegate: NSObjectProtocol {
// 图片点击事件
func onClickImageView(imageSrcs: [String], index: Int)
}
//
// HxNineGridCellView.swift
// App
//
// Created by kila on 19/02/2018.
// Copyright © 2018 kila. All rights reserved.
//
import UIKit
import SnapKit
// 九宫格视图单元类
class HxNineGridCellView: UIView {
/*
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
}
*/
// 除了图片外，还可以添加其他的元素，如按钮等。
var index: Int? // 下标
lazy var imageView: UIImageView = {
let imageView_ = UIImageView()
imageView_.isUserInteractionEnabled = true
return imageView_
}()
override init(frame: CGRect) {
super.init(frame: frame)
initView()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
initView()
}
// 页面布局
func initView() {
self.addSubview(imageView)
imageView.snp.makeConstraints { (make) in
make.edges.equalTo(self).inset(UIEdgeInsetsMake(0, 0, 0, 0))
}
}
}
项目实例
https://github.com/1987151729/k_english_ios