Swift - 多列表格组件的实现(样例2:带排序功能)
作者:hangge | 2016-03-17 09:35
相关文章系列:
Swift - 多列表格组件的实现(样例1:基本功能的实现)
[当前文章] Swift - 多列表格组件的实现(样例2:带排序功能)
Swift - 多列表格组件的实现(样例3:表头、列头固定)
Swift - 多列表格组件的实现(样例4:表格样式美化)
Swift - 多列表格组件的实现(样例1:基本功能的实现)
[当前文章] Swift - 多列表格组件的实现(样例2:带排序功能)
Swift - 多列表格组件的实现(样例3:表头、列头固定)
Swift - 多列表格组件的实现(样例4:表格样式美化)
(本文代码已升级至Swift3)
之前的文章:Swift - 多列表格组件的实现(样例1:基本功能的实现)介绍了如何使用 UICollectionView 来实现多列表格组件,这次我们在原来的基础上做一个功能改进,让表格支持排序功能。
1,支持排序的多列表格(multi-column sortable table control)效果图

2,功能说明:
(1)表格列头文字增加下划线样式,表示可以点击。
(2)点击列头标题,内容条目便会根据该列数据进行排序显示(先升序、后降序,依次交替)
(3)排序列背景色会变为蓝色,同时列头会显示上下箭头表示排列顺序。
(4)这里排序的上下箭头不是图片,而是使用 Font Awesome 图标字体库。优点是可以很轻松地设置颜色和大小,而不会失真。(具体用法可以参考我原来写的这篇文章:Swift - 字体图标的使用及样例(使用Font Awesome字体库,非图片))
(代码中高亮部分表示新增的排序相关的代码)
--- UICollectionGridViewController.swift(组件类) ---
import Foundation
import UIKit
//表格排序协议
protocol UICollectionGridViewSortDelegate {
func sort(colIndex: Int, asc: Bool, rows: [[Any]]) -> [[Any]]
}
//多列表格组件(通过CollectionView实现)
class UICollectionGridViewController: UICollectionViewController {
//表头数据
var cols: [String]! = []
//行数据
var rows: [[Any]]! = []
//排序代理
var sortDelegate: UICollectionGridViewSortDelegate!
//选中的表格列(-1表示没有选中的)
private var selectedColIdx = -1
//列排序顺序
private var asc = true
init() {
//初始化表格布局
let layout = UICollectionGridViewLayout()
super.init(collectionViewLayout: layout)
layout.viewController = self
collectionView!.backgroundColor = UIColor.white
collectionView!.register(UICollectionGridViewCell.self,
forCellWithReuseIdentifier: "cell")
collectionView!.delegate = self
collectionView!.dataSource = self
collectionView!.isDirectionalLockEnabled = true
collectionView!.contentInset = UIEdgeInsetsMake(0, 10, 0, 10)
collectionView!.bounces = false
}
required init?(coder aDecoder: NSCoder) {
fatalError("UICollectionGridViewController.init(coder:) has not been implemented")
}
//设置列头数据
func setColumns(columns: [String]) {
cols = columns
}
//添加行数据
func addRow(row: [Any]) {
rows.append(row)
collectionView!.collectionViewLayout.invalidateLayout()
collectionView!.reloadData()
}
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidLayoutSubviews() {
collectionView!.frame = CGRect(x:0, y:0,
width:view.frame.width, height:view.frame.height)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
//返回表格总行数
override func numberOfSections(in collectionView: UICollectionView) -> Int {
if cols.isEmpty {
return 0
}
//总行数是:记录数+1个表头
return rows.count + 1
}
//返回表格的列数
override func collectionView(_ collectionView: UICollectionView,
numberOfItemsInSection section: Int) -> Int {
return cols.count
}
//单元格内容创建
override func collectionView(_ collectionView: UICollectionView,
cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell",
for: indexPath) as! UICollectionGridViewCell
//第一列的内容左对齐,其它列内容居中
if indexPath.row == 0 {
cell.label.textAlignment = .left
}else{
cell.label.textAlignment = .center
}
//设置列头单元格,内容单元格的数据
if indexPath.section == 0 {
let text = NSAttributedString(string: cols[indexPath.row], attributes: [
NSUnderlineStyleAttributeName:NSUnderlineStyle.styleSingle.rawValue,
NSFontAttributeName:UIFont.boldSystemFont(ofSize: 15)
])
cell.label.attributedText = text
} else {
cell.label.font = UIFont.systemFont(ofSize: 15)
cell.label.text = "\(rows[indexPath.section-1][indexPath.row])"
}
//列排序
if indexPath.row == selectedColIdx {
//排序列的单元格背景会变色
cell.backgroundColor = UIColor(red: 122/255, green: 186/255, blue: 255/255,
alpha: 1)
//排序列列头显示升序降序图标
if indexPath.section == 0 {
let iconType = asc ? FAType.FALongArrowUp : FAType.FALongArrowDown
cell.imageView.setFAIconWithName(icon: iconType, textColor: UIColor.blue)
}else{
cell.imageView.image = nil
}
}else{
cell.backgroundColor = UIColor.white
cell.imageView.image = nil
}
return cell
}
//单元格选中事件
override func collectionView(_ collectionView: UICollectionView,
didSelectItemAt indexPath: IndexPath) {
//打印出点击单元格的[行,列]坐标
print("点击单元格的[行,列]坐标: [\(indexPath.section),\(indexPath.row)]")
if indexPath.section == 0 && sortDelegate != nil {
//如果点击的是表头单元格,则默认该列升序排列,再次点击则变降序排列,以此交替
asc = (selectedColIdx != indexPath.row) ? true : !asc
selectedColIdx = indexPath.row
rows = sortDelegate.sort(colIndex: indexPath.row, asc: asc, rows: rows)
collectionView.reloadData()
}
}
}
--- UICollectionGridViewCell.swift(组件单元格类) ---
import UIKit
class UICollectionGridViewCell: UICollectionViewCell {
//内容标签
var label:UILabel!
//箭头图标
var imageView:UIImageView!
//标签左边距
var paddingLeft:CGFloat = 5
override init(frame: CGRect) {
super.init(frame: frame)
//单元格边框
self.layer.borderWidth = 1
self.backgroundColor = UIColor.white
self.clipsToBounds = true
//添加内容标签
self.label = UILabel(frame: .zero)
self.label.textAlignment = .center
self.addSubview(self.label)
//添加箭头图标
self.imageView = UIImageView(frame: .zero)
self.addSubview(self.imageView)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
label.frame = CGRect(x: paddingLeft, y: 0,
width: frame.width - paddingLeft * 2,
height: frame.height)
let imageWidth: CGFloat = 14
let imageHeight: CGFloat = 14
imageView.frame = CGRect(x:frame.width - imageWidth,
y:frame.height/2 - imageHeight/2,
width:imageWidth, height:imageHeight)
}
}
--- UICollectionGridViewLayout.swift(布局类) ---
import Foundation
import UIKit
//多列表格组件布局类
class UICollectionGridViewLayout: UICollectionViewLayout {
//记录每个单元格的布局属性
private var itemAttributes: [[UICollectionViewLayoutAttributes]] = []
private var itemsSize: [NSValue] = []
private var contentSize: CGSize = CGSize.zero
//表格组件视图控制器
var viewController: UICollectionGridViewController!
//准备所有view的layoutAttribute信息
override func prepare() {
if collectionView!.numberOfSections == 0 {
return
}
var column = 0
var xOffset: CGFloat = 0
var yOffset: CGFloat = 0
var contentWidth: CGFloat = 0
var contentHeight: CGFloat = 0
if itemAttributes.count > 0 {
return
}
itemAttributes = []
itemsSize = []
if itemsSize.count != viewController.cols.count {
calculateItemsSize()
}
for section in 0 ..< (collectionView?.numberOfSections)! {
var sectionAttributes: [UICollectionViewLayoutAttributes] = []
for index in 0 ..< viewController.cols.count {
let itemSize = itemsSize[index].cgSizeValue
let indexPath = IndexPath(item: index, section: section)
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
//除第一列,其它列位置都左移一个像素,防止左右单元格间显示两条边框线
if index == 0{
attributes.frame = CGRect(x:xOffset, y:yOffset, width:itemSize.width,
height:itemSize.height).integral
}else {
attributes.frame = CGRect(x:xOffset-1, y:yOffset,
width:itemSize.width+1,
height:itemSize.height).integral
}
sectionAttributes.append(attributes)
xOffset = xOffset+itemSize.width
column += 1
if column == viewController.cols.count {
if xOffset > contentWidth {
contentWidth = xOffset
}
column = 0
xOffset = 0
yOffset += itemSize.height
}
}
itemAttributes.append(sectionAttributes)
}
let attributes = itemAttributes.last!.last! as UICollectionViewLayoutAttributes
contentHeight = attributes.frame.origin.y + attributes.frame.size.height
contentSize = CGSize(width:contentWidth, height:contentHeight)
}
//需要更新layout时调用
override func invalidateLayout() {
itemAttributes = []
itemsSize = []
contentSize = CGSize.zero
super.invalidateLayout()
}
// 返回内容区域总大小,不是可见区域
override var collectionViewContentSize: CGSize {
get {
return contentSize
}
}
// 这个方法返回每个单元格的位置和大小
override func layoutAttributesForItem(at indexPath: IndexPath)
-> UICollectionViewLayoutAttributes? {
return itemAttributes[indexPath.section][indexPath.row]
}
// 返回所有单元格位置属性
override func layoutAttributesForElements(in rect: CGRect)
-> [UICollectionViewLayoutAttributes]? {
var attributes: [UICollectionViewLayoutAttributes] = []
for section in itemAttributes {
attributes.append(contentsOf: section.filter(
{(includeElement: UICollectionViewLayoutAttributes) -> Bool in
return rect.intersects(includeElement.frame)
}))
}
return attributes
}
//当边界发生改变时,是否应该刷新布局。
//本例在宽度变化时,将重新计算需要的布局信息。
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
let oldBounds = self.collectionView?.bounds
if oldBounds!.width != newBounds.width {
return true
}else {
return false
}
}
//计算所有单元格的尺寸(每一列各一个单元格)
func calculateItemsSize() {
var remainingWidth = collectionView!.frame.width -
collectionView!.contentInset.left - collectionView!.contentInset.right
var index = viewController.cols.count-1
while index >= 0 {
let newItemSize = sizeForItemWithColumnIndex(columnIndex: index,
remainingWidth: remainingWidth)
remainingWidth -= newItemSize.width
let newItemSizeValue = NSValue(cgSize: newItemSize)
//由于遍历列的时候是从尾部开始遍历了,因此将结果插入数组的时候都是放人第一个位置
itemsSize.insert(newItemSizeValue, at: 0)
index -= 1
}
}
//计算某一列的单元格尺寸
func sizeForItemWithColumnIndex(columnIndex: Int, remainingWidth: CGFloat) -> CGSize {
let columnString = viewController.cols[columnIndex]
//根据列头标题文件,估算各列的宽度
let size = NSString(string: columnString).size(attributes: [
NSFontAttributeName:UIFont.systemFont(ofSize: 15),
NSUnderlineStyleAttributeName:NSUnderlineStyle.styleSingle.rawValue
])
//单元格预估宽度取整,避免排序上下箭头改变时单元格位置大小偏移
let titleWidth = CGFloat(Int(size.width))
//如果有剩余的空间则都给第一列
if columnIndex == 0 {
return CGSize(width:max(remainingWidth, titleWidth + 20),
height:size.height + 10)
}
//行高增加10像素,列宽增加20像素(为了容纳下排序图标)
return CGSize(width:titleWidth + 20, height:size.height + 10)
}
}
--- ViewController.swift(测试类) ---
import UIKit
class ViewController: UIViewController, UICollectionGridViewSortDelegate {
var gridViewController: UICollectionGridViewController!
override func viewDidLoad() {
super.viewDidLoad()
gridViewController = UICollectionGridViewController()
gridViewController.setColumns(columns: ["客户", "消费金额", "消费次数", "满意度"])
gridViewController.addRow(row: ["hangge", "100", "8", "60%"])
gridViewController.addRow(row: ["张三", "223", "16", "81%"])
gridViewController.addRow(row: ["李四", "143", "25", "93%"])
gridViewController.addRow(row: ["王五", "75", "2", "53%"])
gridViewController.addRow(row: ["韩梅梅", "43", "12", "33%"])
gridViewController.addRow(row: ["李雷", "33", "27", "45%"])
gridViewController.addRow(row: ["王大力", "33", "22", "15%"])
gridViewController.sortDelegate = self
view.addSubview(gridViewController.view)
}
override func viewDidLayoutSubviews() {
gridViewController.view.frame = CGRect(x:0, y:50, width:view.frame.width,
height:view.frame.height-60)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
//表格排序函数
func sort(colIndex: Int, asc: Bool, rows: [[Any]]) -> [[Any]] {
let sortedRows = rows.sorted { (firstRow: [Any], secondRow: [Any])
-> Bool in
let firstRowValue = firstRow[colIndex] as! String
let secondRowValue = secondRow[colIndex] as! String
if colIndex == 0 {
//首例姓名使用字典排序法
if asc {
return firstRowValue < secondRowValue
}
return firstRowValue > secondRowValue
} else if colIndex == 1 || colIndex == 2 {
//中间两列使用数字排序
if asc {
return Int(firstRowValue)! < Int(secondRowValue)!
}
return Int(firstRowValue)! > Int(secondRowValue)!
}
//最后一列数据先去掉百分号,再转成数字比较
let firstRowValuePercent = Int(firstRowValue.substring(to:
firstRowValue.index(before: firstRowValue.endIndex)))!
let secondRowValuePercent = Int(secondRowValue.substring(to:
secondRowValue.index(before: secondRowValue.endIndex)))!
if asc {
return firstRowValuePercent < secondRowValuePercent
}
return firstRowValuePercent > secondRowValuePercent
}
return sortedRows
}
}
4,源码下载:
样式修改:每列宽度相等、内容居中
1,效果图
上面的样例中,除第一列外其他列先根据对应表头标题的文字长度来确定宽度,然后将剩下的空间全部分给第一列。这里对样式做个调整。
(1)表格中每一列的宽度都是固定的。
(2)同时无论屏幕如何旋转,单元格内的文字都是居中显示。

2,修改的地方
(1)修改了 UICollectionGridViewLayout 类里的 sizeForItemWithColumnIndex 方法,让返回的每个单元格宽度都是一样的。
(2)修改了 UICollectionGridViewController 类里的 cellForItemAt 方法,让每个单元格内容都是居中显示。
全部评论(2)
好的,谢谢航哥
站长回复:不客气
为航哥点赞!航哥能否再增加这个功能呢?就是:1.修改单元格的内容 2.删除一行 3.增加一行,谢谢!
站长回复:增删改的话,只要修改组件的数据(rows),然后再调用.reloadData()方法重新加载数据内容就好了。我这边还排了很多的东西要写,这个就不写了。