【iOS开发新手上路】教你一步一步创建一个功能齐全的UITableViewController（上）

本人还是学生，虽然接触iOS开发时间有一两年，但是都是仿照现有的例子做做，有什么错误希望各位大神能指出

1、创建项目

新建一个项目，选择Single View Application



设备选择iPhone，语言选择swift



选中左侧文件列表中的Main.storyboard，从左下角的文件选择器中拖一个navigation controller进入界面，并将小箭头移到navigation controller上面



2、配置Cell

选中Root View Controller中的TableViewCell在左侧工具栏的Identifier中填入一个ID（填什么随便，等下用于Cell的复用，复用功能是TableView中的一个重要功能，可以通过循环使用Cell来节约内存），然后在View中放入一个imageView和一个TableView



右键选中项目文件夹，新建文件，选择iOS列表下的cocoatouch



SubClass选择UITableViewCell



回到Main.StoryBoard在右侧面板绑定TableViewCell类



点击Xcode又上的按钮打开辅助编辑器，然后将右边的视图切换到main.storyboard，按住Control拖动至左边TableViewCell视图创建IBOutlet



然后再新建一个继承自UIView的类来作为数据源，新建方式同上，将SubClass改成UIView即可，并在括号中键入以下代码

var img: UIImage!         //用于储存图片
var lableText: String!    //标签的文字
convenience init(imgName: String,text: String){  //等下将用这个方法来完成每个Cell的数据源的初始化
self.init()
lableText = text
img = UIImage(named: imgName)    //将文件名转换为UIImage，将调用放入项目的图片资源
}

3、配置UITableViewController

SubClass选择UITableViewController



创建一个DataSource数组用于存放Cell的数据源

var items = [DataSource]()

将数据源加载进数组

在ViewDidLoad中键入以下代码

let sample1 = DataSource(imgName: "例图1",text: "例1");
let sample2 = DataSource(imgName: "例图2",text: "例2");
items = [sample1,sample2]

并将图片素材导入到项目里面，选中左侧的Assets.xcassets，将图片资源拖入左侧的表格里面，此处博主使用的是AI导出的PDF矢量文件



然后跳转回TableViewController.swift文件

去掉这三个方法的注释，并修改为以下内容

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
// #warning Incomplete implementation, return the number of sections
return 1   //此处的数值为分段数值
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return items.count //此处为Cell的个数
}

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

let cell:TableViewCell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as! TableViewCell  //括号内的"Cell"改为自己设置的identifier，该函数用于实现Cell的复用
let ofc = items[indexPath.row]   //将数组中的一个元素赋值给一个临时变量
cell.imgView.image = ofc.img     //将临时变量中的图片赋值给Cell中的图片
cell.label.text = ofc.lableText  //将临时变量中的标题赋值给Cell中的图片

// Configure the cell...
return cell
}

此时按下编译运行按钮便可以看到一个简单的表格界面



4、为表格增添多选删除和滑动删除功能以及排序功能

拖入一个NavigationItem和Bar Button Item，将Bar Button Item的文字设为Edit






连接IBOutlet和IBAction到TableViewController.switft中

此处博主连接后的名字分别为editButton和enableEdit

之后在enableEdit中添加代码：

@IBAction func enableEdit(sender: AnyObject) {
if ifIsEditting == true {
ifIsEditting = false
editButton.title = "Done" //按钮的文字显示为Done
self.setEditing(true, animated: true)//开启编辑模式
navigationItem.leftBarButtonItem = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Trash, target: self, action: #selector(TableViewController.deleteCell))//在顶栏左边添加一个删除按钮，并添加删除按钮的动作到一个名为deleteCell的方法
}
else {
ifIsEditting = true
editButton.title = "Edit"
self.setEditing(false, animated: true) //关闭编辑模式
navigationItem.leftBarButtonItem = nil //将左边的按钮设为空
}
}

然后在viewDidLoad中加入以下语句来开启多重选择功能：

self.tableView.allowsMultipleSelectionDuringEditing = true

并添加删除函数：

func deleteCell() {
if self.tableView.indexPathForSelectedRow != nil{
let indexs:[NSIndexPath] = (self.tableView.indexPathsForSelectedRows?.sort({$0.row > $1.row}))!//将选中的Cell从小到大进行排序
for count in indexs{
items.removeAtIndex(count.row) //移除item中被选中的Cell的数据源
tableView.deleteRowsAtIndexPaths([count], withRowAnimation: .Fade) //删除表格视图中对应的Cell
}
}
}

去掉这两个方法的注释并在其中添加代码来实现排序支持：

// Override to support rearranging the table view.
override func tableView(tableView: UITableView, moveRowAtIndexPath fromIndexPath: NSIndexPath, toIndexPath: NSIndexPath) {
let exchange = items[toIndexPath.row]
items[toIndexPath.row] = items[fromIndexPath.row]
items[fromIndexPath.row] = exchange
}

// Override to support conditional rearranging of the table view.
override func tableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath) -> Bool {
// Return false if you do not want the item to be re-orderable.
return true
}

按下运行，便可以得到一个能够实现多选删除的表格

在接下来将结合SQLite来制作一个能长期保存数据，实现数据增删查改的表格