iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Swift实现表格视图单元格多选
  • 607
分享到

Swift实现表格视图单元格多选

2024-04-02 19:04:59 607人浏览 八月长安
摘要

本文实例为大家分享了Swift实现表格视图单元格多选的具体代码,供大家参考,具体内容如下 效果 前言 这段时间比较忙,没太多的时间写博客,前段时间写了一些关于表格视图单选的文章,想

本文实例为大家分享了Swift实现表格视图单元格多选的具体代码,供大家参考,具体内容如下

效果

前言

这段时间比较忙,没太多的时间写博客,前段时间写了一些关于表格视图单选的文章,想着,一并把多选也做了,今天刚好有时间,去做这样一件事情。多选在我们的应用程序中也是常见的,比如消息的删除,群发联系人的选择,音乐的添加等等可能都会涉及到多选的需求,本文,我将模拟多选删除消息来讲讲多选的实现。

原理

多选删除其实很简单,并不复杂,我的思路就是创建一个数组,当用户选中某个单元格的时候,取到单元格上对应的数据,把它存入数组中,如果用户取消选中,直接将数据从数组中移除。当用户点击删除时,直接遍历数组,将表格视图数据源数组里面的与存选择数据的数组中的数据相对应一一删除,再刷新表格视图即可。

实现

界面搭建很简单,创建一个表格视图,添加导航栏,并在上面添加一个删除按钮,这里我就不细说了。

ViewController 中,我们先声明几个属性,其中 selectedDatas 主要用于记录用户选择的数据。

var tableView: UITableView?
var dataSource: [String]?
var selectedDatas: [String]?

创建初始化方法,初始化属性,别忘了还需要在 ViewDidLoad()中调用方法初始化方法。

// MARK:Initialize methods
func initializeDatasource() {

    self.selectedDatas = []

    self.dataSource = []

    for index in 1...10 {
        index < 10 ? self.dataSource?.append("消息0\(index)") : self.dataSource?.append("消息\(index)")
    }
}

func initializeUserInterface() {

    self.title = "消息"
    self.automaticallyAdjustsScrollViewInsets = false

    // Add delete navigation item
    self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "删除", style: UIBarButtonItemStyle.Plain, target: self, action: Selector("respondsToBarButtonItem:"))

    // table view
    self.tableView = {
        let tableView = UITableView(frame: CGRectMake(0, 64, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds)), style: UITableViewStyle.Plain)
        tableView.dataSource = self
        tableView.delegate = self
        tableView.tableFooterView = UIView()
        return tableView
        }()
    self.view.addSubview(self.tableView!)   
}

此时,系统会报警告,提示你没有遵守协议,因为我们在初始化表格视图的时候为其设置了代理和数据源,遵守协议,并实现协议方法,配置数据源。

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 1
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return self.dataSource!.count
}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    var cell: CustomTableViewCell? = tableView.dequeueReusableCellWithIdentifier("cellReuseIdentifier") as? CustomTableViewCell
    if cell == nil {
        cell = CustomTableViewCell(style: UITableViewCellStyle.Value1, reuseIdentifier: "cellReuseIdentifier")
    }

    cell!.selectionStyle = UITableViewCellSelectionStyle.None
    cell!.textLabel?.text = self.dataSource![indexPath.row]
    cell!.detailTextLabel?.text = "昨天 10-11"

    return cell!
}

这里需要强调的是,表格视图的单元格是自定义的,在自定义单元格(CustomTableViewCell)中我只做了一个操作,就是根据单元格选中状态来切换图片的显示。

override func setSelected(selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    if selected {
        self.imageView?.image = UIImage(named: "iconfont-selected")
    }else {
        self.imageView?.image = UIImage(named: "iconfont-select")
    }
}

现在运行程序,界面已经显示出来了,下面我们将开始处理多选删除的逻辑,当我们点击单元格的时候发现,只能单选啊?我要怎么去多选呢?此时我们需要在配置表格视图的地方设置 allowsMultipleSelection 属性,将其值设为 YES。

tableView.allowsMultipleSelection = true

接下来,实现代理方法 didSelectRowAtIndexPath:didDeselectRowAtIndexPath:,这里我们将修改单元格选中与未选中状态下的颜色,只需根据参数indexPath获取到单元格,修改 backgroundColor 属性,并且,我们还需要获取单元格上的数据,去操作selectedDatas数组,具体实现如下。

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {

    let cell = tableView.cellForRowAtIndexPath(indexPath)
    cell?.backgroundColor = UIColor.cyanColor()

    self.selectedDatas?.append((cell!.textLabel?.text)!)

}

func tableView(tableView: UITableView, didDeselectRowAtIndexPath indexPath: NSIndexPath) {

    let cell = tableView.cellForRowAtIndexPath(indexPath)
    cell?.backgroundColor = UIColor.whiteColor()

    let index = self.selectedDatas?.indexOf((cell?.textLabel?.text)!)
    self.selectedDatas?.removeAtIndex(index!)
}

didDeselectRowAtIndexPath:方法中,我是根据表格视图单元格上的数据获取下标,再从数组中删除元素的,可能有的人会问,不能像OC一样调用removeObject:方法根据数据直接删除元素吗?并不能,因为Swift 提供的删除数组元素的方法中,大都是根据下标来删除数组元素的。

接下来,我们需要执行删除逻辑了,在删除按钮触发的方法中,我们要做的第一件事情就是异常处理,如果 selectedDatas 数组为空或者该数组并未初始化,我们无需再做删除处理,弹框提示即可。

// Exception handling
if (self.selectedDatas == nil) || (self.selectedDatas?.isEmpty == true) {
    let alertController = UIAlertController(title: "温馨提示", message: "请选择您要删除的数据!", preferredStyle: UIAlertControllerStyle.Alert)
    alertController.addAction(UIAlertAction(title: "确定", style: UIAlertActionStyle.Default, handler: nil))
    self.presentViewController(alertController, animated: true, completion: nil)
    return
}

异常处理之后,我们需要遍历selectedDatas数组,然后根据该数组中的数据获取到该数据在数据源(dataSource)里的下标,最后再根据该下标将数据从数据源中删除。

for data in self.selectedDatas! {

    // Get index with data
    let index = self.dataSource!.indexOf(data)

    // Delete data with index
    self.dataSource?.removeAtIndex(index!)
}

现在我们只需要刷新表格视图即可,当然,selectedDatas数组我们也需要清空,以备下一次用户多选删除使用。

self.tableView?.reloadData()

self.selectedDatas?.removeAll()

为了提高用户体验,我们可以弹框提示用户删除成功,直接在后面加上以下代码。

let alertController = UIAlertController(title: "温馨提示", message: "数据删除成功!", preferredStyle: UIAlertControllerStyle.Alert)

self.presentViewController(alertController, animated: true, completion: nil)


dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(1.0 * Double(NSEC_PER_SEC))), dispatch_get_main_queue()) { () -> Void in
    self.presentedViewController?.dismissViewControllerAnimated(true, completion: nil)
}

代码中,我并未给弹出框添加action ,而是通过一个延迟调用,来让弹出框自动消失,这样就避免了用户再次点击弹出框按钮来隐藏,提升用户体验。

OK,到了这一步,基本已经实现了,但是有一个小瑕疵,那就是当我删除了单元格的时候,界面上某些单元格会呈现选中状态的背景颜色,解决办法非常简单,我们只需要在配置单元格的协议方法中加上这一句话即可。

cell?.backgroundColor = UIColor.whiteColor()

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Swift实现表格视图单元格多选

本文链接: https://www.lsjlt.com/news/163851.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Swift实现表格视图单元格多选
    本文实例为大家分享了Swift实现表格视图单元格多选的具体代码,供大家参考,具体内容如下 效果 前言 这段时间比较忙,没太多的时间写博客,前段时间写了一些关于表格视图单选的文章,想...
    99+
    2024-04-02
  • Swift实现表格视图单元格单选(1)
    本文实例为大家分享了Swift实现表格视图单元格单选的具体代码,供大家参考,具体内容如下 效果展示 前言 最近一个朋友问我,如何实现表格视图的单选?因为我之前用Objective-...
    99+
    2024-04-02
  • Swift实现表格视图单元格单选(2)
    本文实例为大家分享了Swift实现表格视图单元格单选的具体代码,供大家参考,具体内容如下 效果 前言 前段时间写了一篇博客: 表格视图单元格单选(一),实现起来并不复杂,简单易懂。...
    99+
    2024-04-02
  • Swift使用表格组件实现单列表
    本文实例为大家分享了Swift使用表格组件实现单列表的具体代码,供大家参考,具体内容如下 1、样例说明: (1)列表内容从Controls.plist文件中读取,类型为Array 。...
    99+
    2024-04-02
  • Vue+Element实现表格单元格编辑
    前言 Element的表格组件并没有给出明确的点击单个单元格进行的编辑的方案,我仔细阅读了官方的文档后,发现这个操作还是可以实现的。 实现原理 1、利用Table组件的cell-cl...
    99+
    2024-04-02
  • css如何实现表格单元格等宽
    这篇文章将为大家详细讲解有关css如何实现表格单元格等宽,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。表格单元格等宽表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元...
    99+
    2023-06-05
  • css如何实现等宽表格单元格
    这篇文章给大家分享的是有关css如何实现等宽表格单元格的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。等宽表格单元格表格可能很难处理,所以尝试使用table-layout:fixed来保持单元格相等宽度:.cale...
    99+
    2023-06-27
  • Swift如何使用表格组件实现单列表
    本篇文章给大家分享的是有关Swift如何使用表格组件实现单列表,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1、样例说明:(1)列表内容从Controls.plist文件中读取...
    99+
    2023-06-29
  • Vue中Element的table多选表格如何实现单选
    目录Element的table多选表格实现单选vue table单选逻辑Element的table多选表格实现单选 效果图 1.在多选表格的基础上进行处理, 呈现单选表格的作用 2...
    99+
    2024-04-02
  • css表格的单元格不换行怎么实现
    本教程操作环境:Windows10系统、CSS3版、DELL G3电脑css表格的单元格不换行怎么实现?css表格文字不换行设置:很多时候,我们在项目开发中会出现,单元格内容由于太多导致的换行问题,让表格显得非常的丑陋。下面我们来看一下使用...
    99+
    2023-05-14
    css 单元格
  • css表格的单元格不换行如何实现
    本文小编为大家详细介绍“css表格的单元格不换行如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“css表格的单元格不换行如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。css表格的单元格不换行的实现...
    99+
    2023-07-05
  • element-ui表格如何实现单元格可编辑
    这篇文章主要介绍element-ui表格如何实现单元格可编辑,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!如下所示:<template>  <el-tab...
    99+
    2024-04-02
  • Dreamweaver如何选中多个单元格
    小编给大家分享一下Dreamweaver如何选中多个单元格,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、小试牛刀例:3x3表格(如图所示)按住Ctrl键单击&...
    99+
    2023-06-08
  • C#实现拆分合并Word表格中的单元格
    目录程序环境在Word表格中合并单元格完整代码效果图在Word表格中拆分单元格完整代码效果图我们在使用Word制作表格时,由于表格较为复杂,只是简单的插入行、列并不能满足我们的需要。...
    99+
    2022-12-22
    C#拆分合并Word表格单元格 C#拆分单元格 C#合并单元格
  • ASP.NET MVC打印表格并实现部分视图表格打印
    假设在一个页面上有众多内容,而我们只想把该页面上的表格内容打印出来,window.print()方法会把整个页面的内容打印出来,如何做到只打印表格内容呢? 既然window.prin...
    99+
    2022-11-13
    ASP.NET MVC 打印表格
  • antdvue表格可编辑单元格以及求和实现方式
    目录antd vue表格可编辑单元格以及求和实现antd vue 表格可编辑问题总结antd vue表格可编辑单元格以及求和实现 1、参照官网根据自己需要添加可编辑单元格组件 新建E...
    99+
    2023-05-17
    antd vue表格可编辑单元格 antd vue表格求和 antd vue表格可编辑
  • vue 表格单选按钮的实现方式
    目录vue实现表格单选按钮表格中有两个单选按钮切换互不影响项目场景问题描述原因分析解决方案vue实现表格单选按钮 return{ orderNo:'', columns: [ ...
    99+
    2024-04-02
  • element table 表格控件实现单选功能
    项目中实现 table 表格控件单选功能,如图: 基本代码如下: 1、template 代码中: <el-table :data="tableData" bo...
    99+
    2024-04-02
  • React实现表格选取
    本文实例为大家分享了React实现表格选取的具体代码,供大家参考,具体内容如下 在工作中,遇到一个需求,在表格中实现类似于Excel选中一片区域的,然后拿到选中区域的所有数据。 1....
    99+
    2024-04-02
  • 普通填报表单元格如何实现数据二次筛选
    这期内容当中小编将会给大家带来有关普通填报表单元格如何实现数据二次筛选,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。问题:普通浏览式报表可以这样 =employee.select(编号, 部门 ==“综合...
    99+
    2023-06-03
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作