Syllabus

UNIT – III BUILDING BLOCKS OF iOS 8 Hours

UIView - Storyboard – AutoLayout & Constraints - UI Elements (UITextField, UILabel,
UIImageView, UIButton etc.,) – UINavigationController - Segue– UISwitch – UIAlertController –
UITableView - UIScrollView – UICollectionView – ImagePickerController.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 1

readLine () – Adding two numbers
print("enter number one: ")
var sum = 0
if let num1 = Int(readLine()!)
{ sum += num1
}
print("enter number two: ")
if let num2 = Int(readLine()!)
{ sum += num2
}
print(sum)

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 2

 App using UI elements(Label and Button)
Please follow the Step 1 to Step 7 in Hello World App

User interface will be

in [Link] file so open
[Link] file. Now in
Object library search for
the label in Filter field then drag
and drop
the label into [Link] Vi
ewController same way drag and
drop the button control in
ViewController

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 3

 iOS Actions & Outlets Step 8

NOTE : outlet is basically the reference object and action is the method that is useful to perform some type of
actions. “@IBOutlet” to add reference of label control and we used “@IBAction” to add button click action to
change label control text. IB- Interface Builder

To implement any functionality for UI controls, there is a need to map UI controls to the
code in [Link].
Now map our controls to [Link] file for that we need to use Assistant
editor in Xcode. Open the Xcode editor in assistant mode for that click on the overlap
circle button in Xcode toolbar at top right side

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 4

Connect UI controls in XCode Step 9

Now press Ctrl button in keyboard and drag the controls from your canvas to the code
display in [Link] file

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 5

Swift Code Step 10

Once you drag the controls from viewcontroller to code in [Link] file
now write code in @IBAction to change the label text when click on button. Once we
make required changes our [Link] file

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var labeltxt: UILabel!
@IBAction func buttonaction(sender: AnyObject) {
[Link] = "Hello"
}
override func viewDidLoad() {
[Link]()
}
override func didReceiveMemoryWarning() {
[Link]()
}
}
29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 6
 Run Xcode Step 11

Output

To run application, select the

required simulator (Here we selected iPhone 6s
Plus) and click on Play button, located at the
top-left corner of the Xcode toolbar

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 7

 App using TextField
Please follow the Step 1 to Step 7 in Hello World App 8
User interface will be in [Link] file so
open [Link] file. Now in Object library
drag and drop the Text Field control
into [Link] ViewController same way we
need to add overall 2 text fields, 3 labels
and one-button control to ViewController

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 8

 Connect iOS UI Controls with Code
9
Now make a connection between controls
and [Link] code for that click
on Assistant button (overlap circle) in Xcode
toolbar at the right side like as shown below

To map the controls, press Ctrl button in keyboard and

drag the two textfields, label and button from the canvas
interface and drop it into [Link] file

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 9

 Swift Code
10

import UIKit
class ViewController: UIViewController { override func viewDidLoad() {
@IBOutlet weak var firstname: UITextField! [Link]()
// Do any additional setup after loading the view,
@IBOutlet weak var lastname: UITextField! typically from a nib.
@IBOutlet weak var fullname: UILabel! }
override func didReceiveMemoryWarning() {
var mmm = String() [Link]()
// Dispose of any resources that can be recreated.
@IBAction func fullnameAction(sender: AnyObje
}
ct) {
}
[Link] = [Link]! + [Link]!
}

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 10

 Run Xcode 10

Output
To run application, select the
required simulator (Here we selected iPhone 6s
Plus) and click on Play button, located at the
top-left corner of the Xcode toolbar

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 11

 App using ImageView
Please follow the Step 1 to Step 7 in Hello World App

8 Download the simple image from internet and drag the image and drop into your
project

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 12

 App using ImageView 9

user interface will be in [Link] file so

open [Link] file. Now in Object
library search for the Image View in Filter
field then drag and drop the Image
View into [Link] ViewController

Provide the location of the image in the image

attribute of ImageView

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 13

 Run Xcode 10

Outp
To run application, select the ut
required simulator (Here we selected iPhone 6s
Plus) and click on Play button, located at the
top-left corner of the Xcode toolbar

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 14

Login App
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var email: UITextField!
@IBOutlet weak var pass: UITextField!
override func viewDidLoad() {
[Link]()
// Do any additional setup after loading the view, typically from a nib.
}

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 15

@IBOutlet weak var sub: UIbutton!
@IBAction func subAction(_sender:Any)
{
if(([Link]?.contains(“Kavitha”))! &&
([Link]?.contains(“123”))!)
{
NSLog(“Login Successfully”)
}
else
{
NSLog(“Login Failed”)
}

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 16

 Sum of digits of a number
print("enter number1 and number2")
while (number != 0)
if let n = Int(readLine()!) {
{ reminder = number % 10
sum = sum + reminder
var sum = 0 number = number / 10
}
var reminder = 0
print(sum)
var number=n }

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 17

UIView
UIView can be defined as an object by using which we can create and manage the
rectangular area on the screen
Views are the fundamentals of iOS application development, and that's why
UIView is one of the most used object in the object library.
The views are the basic building block of the iOS application, which renders the
content within its bounds rectangle and also handles any interaction with the
content.
In iOS application development, there are many objects like labels, text fields, etc.
which directly inherits the UIView class to use the common properties and
methods.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 18

 Adding constraints to UI control
Align Tool
The Align tool lets you quickly align items in your layout. Select the items you want to
align, and then click the Align tool. Interface Builder presents a popover view containing
a number of possible alignments.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 19

 Pin Tool
▪The Pin tool lets you quickly define a view’s position relative to its neighbors or quickly
define its size.
▪Select the item whose position or size you want to pin, and click the Pin tool

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 20

iOS App using AutoLayout & Constraints
In iOS auto layouts are used to make applications view the same in all the sizes of
devices in both portrait and landscape mode. The auto layout dynamically calculates
the size of view and adjusts the controls based on the constraint values which we set
for constraints.
Suppose if you make an iOS application for iPhone like 5S and open on 6S you will find
that overall layout is not in fixed position and the whole layout shows ambiguous user
interface. If we use auto-layout our application will appear the same in all the devices

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 21

iOS App using AutoLayout & Constraints
Now in Object library search for Label in Filter field then drag and
drop Label into [Link] ViewController like as shown below same way add
another 3 label controls in [Link] file

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 22

iOS App using AutoLayout & Constraints
Now run and check the output of the application
Only two labels are appearing this is the main problem if we can’t set the auto layout

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 23

iOS Set Auto Layout Constraints in Swift
Set the layout properties for labels, click on left side bottom label and set the constraint
using pin tool like as shown below.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 24

iOS Set Auto Layout Constraints in Swift
Now set the layout for the right side bottom label for that click on label and set the
constraints using pin tool.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 25

iOS Set Auto Layout Constraints in Swift
Now set the layout for right side top label for that click on the label and set the constraint
using pin tool

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 26

iOS Set Auto Layout Constraints in Swift
In the same way, set the layout constraints for the label which is in the top left side
using pin tool

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 27

Output of Auto Layout Constraints

Potrait

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 28

Output of Auto Layout Constraints
Now change the orientation of the phone automatically our app labels will get adjusted
to screen size like as shown below.

Landscape

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 29

UINavigationController
In iOS navigation bar or navigation controller is useful to arrange the application
content inefficient manner. Generally, the navigation bar will appear at the top of an app
screen and just below the status bar and it contains button options to enable navigation
through a series of hierarchical app screens like as shown below.

If we click an option in the navigation bar and move to a new screen means it will
show back button, with a title of the previous screen and right button like as shown
below and the best way to use the navigation bar in our applications is with a navigation
controller.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 30

Stack of Screens/Stack of View Controllers
– Navigation Controller
Editor->Embed In->Navigation Controller-> Pops in

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 31

Drag and drop a view controller from Object Library

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 32

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 33
▪Go to Second View Controller and click System Background color as Blue in Attribute Inspector
▪Go to third View Controller and click System Background color as Pink in Attribute Inspector
▪Click Second View Controller, Select File -> New -> File-Cocoa Touch Class->Next -> Give
Classname as TealViewController
▪Click Third View Controller, Select File -> New -> File-Cocoa Touch Class->Next -> Give
Classname as PinkViewController
▪In TealViewController swift file type title=“Teal Screen” inside viewDidLoad()
▪In PinkViewController swift file type title=“Pink Screen” inside viewDidLoad()

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 34

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 35
 Click Button and adjust constraints

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 36

 Adding constraints to Button

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 37

Click Button - > Attribute Inspector-> Background color to Pink , title to Go To Pink
Click Button in second view controller -> Ctrl+ drag to third view controller click Show

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 38

Click on Navigation controller arrow and select Navigation Bar

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 39

Click Navigation Item give space in Back Button

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 40

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 41
Storyboard and Segue
Storyboarding is a feature built into Xcode that allows both the various screens that
comprise an iOS application and the navigation path through those screens to be
visually assembled . It is a visual interface editor to design iOS app user interface

Segues define the flow of your app's interface. A segue defines a transition between two
view controllers in your app's storyboard

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 42

ViewController
▪In iOS development, the view controllers are the foundation of the Application's internal
structure.
▪The View Controller is the parent of all the views present on a storyboard.
▪Each application has at least one ViewController.
▪It facilitates the transition between various parts of the user interface.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 43

Object Library
▪The Object Library contains the UI elements that will be added in Interface Builder.
▪It helps to add controls to our application.
▪Object library search for the UI controls in Filter then drag and drop the control
into [Link]

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 44

Swift class and Cocoa Touch class
Swift class imports Foundation, which is the framework that defines NSObject,
NSString, NSArray, etc. all the basic objective-C classes. It imports Foundation for model
classes (data)
Cocoa Toch class imports UIKit, that defines views, view controllers, controls (e.g.
UIButton), etc. It imports UIKit for view/controller classes (presentation, logic)

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 45

 UISwitch
The switch can be defined as the UIControl, which provides binary choices to the user
either on or off
A switch can be added to the interface using the following steps.
[Link] the object of the UISwitch class or search for it in the object library and drag the
result to the storyboard builder.
[Link] an outlet of the switch in the ViewController class to customize its appearance at
runtime.
[Link] an action connection method of the switch in the ViewController class, which can
be called at runtime when the valueChanged event is triggered for the switch.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 46

 Example
import UIKit
class ViewController: UIViewController { @IBAction func switchValueChanged(_ sender:
@IBOutlet weak var msgLbl: UILabel! UISwitch)
{
@IBOutlet weak var mySwitch : UISwitch! if([Link])
override func viewDidLoad() { {
[Link] = "Switch is On"
[Link]() }
// Do any additional setup after else {
loading the view. [Link] = "Switch is Off"
}
}
}
}

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 47

▪Label shows the state of
the switch, whether it is
on or off

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 48

iOS App using Alert control
iOS UI Alerts in swift app to alert or show the important information to the user
regarding the action he is performing in app
1. Open Xcode
2. Go to File->New->Project
Steps 3. Click on Single View Application and click next
4. Name the Application
5. Decide whether you want it to be an iPhone app, an
iPad app, or universal
6. Open [Link]
7. Find a Button and drag it onto the view
8. Resize the Button to your liking by clicking and
dragging on the squares in the corners of the label
9. Go to the Attributes inspector
10. Make sure it is centered, and choose the font and size
11. Write the code in the [Link] file
13. Hit the Run Button and get the output in the simulator

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 49

iOS App using Alert control
import UIKit
class ViewController:UIViewController
{
override func viewDidLoad()
{
[Link]()
}
@IBAction func alertButton(_sender:UIButton)
{
let alertController=UIAlertController(title: "Welcome to my First App", message:"Hello
World",preferredStyle:[Link])
[Link](UIAlertAction(title:"ok",style:[Link],handler:nil
))
present(alertController,animated:true,completion:nil)
}
}

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 50

iOS App using Alert control

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 51

 What is Scroll View?
When to use Scroll View ?
🡪 In iOS, the scroll view is used to show the content which is larger than
the scroll view boundaries like viewing larger content in documents,
showing multiple images in the app
🡪 In iOS application whenever we see the scroll view it is an indication that
there is extra content other than the visible area
🡪 By default, the scroll view has no appearance but whenever we interact
with the app by tapping or touching the scroll view will appear to show
extra content
🡪 Use Scroll View in iOS applications by adding UIScrollView class
reference

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 52

 iOS Scroll View App in Swift Step1

▪Click on Xcode
▪In welcome window click on the
second option “Create a new Xcode
Project”

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 53

 iOS Scroll View App in Swift Step 2

For this iOS example, we will use most basic template “Single View Application”

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 54

 iOS Scroll View App in Swift Step 3

Once click on Next button new dialog will open in that we need to select the location to
save our project. Once you select the location to save project then click on Create button

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 55

iOS Scroll View App in Swift Step 4

After click on Create button the Xcode will create and open a new project.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 56

 iOS Scroll View App in Swift Step 5

By default, project structure will be like as shown below

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 57

 iOS Scroll View App in Swift Step 6

[Link] and [Link]

are the main files used to design app user
interface and to maintain source code.
[Link] - Its visual interface editor
and use this file to design our app user
interface
[Link] - It contains source
code of our application and use this file to
write any code related to our app.
Now in project select [Link] file
the Xcode will open visual interface editor

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 58

Add iOS UI Control to View Step 8

Add controls to the application from Object Library

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 59

Add iOS UI Control to View Step 9

Open [Link] file, then in Object library search for Scroll View in Filter
field then drag and drop Scroll View into [Link] ViewController and in the
same way add Button control in our [Link] file.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 60

Add iOS UI Control to View Step 10

Now drag button from Object library and drop into the ViewController file after that click
on button and change the name “Hello Scroll”

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 61

Connect iOS UI Control to code in Swift
Make connection between controls and [Link] code for that click on
the assistant button (overlap circle) in Xcode toolbar right side corner

Step 11

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 62

Connect iOS UI Control to code in Swift
To map the controls, press the Ctrl button in keyboard and drag the Scroll View from the
canvas interface and drop it into [Link]

Step 12

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 63

Swift Code
Step 13

Once we add controls to [Link] file then write the custom code to show scroll by changing
content size
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var scrollView: UIScrollView!
override func viewDidLoad() {
[Link]()
[Link]=1000
}
override func didReceiveMemoryWarning() {
[Link]()
// Dispose of any resources that can be recreated.
}
}

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 64

 Step 14

Output of iOS Scroll View App in Swift

To run application, select the required simulator (Here we selected iPhone 6s Plus) and
click on Play button, located at the top-left corner of the Xcode toolbar

iOS UI scroll view is used in Swift to show the larger

content which is more than scroll view boundaries

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 65

 iOS TableView App in Swift Step1

TableView can be defined as the view

which can arrange the data using rows in a
single column. It is used in almost every
iOS application, for example, contacts,
facebook, Instagram, etc. The tableview is
the instance of the UITableView class,
which inherits the UIScrollView class

▪Click on Xcode
▪In welcome window click on the
second option “Create a new Xcode
Project”

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 66

 iOS TableView App in Swift Step 2

For this iOS example, we will use most basic template “Single View Application”

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 67

 iOS TableView App in Swift Step 3

Once click on Next button new dialog will open in that we need to select the location to
save our project. Once you select the location to save project then click on Create button

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 68

iOS TableView App in Swift Step 4

After click on Create button the Xcode will create and open a new project.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 69

 iOS TableView App in Swift Step 5

By default, project structure will be like as shown below

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 70

 iOS TableView App in Swift Step 6

[Link] and [Link]

are the main files used to design app user
interface and to maintain source code.
[Link] - Its visual interface editor
and use this file to design our app user
interface
[Link] - It contains source
code of our application and use this file to
write any code related to our app.
Now in project select [Link] file
the Xcode will open visual interface editor

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 71

 iOS TableView App in Swift Step 7

Now select [Link] file in the project

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 72

iOS TableView App in Swift Step 8

Add controls to the application from Object Library

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 73

iOS TableView App in Swift Step 9

Open [Link] file, then in Object library search for table view in Filter
field then drag and drop the table view into [Link] ViewController

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 74

Add iOS UI Control to View Step 10

click on table view and see that in Prototype cells the textbox is zero give it here “1”
and style should be “Grouped”

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 75

 Step 11

Connect iOS UI Control to code in Swift

Make connection between Table View and View Controller for that click on
the yellow button and drag the cursor from yellow button and drop it on data
source and you should do the same process for connecting delegate

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 76

 Step 12

Connect iOS UI Control to code in Swift

Now we will add images to our assets folder for that select the
images drag and drop into the left side assets folder in our
application

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 77

 Step 13

Add iOS UI Control to View

Now move to [Link] file and drag the label and image view and drop into the
table View cell

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 78

Add iOS UI Control to View
Add new file in our ios tableview applications for that go to the File 🡪 click on New 🡪 click
on file button

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 79

iOS TableView App in Swift
Once we click File new templates section will open in that choose the “Cocoa Touch Class”
and then click on the next button

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 80

iOS TableView App in Swift
Give the class name and extend with subclass “UITableViewCell” and set the
language swift the purpose of creating this class is to make our own cell to show the image
on top that we drag and drop the label and image view

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 81

iOS TableView App in Swift
Now click on the cell and assign the class which we created and remember that the name
of the class should be the same otherwise our label and image view will not connect with
the class

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 82

Connect iOS UI Control to View
Now we will make connection between controls and [Link] code for that
click on the assistant button (overlap circle) in Xcode toolbar right side corner

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 83

Connect iOS UI Control to View
To map the controls, press the Ctrl button in keyboard and drag the Image View from
canvas interface and drop into TableTableViewCell file same way map label control

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 84

iOS TableView App in Swift
Now click on the cell and give its identifier name as a cell. Here you are not restricted to
give name as “cell” if you want give your own name also based on your requirements

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 85

 Step 13

Swift Code
For the implementation of Table View move to the [Link] file first add the
two classes which
is UITABLEVIEWDATASOURCE and UITABLEVIEWDELEGATE make an array with
name devCourses using let keyword which will show in the table view. let keyword is
basically the constant keyword it mean that the value can’t be changed after the
declaration and the second array devCousesImages is for images and it contains the
name of the image which is in assets folder
class ViewController: UIViewController,UITableViewDataSource,UITableVie
wDelegate {
let devCourses =
[("Laravel"),("Swift"),("Apple"),("Window"),("Android")]
let devCousesImages =
[UIImage(named: "Laravel"), UIImage(named: "swift"), UIImage(named: "La
ravel"), UIImage(named: "window"), UIImage(named: "Android")]

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 86

Swift Code
Our task is to show the data in table view for that we have three methods that are
mandatory to implement in Table View
The first method is “numberOfSectionsInTableView” by using this method we can return a
number of sections required in our applications. Present we need only one section so we
are returning only 1.
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
The second method is “tableView” here we need to define number of row sections

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 87

Swift Code
In case If we want to show only five rows in table view then we need to mention it as
“return 5” otherwise if we want to show all the rows present in the array then we need to
mention array name with count method like as mentioned below.
func tableView(tableView: UITableView, numberOfRowsInSection
section: Int) -> Int {
return [Link]
}
Now the third method is “tableView” with “cellForRowAtIndexPath” basically this is the
method where we assign array data to label in our Table View cells

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 88

Swift Code
func tableView(tableView: UITableView, cellForRowAtIndexPath
indexPath: NSIndexPath) -> UITableViewCell {
let cell=[Link]("cell",
forIndexPath: indexPath) as! TableTableViewCell
let courseTitle = devCourses[indexPath .row]
let Images = devCousesImages[indexPath .row]
[Link]=courseTitle
[Link]=Images
return cell
}

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 89

 Step 14

Output of iOS Table View App in Swift

To run application, select the required simulator (Here we selected iPhone 6s Plus) and
click on Play button, located at the top-left corner of the Xcode toolbar

iOS Table View custom cell with images application

showing table view data with images as a single-column list
with multiple row sections.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 90

TableViewController and TableViewCell
UITableViewController
A view controller that specializes in managing a table view
UITableViewCell
The visual representation of a single row in a table view

Refer Lab Program

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 91

 What is CollectionView?
🡪 UICollectionView is similar to UITableView except the fact that it’s more customizable
🡪 The main difference between a UICollectionView and a UITableView is that a
UICollectionView can display more than one column and it supports horizontal
scrolling
🡪 Photos App

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 92

 UICollectionView components

UICollectionView consists of the following major components.

[Link] : Just like UITableViewCells, these cells are the subviews of the
UICollectionView. Our content is displayed in these cells only. The cells are dequeued as
the user leaves the screen
[Link] Views : It consists of other important components such as labels, section
headers and footers that are used to define and divide the content area

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 93

UICollectionViewDatasource
UICollectionViewDataSource
The methods adopted by the object is used to manage data and provide cells for a
collection view Methods

func collectionView(UICollectionView, numberOfItemsInSection: Int) -> Int

Asks your data source object for the number of items in the specified section

func numberOfSections(in: UICollectionView) -> Int

Asks your data source object for the number of sections in the collection view

func collectionView(UICollectionView, cellForItemAt: IndexPath) -> UICollectionViewCell

Asks your data source object for the cell that corresponds to the specified item in the collection
view

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 94

UICollectionView Delegate methods
UICollectionViewDelegate
The methods adopted by the object is used to manage user interactions with items in a
collection view. A collection view delegate manages user interactions with the collection
view's contents, including item selection, highlighting, and performing actions on
those items. The methods of this protocol are all optional
UICollectionViewDelegateFlowLayout
The methods that let you coordinate with a flow layout object to implement a grid-based
layout. The methods of this protocol define the size of items and the spacing between items in
the grid.
func collectionView(UICollectionView, layout: UICollectionViewLayout,
minimumLineSpacingForSectionAt: Int) -> CGFloat
Asks the delegate for the spacing between successive rows or columns of a section.
func collectionView(UICollectionView, layout: UICollectionViewLayout,
minimumInteritemSpacingForSectionAt: Int) -> CGFloat
Asks the delegate for the spacing between successive items in the rows or columns of a section.

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 95

UICollectionViewController
UICollectionViewController
A view controller that specializes in managing a collection view
Declaration
class UICollectionViewController : UIViewController

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 96

 UICollectionViewCell
UICollectionViewCell
A single data item when that item is within the collection view’s visible bounds
class UICollectionReusableView
A view that defines the behavior for all cells and supplementary views presented by a
collection view

dequeueReusableCellWithReuseIdentifier:forIndexPath:
Dequeues a reusable cell object located by its identifier

Refer Lab program for CollectionView

29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 97

T h a n k Yo u
29-12-2025 IOS DEVELOPMENT USING SWIFT - P.V. KAVITHA 98