目录:
本文将演示表格控件在故事板中的使用。
点击【显示或隐藏检查器按钮】,再界面右侧打开检查器面板。
在控制器根视图上点击鼠标,以选择该根视图。
现在往根视图中添加一个表格视图。
点击【库面板】图标,打开控件库面板
在控件库搜索框内,输入控件名称Table View,在控件库中,快速定位目标控件。
然后在按钮控件上双击,导入所需的控件。
在表格定界框的右下角按下鼠标,并向右下角拖动,以调整表格控件的尺寸。
然后点击库图标,再次打开控件库面板。添加一个单元格控件:Table View Cell
将导入的单元格控件,拖动到表格视图里。即在根视图左侧的文件树中拖动文件。
接着选择表格视图控件,点击【尺寸检查器】图标,打开尺寸检查器面板。
【Row Height】:60(行高)
接着选择单元格控件,同样设置单元格的高度。
【Row Height】:60(行高)
点击选择单元格的内容视图,接着往单元格的内部,添加一些新的控件。
点击【库面板】图标,打开控件库面板,以同样的方式,将图像视图添加到单元格中。
在宽度输入框内,输入图像视图的宽度数值。
在高度输入框内,输入图像视图的高度数值。
在X输入框内,输入图像视图在单元格内的横向坐标值
在Y输入框内,输入图像视图在单元格内的纵向坐标值
点击【属性检查器】图标,进入属性设置面板。
【Image】:输入图片的名称,设置图像视图默认显示的图片。
点击【库面板】图标,打开控件库面板,以同样的方式,将标签控件添加到单元格中。
将添加的标签对象拖动至单元格内适当位置,鼠标在标签定界框上按下,调整标签的宽度。
【Tag】:在标识输入框内,设置标志值,通过标志值,就可以在代码中获取该标签控件。
【重要】在故事板元素列表中,选择根视图中的表格控件,现在给表格添加代理对象:
在表格控件上按下鼠标右键,然后拖动到视图控制器图标,
在弹出的列表中,选择【dataSource】数据源选项,设置表格的数据源,为当前的视图控制器
继续在表格上按下鼠标的右键,然后拖动到视图控制器。
在弹出的列表中,选择【delegate】代理选项,设置表格的代理。
然后选择单元格控件,设置单元格的重用标识符。
【Identifier】:reusedCell
点击【隐藏或显示检查器】按钮,隐藏检查器面板。
点击打开视图控制器的代码文件。
1 import UIKit 2 //给视图控制器类添加两个代理协议: 3 //一个是表格视图的数据源协议,另一个是表格视图的代理协议。 4 class ViewController: UIViewController,UITableViewDelegate, UITableViewDataSource { 5 6 //创建一个数组, 7 //该数组里面的数据,将作为表格数据的来源。 8 var fruits = ["Apple", "Banana", "Chinese Date", "Downy Picch", "Filbert", "Gingko", "Hawthorn", "Kumquat"] 9 10 override func viewDidLoad() {11 super.viewDidLoad()12 // Do any additional setup after loading the view, typically from a nib.13 }14 15 //添加一个表格代理方法,用来设置表格的行数。16 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {17 //这里设置将数组的长度作为表格的行数18 return fruits.count19 }20 21 //添加一个代理方法22 //用来初始化和返回表格视图的单元格,是最主要的一个代理方法。23 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {24 //创建一个字符串,作为单元格的标识符,25 //也就是上文在故事板中,给单元格控件设置的那个重用标识符。26 let identifier = "reusedCell"27 //单元格的标识符,可以看作是一种重用机制,此方法可以从所有已经开辟内存的单元格里面,28 //选择一个具有同样标识符的、空闲的单元格。29 let cell = tableView.dequeueReusableCell(withIdentifier: identifier, for: indexPath)30 31 //通过在故事板中设置的标志值,获得单元格中的标签控件。32 let label = cell.viewWithTag(1) as! UILabel33 //根据表格行的编号,从数组中获得对应的字符串,从而设置标签的文字内容。34 label.text = fruits[(indexPath as NSIndexPath).row]35 36 //最后返回设置好的单元格对象。37 return cell38 }39 40 override func didReceiveMemoryWarning() {41 super.didReceiveMemoryWarning()42 // Dispose of any resources that can be recreated.43 }44 }