Model-View-Controller Pattern in swift ( MVC ) for Beginners

what is the model view controller and how to use it through the App

MVC: is the basic Structural pattern that uses commonly through iOS App, because this pattern that Apple choose to adopt in UIKit . here in this article will cover the basic of using MVC and how to implement this in real world App. let’s get start …

MVC : separates objects into three distinct types ( Model , View , Controller )

model: Hold the Application Data, it is usually struct or class

View: a representation of a user interface (UI) such as ( Button, …., etc)

Controller: coordinates between models and view, which can present model on view through controller and can change the model depend on view (users interaction) through controller, you will get understand soon just keep xD.

• The flow of the message from one object to another,
• It can be happens in 4 Ways:-

1- The View informs the Controller when a user interaction takes place

2- The Controller updates the View when the data changes

3- The Controller updates the Model when the data changes

4- The Model notifies the Controller when data changes

There are Two ways of flow

• From View -> Controller -> Model this happens when the user click on object on the screen
• From model -> controller -> View this happens when the data of the model has been changed and the view needs to update Accordingly

let’s get start to play your hands with a snippet of code to understand

imagine that you create an App that it has static form this form you will add your state, city, street name and zipCode and display in tableView

Create new project with Name CheckAddress

divid the files into groups by right click on CheckAddress yellow folder and right click then choose New Group and move each folder into its group as it shows above

After moving the info.Plist file into Resources folder group you have to tell Xcode about its new location as you show above

1- let’s create Address Model file to save each address, select the model folder and press command+N to create new file then select swift file and click next, then name the file Address

2-The ViewController file, right click on file then press to Delete and choose move to trash then in main.storyboard delete viewController

3- Drag TableView Controller and embed in navigation controller and set it initial view controller

4- Drag another TableView controller and change from dynamic into static then adjust number of sections into 4

5- make a segue from + button into static tableView then choose show and add its identifier “addAddress”

6- Using the main.storyboard to design the interface of App i won’t dive into AutoLayout but if you have any question you can send me through emails which putting under this blog post. the outcome should be like:-

7- let’s create address view cell in view folder like before create new file called AddressViewCell as a subclass of UITableViewCell press command+N then choose from Cocoa touch class then connect it to main.stoyboard

8- connect each label in main.storyboard to addressViewController till the output should be like below

add this point we create model for data and create View for each label then we need to create the coordinator between model and view “AddressViewController”

9- create new file in controller folder so right click on controller group and choose cocoa touch class then do what i did below and click next and create

10- go to main.storyboard and make this class as a subclass of address scene in identity inspector

so at this point we create coordinator between view and model in this object “AddressViewController” it has all the logic between them first one we need to take an instance from model as an array to store the data and present them in view

var addressArray = [Address]()

but before we need to connect the storyboard to controller in dequeueReusableCell(withIdentifier:for) to specify which cell we need to present model

go main.stoyboard and click address view cell in attribute inspector “identifier” write “reuseIdentifier” this means you will reuse this cell to present the model array

so you are ready to write the logic to present model on view via coordinator “AddressViewController”

for testing take an instance form model in viewDidLoad() to present in view and run the App you should see the output like

let addressObject = Address(street: “Abou El-Fotouh Abd Allah”, city: “Cairo”, state: “Egypt”, zipCode: “022”)

addressArray.append(addressObject)

so at this point we take From model -> controller -> View which the model can tell the view there’s something has been changed and you have to display it

i hope to get understand the basic how to interact with MVC pattern it’s the simplest structural pattern

you can download the material from here