MVC Design pattern for iOS apps

  • mvc_ios apps

Introduction

Design patterns are simple patterns say like a template which is used to ease the problems related to development. It solves reoccurring problems in software construction. It breaks the code into chunks of code which will collectively full fill one purpose.

What is MVC?

MVC stands for Model-View-Controller. It classifies the objects into three category based on their role and hence separates the code into much cleaner and reusable environment.

The three categories according to their role are :

Model – It deals with the data of application. It holds the data and manipulates it based on request.

View – It is the collection of objects which defines the UI of application with which the user interacts. It basically presents the data hold by model objects.

Controller – It is the communication channel between model and view. It will display the data on view from model and tells the model if any changes in data is requested by view.

In MVC pattern model and view will never interact with each other. Controller will display the model data on view. Model will notify controller if any data changes and controller in turn updates the view. If user interacts with view it will notify the controller either requesting some model data or manipulate the model data.

Importance of MVC

The importance of this architecture is loose coupling between model objects and view objects. We can reuse the same view at different places with different data. No need of writing the same lines of code for same view again and again.

For example suppose we have created an app which will display list of songs and after tapping on any song it will display song’s details. Now the same UI can be used in an app which will display details about movie. Only data is changing, view is same for both the apps. So the view layer of music app can be moved to movie app easily.

How to implement MVC pattern in project ?

We have to create separate files for model, view and controller in our project. 

  1. For creating model create on cocoa touch class and make it subclass of NSObject.
  2. For creating view create cocoa touch class and make it subclass of UIView.

Model will interact with controller using NSNotificationCenter and view will interact with controller using delegation. There is no general rule of communication between controller and model or controller and view, but since we need to instantly tell the controller that some data got changed in model, so we will broadcast this to controller using NSNotificationCenter.

In the below example I will be creating a demo app which will show the list of songs along with its artist.

Let’s start development

  1. Create groups in project directory as follow
  2. Go to new file and select a cocoa touch class which will be subclass of NSObject. This will be model class.
  3. Again go to new files and select a cocoa touch class which will be subclass of UIView.
  4. Come to ViewController.h. There we need to initialise modal class and view class. Import class file of model and view.
  5. Put methods as shown below

Project hierarchy

 

fileHierarchy

 

MVCModel.m

#import "MVCModel.h"

@implementation MVCModel

-(void)getData{
    NSError *error;
    NSURL *URL= [[NSBundle mainBundle] URLForResource:@"File" withExtension:@"json"];
    NSData *data = [NSData dataWithContentsOfURL:URL];
    NSDictionary *objects = (NSDictionary*)[NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];
    [[NSNotificationCenter defaultCenter]postNotificationName:@"MODELDATA" object:nil userInfo:objects];
}

@end


MVCView.h

#import <UIKit/UIKit.h>
#import "MVCTableViewCell.h"

@interface MVCView : UIView <UITableViewDelegate,UITableViewDataSource>
{
    MVCTableViewCell *cell;
}
@property (strong,nonatomic) NSArray *dataArray;
@property (strong, nonatomic)UITableView *tableViewObj;
@property (nonatomic, assign) CGRect frameRect;
@property(strong,nonatomic)UILabel *headerLabel;

-(CGRect)setupTableViewWithArray:(NSArray*)arr referenceRect:(CGRect)rec andHeaderTitle:(NSString*)str;

@end

 

 

MVCView.m

 

ViewController.m

 

 

NOTE : For demo purpose I have created one local JSON file and fetching data from there. So in that fetching method in modal class we just need to replace with web services calling API. Just create an empty file with .json extension and copy the below code there.

Here is File.json

 

 

Summary

As we can se the view class is separate from model class. We can use this view class at multiple places or may be in multiple projects. But also there are some limitations of MVC pattern.

1. It increases the complexity as it divides the code into three layers.

2. There is insufficiency of data access in view layer.

3. But the main disadvantage is one way communication between model and view via controller.

These disadvantages are minimised in one more design pattern i.e. MVVM which we will be discussing in next post.