为有牺牲多壮志,敢教日月换新天。

[Xcode 实际操作]三、视图控制器-(11)在Storyboard中使用表格控件

热烈欢迎,请直接点击!!!

进入博主App Store主页,下载使用各个作品!!!

注:博主将坚持每月上线一个新app!!!

目录:[Swift]Xcode实际操作

本文将演示表格控件在故事板中的使用。

点击【显示或隐藏检查器按钮】,再界面右侧打开检查器面板。

在控制器根视图上点击鼠标,以选择该根视图。

现在往根视图中添加一个表格视图。

点击【库面板】图标,打开控件库面板

在控件库搜索框内,输入控件名称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.count
19     }
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! UILabel
33         //根据表格行的编号,从数组中获得对应的字符串,从而设置标签的文字内容。
34         label.text = fruits[(indexPath as NSIndexPath).row]
35         
36         //最后返回设置好的单元格对象。
37         return cell
38     }
39 
40     override func didReceiveMemoryWarning() {
41         super.didReceiveMemoryWarning()
42         // Dispose of any resources that can be recreated.
43     }
44 }

 

posted @ 2018-11-23 21:26  为敢技术  阅读(281)  评论(0编辑  收藏  举报