APP上面有用UITableView实现的通讯录功能,通讯录按名字首字母分组,右边有一列索引,点击导航到对应的组。产品看到别的APP上面点击索引的时候有放大的字母显示,就让我给加上。效果如下:
1.png
在TableView上面添加索引是很简单的,只要实现两个代理方法就行
optional public func sectionIndexTitles(for tableView: UITableView) -> [String]?
// return list of section titles to display in section index view (e.g. "ABCD...Z#")
optional public func tableView(_ tableView: UITableView, sectionForSectionIndexTitle title: String, at index: Int) -> Int
// tell table which section corresponds to section title/index (e.g. "B",1))
第一个方法返回一个String数组,TableView就会依次显示在索引上。
第二个方法返回当点击到索引的第index个索引时,跳到哪一组。
实现完这两个方法TableView索引的功能就做完啦。
UITableView还有属性设置索引样式
-
sectionIndexColor: 索引颜色 -
sectionIndexBackgroundColor: 索引条背景颜色 -
sectionIndexMinimumDisplayRowCount: 个数大于该值才会显示索引,默认为0。 -
sectionIndexTrackingBackgroundColor: 触摸时索引条背景的颜色
添加悬浮View
先说说我的思路吧,自定义索引条当然可以实现,作为一个懒惰的人,我肯定不想自定义索引,因为代理方法实现索引如此简单。自己自定义的索引条当然相加什么都行,但是需要和TableView连接起来,这里有一定工作量。然后就开始了偷懒之旅:
- 首先在上面第二个代理方法在点击索引的时候会调用,而且还拿得到当前点击的索引,就想着在这里添加
浮动View显示,奈何没有方法监听到手指离开索引,不知何时隐藏浮动View。 - 不知何时隐藏
浮动View,于是就想到了定时隐藏,切换到其他索引的时候就关闭动画再加一个新的,似乎可以实现,但是手指要是一直点击在同一个索引上时,浮动View需要一直显示,可是依然监听不到这种情况,定时隐藏也不适用。 - 不知道手指何时离开索引,就想着监听手指何时离开
TableView隐藏浮动View,于是就想到touchesEnded方法,需要自定义TableView,尝试了一下发现也很复杂,并且TableView不会响应这个方法。似乎是TableView会吸收touch事件,有办法解决,但是会跟TableViewCell上面的按钮冲突。 - 只能用最后一招了,在
TableView索引条上面加上Pan手势,索引的高度固定不能修改,索引都居中,可以根据手指在索引条的位置来判断点击的是哪个索引。接下来就是找到这个索引条了,找了一下UITableView的头文件,不出所料没找到索引条。于是把TableView的subViews打印下来看看。
果然发现了一个UITableViewIndex私有类,应该就是它了。
<UITableViewIndex: 0x1558b3210; frame = (399 0; 15 578); opaque = NO; layer = <CALayer: 0x15589f350>>
于是就在sectionIndexTitles方法添加手势
for view in tableView.subviews {
if view.width == 15 {
view.gestureRecognizers = nil
view.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(indexTitlesPan(_:))))
}
}
然后实现Pan方法
@objc fileprivate func indexTitlesPan(_ rgz: UIPanGestureRecognizer) {
// 计算点击到哪个索引
let count = (addressBooksByLetter?.count ?? 0)+1
let indexHeight = CGFloat(count)*IndexTitlesViewHeight
let tableViewHeight = kAppHeight-NavigationH-50
let startY = (tableViewHeight-indexHeight)/2
let offsetY = rgz.location(in: rgz.view).y
var selectIndex = Int((offsetY - startY)/IndexTitlesViewHeight)
if selectIndex < 0 {
selectIndex = 0
} else if selectIndex > count-2 {
selectIndex = count-2
}
// 结束隐藏悬浮View
if rgz.state == .ended {
alertLabel.isHidden = true
} else {
alertLabel.text = addressBooksByLetter?[selectIndex].name
alertLabel.isHidden = false
}
// 因为pan手势会吸收索引原本点击事件,需要自行实现tableView跳转
tableView.scrollToRow(at: IndexPath(row: 0, section: selectIndex), at: .top, animated: false)
}
大功告成!
