iOS开发----TableView的点击,选中等效果

1,701 阅读3分钟

本文讲的是TableView点击效果。

专业完整版请参考(www.appcoda.com/learnswift/)

上面网址的教程文档为试用版,需要购买。(支持正版从我做起💪)

各位看官注意啦,本文章不是教程,只是我的一个分享而已,有错误还请指出。

同样先上效果图

接下来我们开始!

注意本文是基于iOS 12和Xcode 10
本章是在基础篇的代码做出的修改,如果未完成,还请先看基础篇。
(juejin.cn/post/684490…)

新建函数 实现点击效果

添加一个函数,当发生点击的时候调用这个函数,并对它进行填充。

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let optionMenu = UIAlertController(title: nil, message: "what do you want to do", preferredStyle: .actionSheet)
        
        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: nil)
        optionMenu.addAction(cancelAction)
        present(optionMenu, animated: true, completion: nil)
    }

我们再打开模拟器,看看效果如何

当然你也可以做自己想要的效果。

如果你想要另外种弹唱的方式可以修改optionMenu中的preferredSyle,相对应的如果要修改按钮(Cancel)的效果,点击cancel中的style。

如果觉得有能力的可以继续完成一个练习:当我点击Call时,弹出另一个对话框。

代码我会在本文最后贴出。

实现选中功能

这里我们要实现的是多选功能,同样要在tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)这个函数中进行,同样十分简单只需要几行代码就可以。

 let CheckAction = UIAlertAction(title: "Check in", style: .default, handler: {(action: UIAlertAction) -> Void in
            
            let cell = tableView.cellForRow(at: indexPath)
            cell?.accessoryType = .checkmark
        })
 optionMenu.addAction(CheckAction)

再次开启模拟器,我们会惊奇的发现虽然确实可以选择,但是当我们下滑时候,下面未选择的列表行也有被选中。

再次上滑时,发现有选中标记的可能不是我们刚才选中的那个列表行了!

这是一个Bug! 原因是在iOS开发中,列表并不会建立你所要求的个数,而是在上下滑动的时候重复利用。

比如你数组里面有30个放入列表中,但列表不会建立30个而是可能只建立10个或者其他个数,在上下滑动重复利用,这是为了节省计算机的资源但同时也是造成我们现在的情况的原因。

如同教学文档中所说的一样,我讨厌Bug但不能躲避它。

Bug对提升我们的技术帮助是十分大的。

面对这样的设置,我们的解决方法是设置一个数组,如果选中则变为true否则为false。 所以我们先在整个类下定义一个布尔值的数组resraurantIsVisited.

之后在tableView(_ didSelectRowAt:)中函数中添加一串代码

    self.restaurantIsVisited[indexPath.row] = true

同时在tableView(_ cellForRowAt:)中添加判定代码,为了去除未选中的列表行。

        if restaurantIsVisited[indexPath.row]{
            cell.accessoryType = .checkmark
        } else {
            cell.accessoryType = .none
        }

再次启动模拟器,选中在滑动发现问题解决了!

至此本文主要内容已经全部结束,大家可以思考这几个问题。

1.点击选中的列表行时Check in变成Undo Check,点击Undo Check取消选中。
2.现在选中的列表行是一个打勾的标记,尝试修改成其他标记。

最后贴出之前练习添加多个代码框的代码:

 
    let CallActionHandler = {(action: UIAlertAction) -> Void in
        let alertMessge = UIAlertController(title: "Service Unavailable", message: "Sorry, the call feature is not available yet. Please retry later", preferredStyle: .alert)
        
        alertMessge.addAction(UIAlertAction(title: "OK", style: .default, handler: nil) )
        self.present(alertMessge, animated: true, completion: nil)
        }
        
    let CallAction = UIAlertAction(title: "Call" + "123-000-\(indexPath.row+1)", style: .default, handler: CallActionHandler)
    optionMenu.addAction(CallAction)