Swift实现表格视图单元格单选(1)

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

效果展示

前言

最近一个朋友问我,如何实现表格视图的单选?因为我之前用Objective-c写过一次,但那都是很久以前的事情了,于是就想着用swift实现一次,并分享给大家。

实现

下面我们来看看具体的实现方法。

首先我们创建一个Swift iOS工程,在AppDelegate.swift的didFinishLaunchingWithOptions方法中手动初始化UIWindow,并且给根视图控制器添加导航栏,当然在此之前我们需要到Info.plist文件中将Storyboard加载UIWindow字段的Main值删除。

self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
self.window?.backgroundColor = UIColor.blackColor()
self.window?.rootViewController = UINavigationController(rootViewController: ViewController())
self.window?.makeKeyAndVisible()

下一步,我们需要到ViewController.swift文件中搭建界面,构造表格视图,以及数据源的配置,这里我直接上代码,相信表格视图的使用大家已经非常熟悉了。代码中注册的单元格使用的是自定义的单元格,而处理单选的方法主要就是在自定义单元格CustomTableViewCell中实现,稍后我会提及,涉及到的素材可到阿里矢量图中下载。

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

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

    override func viewDidLoad() {
        super.viewDidLoad()

        self.initializeDatasource()
        self.initializeUserInterface()

    }

    // MARK:Initialize methods
    func initializeDatasource() {

        self.dataSource = ["中国", "美国", "法国", "德国"]
    }

    func initializeUserInterface() {
        self.title = "单项选择"
        self.automaticallyAdjustsScrollViewInsets = false
        self.view.backgroundColor = UIColor.whiteColor()

        // initialize table view
        self.tableView = {
            let tableView = UITableView(frame: CGRectMake(0, 64, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds) - 64), style: UITableViewStyle.Grouped)
            tableView.dataSource = self
            tableView.delegate = self
            tableView.separatorStyle = UITableViewCellSeparatorStyle.SingleLine
            tableView.registerClass(CustomTableViewCell.classForCoder(), forCellReuseIdentifier: "cellIdentifier")
            return tableView
            }()
        self.view.addSubview(self.tableView!)
    }

    // MARK:UITableViewDataSource && UITableViewDelegate

    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 {

        let cell = tableView.dequeueReusableCellWithIdentifier("cellIdentifier", forIndexPath: indexPath) as! CustomTableViewCell

        cell.imageView?.image = UIImage(named: "iconfont-select.png")
        cell.textLabel?.text = self.dataSource![indexPath.row]

        return cell

    }

    func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 40
    }

    func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return "请选择您向往的城市:"
    }

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

        // get cell with index path
        let cell = tableView.cellForRowAtIndexPath(indexPath)

        print("您选择的城市:\((cell?.textLabel?.text)!)")
    }

}

接下来我们看看 CustomTableViewCell.swift 文件,在自定义单元格中,要做的操作非常简单,只需在 setSelected方法中做如下操作即可:

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

        super.setSelected(selected, animated: animated)

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

好了,表格视图的单选就这样实现了,运行看看吧。可能在实际开发中会遇到更为复杂的情况,就是多个组的单选,比如你要做一个类似于习题库的应用,将会用到多个组的单选,那应该如何实现呢?可参考:表格视图单元格单选(二)

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

(0)

相关推荐

  • Swift实现表格视图单元格单选(2)

    本文实例为大家分享了Swift实现表格视图单元格单选的具体代码,供大家参考,具体内容如下 效果 前言 前段时间写了一篇博客: 表格视图单元格单选(一),实现起来并不复杂,简单易懂.在实际开发中,可能会涉及到更为复杂的操作,比如多个section 下的单选,如上面展示的效果,当我们有这样的需求的时候,该如何实现呢?因为,在上篇文章中我所用的控件都是单元格自带的imageView以及textLabel,本文我将主要分享自定义选择按钮以及在多个section下实现单选的方法. 准备 界面搭建与数据显示

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

    本文实例为大家分享了Swift实现表格视图单元格多选的具体代码,供大家参考,具体内容如下 效果 前言 这段时间比较忙,没太多的时间写博客,前段时间写了一些关于表格视图单选的文章,想着,一并把多选也做了,今天刚好有时间,去做这样一件事情.多选在我们的应用程序中也是常见的,比如消息的删除,群发联系人的选择,音乐的添加等等可能都会涉及到多选的需求,本文,我将模拟多选删除消息来讲讲多选的实现. 原理 多选删除其实很简单,并不复杂,我的思路就是创建一个数组,当用户选中某个单元格的时候,取到单元格上对应的数

  • swift表格控件使用方法详解(UITableview)

    本文实例为大家分享了swift表格控件的简单使用,供大家参考,具体内容如下 1.效果图 2.该控件(UITableView) 代码注意的地方: A.ViewController 不单单继承于 UIViewController,还有 UITableViewDelegate,UITableViewDataSource. B.要自己重新实现UITableView的3个方法.分别是:numberOfSectionInTableView(table:UITableView), tableView(tabl

  • Swift实现表格视图单元格单选(1)

    本文实例为大家分享了Swift实现表格视图单元格单选的具体代码,供大家参考,具体内容如下 效果展示 前言 最近一个朋友问我,如何实现表格视图的单选?因为我之前用Objective-c写过一次,但那都是很久以前的事情了,于是就想着用swift实现一次,并分享给大家. 实现 下面我们来看看具体的实现方法. 首先我们创建一个Swift iOS工程,在AppDelegate.swift的didFinishLaunchingWithOptions方法中手动初始化UIWindow,并且给根视图控制器添加导航

  • Bootstrap实现的表格合并单元格示例

    本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

  • element-ui 表格实现单元格可编辑的示例

    如下所示: <template> <el-table :data="tableData" border @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut" style="width: 100%"> <el-table-column label="日期" width="180&q

  • angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态.分享给大家供大家参考,具体如下: html部分: <table> <thead> <tr > <th width="40px;">序号</th> <th>班次</th> <th>分组</th> <th>操作</th> </tr> </thead>

  • Layui数据表格之单元格编辑方式

    开发工具与关键技术:VS.layui数据表格之单元格编辑 layui是我们常用的一个插件,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,其中有很多模快,而每个模板又包括很多模板,下面我要讲解的是数据表格中的单元格编辑. 1.在使用layui之前首先确保已经引入了layui的css和js脚本文件. 2.初始化layui模块. layui.use(['table'], function () { //声明一个layuiTable变量作为全局变量.

  • Element Plus修改表格行和单元格样式详解

    目录 前言 设置某一行的样式 设置某一个单元格的样式 表头样式修改(赠品) 总结 前言 实习工作需要根据表格的状态字段来设置行的样式,记录一波. 先来一下基础配置.(Vue3) <template> <el-table :data="tableData" border style="width: 400px"> <el-table-column prop="name" label="姓名" wid

  • 用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css #wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break

  • jQuery实现拖动调整表格单元格大小的代码实例

    jQuery实现的拖动调整表格td单元格的大小: 在实际应用中,可能有这样的需求,那就是需要调整td单元格的大小. 也许是为了便于观察,也许是其他原因,反正这样的需求是有的,下面就分享一段能够实现此功能的代码. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style ty

随机推荐