{"id":13463488,"url":"https://github.com/matteogobbi/MGSpotyViewController","last_synced_at":"2025-03-25T06:32:30.137Z","repository":{"id":56920437,"uuid":"21236222","full_name":"matteogobbi/MGSpotyViewController","owner":"matteogobbi","description":"Beautiful viewController with a tableView and amazing effects like a viewController in the Spotify app.","archived":false,"fork":false,"pushed_at":"2016-03-14T12:22:19.000Z","size":23839,"stargazers_count":1023,"open_issues_count":3,"forks_count":106,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-09-29T23:02:06.717Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matteogobbi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-26T09:59:03.000Z","updated_at":"2024-07-05T05:18:27.000Z","dependencies_parsed_at":"2022-08-20T21:50:31.995Z","dependency_job_id":null,"html_url":"https://github.com/matteogobbi/MGSpotyViewController","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteogobbi%2FMGSpotyViewController","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteogobbi%2FMGSpotyViewController/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteogobbi%2FMGSpotyViewController/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matteogobbi%2FMGSpotyViewController/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matteogobbi","download_url":"https://codeload.github.com/matteogobbi/MGSpotyViewController/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222045615,"owners_count":16921984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T13:00:54.273Z","updated_at":"2024-10-29T12:31:31.440Z","avatar_url":"https://github.com/matteogobbi.png","language":"Objective-C","funding_links":[],"categories":["PullToRefresh","Uncategorized","User Interface"],"sub_categories":["Uncategorized","Mobile"],"readme":"MGSpotyViewController\n=====================\n\nBeautiful viewController with a tableView and amazing effects like a viewController in the Spotify app.\nWith MGSpotyViewController you can implement several layouts like these:\n\n\u003cimg src=\"http://www.matteogobbi.it/files-hosting/MGSpotyViewVideo-smaller.gif\" alt=\"MGSpotyViewController Gif\" width=280 /\u003e\n\u003cimg src=\"https://github.com/matteogobbi/MGSpotyViewController/blob/master/GIFs%20and%20Videos/spotiviewcontroller.gif\" alt=\"MGSpotyViewController Gif\" width=280 /\u003e\n\u003cimg src=\"https://github.com/matteogobbi/MGSpotyViewController/blob/master/GIFs%20and%20Videos/example2.gif\" alt=\"MGSpotyViewController Gif\" width=280 /\u003e\n\n## Info\n\nThis code must be used under ARC.\nIf your code doesn't use ARC you can [mark this source with the compiler flag](http://www.codeography.com/2011/10/10/making-arc-and-non-arc-play-nice.html) `-fobjc-arc`\n\n## Example Usage\n\nIn the package is included an example to use this class.\n\nThe best thing to do, is \u003cb\u003eto extend\u003c/b\u003e the `MGSpotyViewController`.\nIn the package see the class `MGViewController.{h,m}` as example.\n\nHere the explanation:\n\nInit is easy. You have just to pass the main image for the blur effect:\n\n``` objective-c\nMGViewController *spotyViewController = [[MGViewController alloc] initWithMainImage:[UIImage imageNamed:@\"example\"]];\n```\n\n`MGViewController` extends `MGSpotyViewController`:\n\n``` objective-c\n//\n//  MGViewController.h\n//  MGSpotyView\n//\n//  Created by Matteo Gobbi on 25/06/2014.\n//  Copyright (c) 2014 Matteo Gobbi. All rights reserved.\n//\n\n#import \"MGSpotyViewController.h\"\n\n@interface MGViewController : MGSpotyViewController\n\n\n@end\n```\n\nSet the `delegate` and the `datasource` of the `MGSpotyViewController`:\n\n```objective-c\n- (instancetype)init\n{\n    if (self = [super init]) {\n        self.dataSource = myDataSource; //Or self\n        self.delegate = myDelegate; //Or self\n    }\n    \n    return self;\n}\n```\n\nIn the implementation file, first of all you should set the `overView`. The `overView` is basically \u003cb\u003ethe header view which remains over the blur image\u003c/b\u003e:\n\n``` objective-c\n- (void)viewDidLoad {\n    [self setOverView:self.myOverView];\n}\n\n\n//This is just an example view created by code, but you can return any type of view.\n- (UIView *)myOverView {\n    UIView *view = [[UIView alloc] initWithFrame:self.overView.bounds];\n\n    //Add an example imageView\n    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(view.center.x-50.0, view.center.y-60.0, 100.0, 100.0)];\n    [imageView setContentMode:UIViewContentModeScaleAspectFill];\n    [imageView setClipsToBounds:YES];\n    [imageView setImage:[UIImage imageNamed:@\"example\"]];\n    [imageView.layer setBorderColor:[UIColor whiteColor].CGColor];\n    [imageView.layer setBorderWidth:2.0];\n    [imageView.layer setCornerRadius:imageView.frame.size.width/2.0];\n\n    //Add an example label\n    UILabel *lblTitle = [[UILabel alloc] initWithFrame:CGRectMake(view.center.x-120.0, view.center.y+50.0, 240.0, 50.0)];\n    [lblTitle setText:@\"Name Surname\"];\n    [lblTitle setFont:[UIFont boldSystemFontOfSize:25.0]];\n    [lblTitle setTextAlignment:NSTextAlignmentCenter];\n    [lblTitle setTextColor:[UIColor whiteColor]];\n\n\n    [view addSubview:imageView];\n    [view addSubview:lblTitle];\n\n    return view;\n}\n```\n\nAnother 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.\n\nYou must \u003cb\u003eremember that the section 0 is reserved\u003c/b\u003e, 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:\n\n``` objective-c\n#pragma mark - MGSpotyViewControllerDataSource\n\n- (NSInteger)numberOfSectionsInSpotyViewController:(MGSpotyViewController *)spotyViewController\n{\n    return 1;\n}\n\n- (NSInteger)spotyViewController:(MGSpotyViewController *)spotyViewController\n       numberOfRowsInSection:(NSInteger)section\n{\n  return 20;\n}\n\n- (UITableViewCell *)spotyViewController:(MGSpotyViewController *)spotyViewController\n                               tableView:(UITableView *)tableView\n                   cellForRowAtIndexPath:(NSIndexPath *)indexPath\n{\n  // IndexPath is 1-1, 1-2, 1-3 etc.\n  \n  UITableViewCell *cell = // Your cell initialisation\n\n  return cell;\n}\n```\n\nAnd, if you need to manage \u003cb\u003esections header title\u003c/b\u003e or \u003cb\u003esections header view\u003c/b\u003e:\n\n```objective-c\n#pragma mark - MGSpotyViewControllerDelegate\n\n- (CGFloat)spotyViewController:(MGSpotyViewController *)spotyViewController\n  heightForHeaderInSection:(NSInteger)section\n{\n  return 20.0;\n}\n\n- (NSString *)spotyViewController:(MGSpotyViewController *)spotyViewController\n      titleForHeaderInSection:(NSInteger)section\n{\n  return @\"My Section\";\n}\n```\n\n## Customisations\n\nThere are a bunch of properties you can play with to get the best result for your needs:\n\n``` objective-c\n/**\n *  The tint color on top of the blur. When alpha is 1.0 \n *  you'll not be able to see the image behind.\n */\n@property (nonatomic, strong) UIColor *tintColor;\n\n/**\n *  Indicate if the overView has to fade out when scrolling up\n *  Default value: NO\n */\n@property (atomic) BOOL overViewFadeOut;\n\n/**\n *  Indicate if the main image has to get unblurred when scrolling down\n *  Default value: YES\n */\n@property (atomic) BOOL shouldUnblur;\n\n/**\n *  Indicate if the overView height is resized automatically when the\n *  device is rotated (ie when the height of the interface change)\n *  Default value: YES\n */\n@property (atomic) BOOL flexibleOverviewHeight;\n\n/**\n *  Set the value of the blur radius.\n *  Default value: 20.0\n */\n@property (nonatomic) CGFloat blurRadius;\n```\n\nAnd also an initialiser which takes in input a scrolling type which are essentially the 2 kinds of scrolling you see in the previous examples:\n\n```objective-c\n- (instancetype)initWithMainImage:(UIImage *)image tableScrollingType:(MGSpotyViewTableScrollingType)scrollingType;\n```\n\n## Contact\n\nMatteo Gobbi\n\n- http://www.matteogobbi.it\n- http://github.com/matteogobbi\n- http://twitter.com/matteo_gobbi\n- https://angel.co/matteo-gobbi\n- http://www.linkedin.com/profile/view?id=24211474\n\n## License\n\nMGSpotyViewController is available under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteogobbi%2FMGSpotyViewController","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatteogobbi%2FMGSpotyViewController","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatteogobbi%2FMGSpotyViewController/lists"}