Are you developing a new app for iOS7? If you are, you may want to consider using some of the new techniques that other apps are using to make it feel like a true iOS7 feeling app. If you’ve used the new Yahoo! Weather app you will have seen a nice blur light effect that they use as you scroll down the view. It’s a nice effect that makes the app look very polished.
CoreBackground is a set of Objective-C classes inspired by the iOS Yahoo Weather App. It provides iOS location-based Flickr backgrounds with Gaussian blur light effects for iPhone. As one scrolls over the foreground a Gaussian blur light effect is applied to the background. This provides for an engaging location-based UX while at the same time providing a canvas to apply readable content to the foreground. CoreBackground is a non-blocking “event-based” Objective-C block API and all rendering occurs in backing stores to preserve the main run loop. Make it be the foundation of your next iOS project today.
Setting up CoreBackground
Follow the steps below to get started:1. Visit the GitHub page here:https://github.com/justinmfischer/core-background.
2. Pull or download the latest version of the source code.
3. Add the following required frameworks into your project:
– Accelerate.framework
– CoreLocation.framework
– CFNetwork.framework
– SystemConfiguration.framework
4. Start coding!
CoreBackground is comprised of 3 main Objective-C singleton managers all within the CBG header file (CBG.h).
- CBGLocationManager : Provides cacheable location-based information.
- CBGFlickrManager : Provides cacheable Flickr API content.
- CBGStockPhotoManager : Provides local image content in case of reachability issues.
Prior to using CoreBackground a valid Flickr API key and shared secret is required. The sample project will successfully build (LLVM – Warning) without this information but will fall back to stock photos. The Flickr API key and shared secret can be obtained here. As of this writing Flickr restricts free (Non-Commercial) accounts to 3600 request per hour. Please make the following modifications below.
(CBGConstants.h) //Flickr Auth #define OBJECTIVE_FLICKR_API_KEY @"Ch@ngeMe" #define OBJECTIVE_FLICKR_API_SHARED_SECRET @"Ch@ngeMe"
The constants file also contains a value to provide searchable Flickr photo tags. The sample project uses “bike” and will match any comma separated values. Example: “bike,ride,outdoor”
//Flickr Search #define KFlickrSsearchTags @"bike"
Code: Sample Project
The CoreBackground sample project demonstrates how these Objective-C classes can be used to achieve location-based background content to drive discoverability and local engagement.
While one could subclass UIViewController to provide higher orders of abstraction CoreBackground was specifically designed to be loosely coupled and not bound to a particular view hierarchy. This design pattern encourages community modifications and higher adoption rates.
ViewController.m
- (void) viewDidLoad {
[super viewDidLoad];
//ScrollView content size
if([CBGUtil is4InchIphone]) {
self.scrollView.contentSize = CGSizeMake(320, 720);
} else {
self.scrollView.contentSize = CGSizeMake(320, 580);
}
//Initial stock photos from bundle
[[CBGStockPhotoManager sharedManager] randomStockPhoto:^(CBGPhotos * photos) {
[self crossDissolvePhotos:photos withTitle:@""];
}];
//Retrieve location and content from Flickr
[self retrieveLocationAndUpdateBackgroundPhoto];
//Schedule updates
self.timer = [NSTimer scheduledTimerWithTimeInterval:kTimerIntervalInSeconds target:self selector:@selector(retrieveLocationAndUpdateBackgroundPhoto)userInfo:nil repeats:YES];
}
- (void) retrieveLocationAndUpdateBackgroundPhoto {
//Location
[[CBGLocationManager sharedManager] locationRequest:^(CLLocation * location, NSError * error) {
[self.activityIndicator startAnimating];
if(!error) {
//Flickr
[[CBGFlickrManager sharedManager] randomPhotoRequest:^(FlickrRequestInfo * flickrRequestInfo, NSError * error) {
if(!error) {
self.userPhotoWebPageURL = flickrRequestInfo.userPhotoWebPageURL;
[self crossDissolvePhotos:flickrRequestInfo.photos withTitle:flickrRequestInfo.userInfo];
[self.activityIndicator stopAnimating];
} else {
//Error : Stock photos
[[CBGStockPhotoManager sharedManager] randomStockPhoto:^(CBGPhotos * photos) {
[self crossDissolvePhotos:photos withTitle:@""];
}];
[self.activityIndicator stopAnimating];
NSLog(@"Flickr: %@", error.description);
}
}];
} else {
//Error : Stock photos
[[CBGStockPhotoManager sharedManager] randomStockPhoto:^(CBGPhotos * photos) {
[self crossDissolvePhotos:photos withTitle:@""];
}];
[self.activityIndicator stopAnimating];
NSLog(@"Location: %@", error.description);
}
}];
}
- (void) crossDissolvePhotos:(CBGPhotos *) photos withTitle:(NSString *) title {
[UIView transitionWithView:self.backgroundPhoto duration:1.0f options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.backgroundPhoto.image = photos.photo;
self.backgroundPhotoWithImageEffects.image = photos.photoWithEffects;
self.photoUserInfoBarButton.title = title;
} completion:NULL];
}
- (IBAction) launchFlickrUserPhotoWebPage:(id) sender {
if([self.photoUserInfoBarButton.title length] > 0) {
[[UIApplication sharedApplication] openURL:self.userPhotoWebPageURL];
}
}
- (void) scrollViewDidScroll:(UIScrollView *) scrollView {
if(scrollView.contentOffset.y >= 0 && scrollView.contentOffset.y <= 80.0) {
float percent = (scrollView.contentOffset.y / 80.0);
self.backgroundPhotoWithImageEffects.alpha = percent;
} else if (scrollView.contentOffset.y > 80.0){
self.backgroundPhotoWithImageEffects.alpha = 1;
} else if (scrollView.contentOffset.y < 0) {
self.backgroundPhotoWithImageEffects.alpha = 0;
}
}
