Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Beautiful viewController with a tableView and amazing effects like a viewController in the Spotify app. With MGSpotyViewController you can implement several layouts like these:

MGSpotyViewController Gif

MGSpotyViewController Gif

MGSpotyViewController Gif


This code must be used under ARC. If your code doesn't use ARC you can mark this source with the compiler flag -fobjc-arc

Example Usage

In the package is included an example to use this class.

The best thing to do, is to extend the MGSpotyViewController. In the package see the class MGViewController.{h,m} as example.

Here the explanation:

Init is easy. You have just to pass the main image for the blur effect:

MGViewController *spotyViewController = [[MGViewController alloc] initWithMainImage:[UIImage imageNamed:@"example"]];

MGViewController extends MGSpotyViewController:

//  MGViewController.h
//  MGSpotyView
//  Created by Matteo Gobbi on 25/06/2014.
//  Copyright (c) 2014 Matteo Gobbi. All rights reserved.

#import "MGSpotyViewController.h"

@interface MGViewController : MGSpotyViewController


Set the delegate and the datasource of the MGSpotyViewController:

- (instancetype)init
    if (self = [super init]) {
        self.dataSource = myDataSource; //Or self
        self.delegate = myDelegate; //Or self
    return self;

In the implementation file, first of all you should set the overView. The overView is basically the header view which remains over the blur image:

- (void)viewDidLoad {
    [self setOverView:self.myOverView];

//This is just an example view created by code, but you can return any type of view.
- (UIView *)myOverView {
    UIView *view = [[UIView alloc] initWithFrame:self.overView.bounds];

    //Add an example imageView
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(,, 100.0, 100.0)];
    [imageView setContentMode:UIViewContentModeScaleAspectFill];
    [imageView setClipsToBounds:YES];
    [imageView setImage:[UIImage imageNamed:@"example"]];
    [imageView.layer setBorderColor:[UIColor whiteColor].CGColor];
    [imageView.layer setBorderWidth:2.0];
    [imageView.layer setCornerRadius:imageView.frame.size.width/2.0];

    //Add an example label
    UILabel *lblTitle = [[UILabel alloc] initWithFrame:CGRectMake(,, 240.0, 50.0)];
    [lblTitle setText:@"Name Surname"];
    [lblTitle setFont:[UIFont boldSystemFontOfSize:25.0]];
    [lblTitle setTextAlignment:NSTextAlignmentCenter];
    [lblTitle setTextColor:[UIColor whiteColor]];

    [view addSubview:imageView];
    [view addSubview:lblTitle];

    return view;

Another thing to configure is the tableView. The tableView is already in the MGSpotyViewController, you have just to set the MGSpotyViewControllerDataSource and MGSpotyViewControllerDelegate and use their methods.

You must remember that the section 0 is reserved, so even if you will return 1 section, your delegate will get called for section number 1, not 0. Basically for sections the counter doesn't start from 0 but from 1:

#pragma mark - MGSpotyViewControllerDataSource

- (NSInteger)numberOfSectionsInSpotyViewController:(MGSpotyViewController *)spotyViewController
    return 1;

- (NSInteger)spotyViewController:(MGSpotyViewController *)spotyViewController
  return 20;

- (UITableViewCell *)spotyViewController:(MGSpotyViewController *)spotyViewController
                               tableView:(UITableView *)tableView
                   cellForRowAtIndexPath:(NSIndexPath *)indexPath
  // IndexPath is 1-1, 1-2, 1-3 etc.
  UITableViewCell *cell = // Your cell initialisation

  return cell;

And, if you need to manage sections header title or sections header view:

#pragma mark - MGSpotyViewControllerDelegate

- (CGFloat)spotyViewController:(MGSpotyViewController *)spotyViewController
  return 20.0;

- (NSString *)spotyViewController:(MGSpotyViewController *)spotyViewController
  return @"My Section";


There are a bunch of properties you can play with to get the best result for your needs:

 *  The tint color on top of the blur. When alpha is 1.0 
 *  you'll not be able to see the image behind.
@property (nonatomic, strong) UIColor *tintColor;

 *  Indicate if the overView has to fade out when scrolling up
 *  Default value: NO
@property (atomic) BOOL overViewFadeOut;

 *  Indicate if the main image has to get unblurred when scrolling down
 *  Default value: YES
@property (atomic) BOOL shouldUnblur;

 *  Indicate if the overView height is resized automatically when the
 *  device is rotated (ie when the height of the interface change)
 *  Default value: YES
@property (atomic) BOOL flexibleOverviewHeight;

 *  Set the value of the blur radius.
 *  Default value: 20.0
@property (nonatomic) CGFloat blurRadius;

And also an initialiser which takes in input a scrolling type which are essentially the 2 kinds of scrolling you see in the previous examples:

- (instancetype)initWithMainImage:(UIImage *)image tableScrollingType:(MGSpotyViewTableScrollingType)scrollingType;


Matteo Gobbi


MGSpotyViewController is available under the MIT license.


Beautiful viewController with a tableView and amazing effects like a viewController in the Spotify app.







No packages published

Contributors 4