打开Xcode,新建一个项目:
选择iOS\Application\Single View Application
创建一个单视图应用:
设置项目名称 testTableView,语言选择Swift,设备选择Universal:
创建好项目后,我们在项目目录结构中可以看到只存在一个storyboard
文件:
Main.storyboard文件就是一个通用的storyboard
文件,它可以适配目前所有屏幕尺寸的Apple移动设备。打开该文件,会看到一个View Controller,以及一个我们不太熟悉的界面尺寸:
首先,我们打开Main.storyboard
文件,从组件库(Object Library)中选择Table View拖拽到View Controller中。
选中刚刚拖入的Table View,添加 4 个约束,使其充满屏幕。
然后,我们再从组件库(Object Library)中选择 Table View Cell 并拖动到 Table View 上。
然后在下图右边属性栏的红框中选择 Basic, 蓝框中输入 basicCell。
选择下图左侧的 Table View 条目,右击鼠标弹出下面黑色窗口,分别点击 dataSource 和 delegate 右边的圆圈,并拖动到红色箭头位置后再释放鼠标。
在 ViewContoler.swift 中输入下面代码
import UIKit
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
var teststring: Array<String> = ["This is test1 of TabllView"]
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
// 数据源方法, 返回多少组
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1;
}
// 每组有多少行
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return teststring.count
}
// 每行展示什么内容
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "basicCell", for: indexPath)
cell.textLabel?.text = teststring[indexPath.row]
return cell
}
}
点击 xcode 左上角的运行按键,将会显示以下画面,一个简单的 Table View 就完成了。
下面我们再添加 cell 动态增加和删除 功能。
我们在前面介绍界面的下部添加一个 View 并在其上放置两个按钮,如下图
选择 + 按钮并点击右键弹出如下黑色窗口,再在 Touch Up Inside 右边对应的圆圈中按下鼠标左键立并拖动到红色箭头处,松开右键会弹出下图底部窗口其 Name 输入框中输入 addTest, 在其 Type 组合框中选择 UIButton,然后点击 Connect 按钮。
- 按钮的操作步骤与 + 按钮相同,区别只是在 Name 输入框中输入 subTest,其它一样。
然后再...,老一套了,大家看下图自己操作吧
下图三个红框中是我们上面拖拉出来的,其中两个拖拉的按钮中输入了功能代码。
完成后的代码如下:
//
// ViewController.swift
// testTableView
//
// Created by xxxx on 2019/8/31.
// Copyright © 2019 xxxxx. All rights reserved.
//
import UIKit
class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
var teststring: Array<String> = ["This is test1 of TabllView"]
@IBOutlet weak var vwTable: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
// 数据源方法, 返回多少组
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1;
}
// 每组有多少行
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return teststring.count
}
// 每行展示什么内容
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath)
cell.textLabel?.text = teststring[indexPath.row]
return cell
}
@IBAction func addTest(_ sender: UIButton) {
let count = teststring.count + 1
teststring.append("This is test" + String(count) + " of TabllView")
vwTable.reloadData()
}
@IBAction func subTest(_ sender: UIButton) {
teststring.removeLast()
vwTable.reloadData()
}
}
我们再次运行程序,通过 + 和 - 按钮就可以动态添加或删除 cell 了,大家可以测试一下。