iOS 为UITableView的索引添加浮动放大View显示

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)
    }

大功告成!

iOS 为UITableView的索引 添加浮动放大View显示

添加悬浮View

推荐阅读更多精彩内容

iOS 为UITableView的索引添加浮动放大View显示