【iOS（swift）笔记-7】自定义九宫格图片布局（基于SnapKit）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

项目实例

https://github.com/1987151729/k_english_ios

调用方法：

// 我这里是将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))
}
}
}