-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathios-swift-table.html
More file actions
148 lines (125 loc) · 6.22 KB
/
ios-swift-table.html
File metadata and controls
148 lines (125 loc) · 6.22 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>TopDownU Tutorials</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/2-col-portfolio.css" rel="stylesheet">
<link href="tutorials.css" rel="stylesheet">
</head>
<body>
<div class="header">
<h2 class="tutorialTitle">Setting up a TableView</h2>
<p class="tutorialDescription">in 5 simple steps</p>
<p class="moreTutorials"><a target="_blank" class="moreTutorialsLink" href="http://topdownu.com/tutorials">MORE TUTORIALS</a></p>
</div>
<div class="row">
<div class="row-white">
<div class="padding-box">
<h2 class="stepTitle">Prerequisites</h2>
<p class="stepParagraph"><a href="https://topdownu.github.io/tutorials/ios-swift-new-project.html">Create a New XCode Project</a></p>
</div>
</div>
</div>
<div class="row">
<div class="row-gray">
<div class="padding-box">
<h2 class="stepTitle">Drag a TableView</h2>
<p class="stepParagraph">Drag UITableView into the ViewController of your Main.storyboard and set update/add AutoConstraints as shown below.</p>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/3osBLoim5tW8XJHp6g" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/3osBLoim5tW8XJHp6g">via GIPHY</a></p>
</div>
<div class="padding-box">
<h6 class="stepNumber">Step 1 of 6</h6>
</div>
</div>
</div>
<div class="row">
<div class="row-white">
<div class="padding-box">
<h2 class="stepTitle">Create a Prototype Cell and Create Identifier</h2>
<p class="stepParagraph">Select the tableview and create a prototype cell by changing the value of Prototype Cells from 0 to 1. Select the newly created cell and create an identifier as shown below,</p>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/3osBL69mW89UgK5zlC" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/3osBL69mW89UgK5zlC">via GIPHY</a></p>
</div>
<div class="padding-box">
<h6 class="stepNumber">Step 2 of 6</h6>
</div>
</div>
</div>
<div class="row">
<div class="row-gray">
<div class="padding-box">
<h2 class="stepTitle">Connect Delegate and Datasource</h2>
<p class="stepParagraph">Select the tableview and delegate and datasource connections to the yellow colored ViewController icon as shown below,</p>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/3ohs7TrmGM1cz0GIz6" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/3ohs7TrmGM1cz0GIz6">via GIPHY</a></p>
</div>
<div class="padding-box">
<h6 class="stepNumber">Step 3 of 6</h6>
</div>
</div>
</div>
<div class="row">
<div class="row-white">
<div class="padding-box">
<h2 class="stepTitle">Inherit Delegate and Datasource classes</h2>
<p class="stepParagraph">Inherit delegate and datasource classes as shown below,</p>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/xT0xeNa6plKrfUYAAU" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/xT0xeNa6plKrfUYAAU">via GIPHY</a></p>
</div>
<div class="padding-box">
<h6 class="stepNumber">Step 4 of 6</h6>
</div>
</div>
</div>
<div class="row">
<div class="row-gray">
<div class="padding-box">
<h2 class="stepTitle">Create a array </h2>
<p class="stepParagraph">Copy paste the line below inside your ViewController class.</p>
</div>
<div class="codeSnippet">
<p class="code">
var list : [String] = ["one", "two", "three", "four"]
</p>
</div>
<div class="padding-box">
<h6 class="stepNumber">Step 5 of 6</h6>
</div>
</div>
</div>
<div class="row">
<div class="row-white">
<div class="padding-box">
<h2 class="stepTitle">Implement Datasource and Delegate Methods</h2>
<p class="stepParagraph">Copy paste the code below in your ViewController class.</p>
</div>
<div class="codeSnippet">
<p class="code">
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int{<br/>
return list.count<br/>
}<br/><br/>
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell{<br/>
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)<br/>
cell.textLabel?.text = self.list[indexPath.row]<br/>
return cell<br/>
}<br/>
</p>
</div>
<div class="padding-box">
<h6 class="stepNumber">Step 6 of 6</h6>
</div>
</div>
</div>
<!-- Footer -->
<footer class="py-5 bg-light">
<center>Copyright TopDownU 2017</center>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>