Awesome

MGSpotyViewController

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

Info

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 <b>to extend</b> 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


@end

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 <b>the header view which remains over the blur image</b>:

- (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(view.center.x-50.0, view.center.y-60.0, 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(view.center.x-120.0, view.center.y+50.0, 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 <b>remember that the section 0 is reserved</b>, 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
       numberOfRowsInSection:(NSInteger)section
{
  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 <b>sections header title</b> or <b>sections header view</b>:

#pragma mark - MGSpotyViewControllerDelegate

- (CGFloat)spotyViewController:(MGSpotyViewController *)spotyViewController
  heightForHeaderInSection:(NSInteger)section
{
  return 20.0;
}

- (NSString *)spotyViewController:(MGSpotyViewController *)spotyViewController
      titleForHeaderInSection:(NSInteger)section
{
  return @"My Section";
}

Customisations

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;

Contact

Matteo Gobbi

• http://www.matteogobbi.it
• http://github.com/matteogobbi
• http://twitter.com/matteo_gobbi
• https://angel.co/matteo-gobbi
• http://www.linkedin.com/profile/view?id=24211474

License

MGSpotyViewController is available under the MIT license.