Categories
iOS & ObjectiveC Iphone Developer Technological

iOS7 Custom Transitions

iOS7 Custom Transitions
iOS7 Custom Transitions

iOS7 Series –Custom Transitions

There is a hierarchy of actors you need to visualize here.  It goes a little something like:

  1. A TransitioningDelegate
  2. An AnimatedTransitioning
  3. A ContextTransitioning

The VC you start out with and that will call the transition will adopt the first protocol, the TransitioningDelegate Protocol.  The purpose of doing so is to obtain the authority to manage the entire transition process.

You will then create a Transitioning class which we can call the Transition Manager.  This class will adopt the AnimatedTransitioning protocol.  The purpose of this protocol is to animate the transition.

The Transition Manager class receives all the necessary information from the Transitioning Context (a protocol adopted by a class you wont really see) and it sends that info to the TransitioningDelegate in order for it to call the shots.

The process itself is quite simple.  We create a Transition Manager class, which adopts the AnimatedTransitioning protocol as stated above.  Then we instantiate this class and call its methods from our initial view controller, who has adopted the TransitioningDelegate protocol in order to call the shots.  Voila, our VC calls the transition for us.

So create a subclass of NSObject and call it what you wish, I called it PinRotatingTransitionManager.  Of course make it adopt the AnimatedTransitioning protocol like so:

<UIViewControllerAnimatedTransitioning>

There are 2 methods you must implement in order to adopt this protocol.  The first one is:

//Define the transition duration

-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{

return 1.0;

}

As you can see this simply states how long the transition will last.  It returns a value of type NSTimeInterval and takes in the transition context.

The second method is for describing the animation and it’s a bit long so let’s go one step at a time:

//1. Get current state

UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

CGRect sourceRect = [transitionContext initialFrameForViewController:fromVC];

First we get some values for the current state; who is our fromVC, who is our toVC and what is the relevant frame of our current, fromVC.  Remember we are transitioning between two vcs.  The one we are in is called the fromVC or initialVC or if you prefer to keep the original iOS lingo, our sourceVC.  The second one is called our toVC or finalVC or destinationVC.

We need to get a reference to both of them (basically to say THIS vc will do this and THAT vc will do that!).  And of course we need to know the frame we are starting from.

//2.Settings for the fromVC ……………………….

CGAffineTransform rotation;

rotation = CGAffineTransformMakeRotation(M_PI);

fromVC.view.frame = sourceRect;

fromVC.view.layer.anchorPoint = CGPointMake(0.5, 0.0);

fromVC.view.layer.position = CGPointMake(160.0, 0);

We create a rotation transform which will rotate anything by M_PI.  Then we set our fromVC frame to the sourceRect, we define an anchor point for it and a position for it.

//3.Insert the toVC view………………………

UIView *container = [transitionContext containerView];

[container insertSubview:toVC.view belowSubview:fromVC.view];

CGPoint final_toVC_Center = toVC.view.center;

Now we need to do something quite important…get a container view to put everything into in order to run the transition.  To that container view we must add the toVC, because the fromVC is already added for us.

//4.Insert the toVC view………………………

toVC.view.center = CGPointMake(-sourceRect.size.width, sourceRect.size.height);

toVC.view.transform = CGAffineTransformMakeRotation(M_PI/2);

Now we set the toVC’s center point and apply the transform created.

And finally we perform the animation:

//5. Animate..

[UIView animateWithDuration:1.0

delay:0.0

usingSpringWithDamping:.8

initialSpringVelocity:6.0

options:UIViewAnimationOptionCurveEaseIn

animations:^{

//Setup final params of the views

fromVC.view.transform = rotation;

toVC.view.center = final_toVC_Center;

toVC.view.transform = CGAffineTransformMakeRotation(0);

} completion:^(BOOL finished) {

//When done call completeTransition

[transitionContext completeTransition:YES];

}];

This is quite simple.  We define some parameters for the animation and call a block which applies the rotation and center etc.  Once complete we call completeTransition which is mandatory.

Now run your app and you should have a very nice transition where the fromVC slides left and the toVC rotates down into place.

 

Neat huh!

Categories
iOS & ObjectiveC Iphone Developer

Fetching data from an iOS app – The new NSURLSession API

NSURLSession vs NSURLConnection by Santiapps.com Marcio Valenzuela
NSURLSession vs NSURLConnection by Santiapps.com Marcio Valenzuela

Ok, this is gonna be short, I promise! 🙂

Do you remember those apps you’ve got stored away or the ones you are working on that fetch data from the web with a NSURLConnection? Time to update them, here’s how.

Basically you have a method that calls a web fetch and is somehow signaled to use that received data to refresh a UI. If you used NSURLConnection sendAsynchronousRequest:, you have the issue that it blocks the main thread. It does carry out requests asynchronously from each other, but each request does indeed block the main thread since it is carried out in the main queue. Alternatively, you can use a long brittle bunch of API’s named NSURLConnection initWithRequest: with a set of delegate callbacks. Instead, take a look at this.

If you have:

-(void)fetchDataFromWeb{
//1. LOAD DATA FROM WEB
NSURL *stringURL = [NSURL URLWithString:@"http://www.yourserver.com/appfolder/somewebserviceURL.php"];
NSURLRequest *myRequest = [NSURLRequest requestWithURL:stringURL];
[NSURLConnection sendAsynchronousRequest:myRequest queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {

//Once data is got, load local object & fire reloadData
jsonArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];

//UPDATE CURRENT VIEW FIRST
[self setData];

}];
}

Replace with:

-(void)fetchDataFromWeb{
//1. LOAD DATA FROM WEB
NSURLSession *session = [NSURLSession sharedSession];
[[session dataTaskWithURL:[NSURL URLWithString:@"http://www.yourserver.com/appfolder/somewebserviceURL.php"]
completionHandler:^(NSData *data, NSURLResponse *response,
NSError *error) {
// handle response
//Once data is got, load local object & fire reloadData
jsonArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];

//UPDATE CURRENT VIEW FIRST
[self setData];

}] resume];
}

The most important thing to note here, is perhaps an little noticed piece of code in NSURLConnection, queue:[NSOperationQueue mainQueue].

You see, other than that, the both pieces of code do pretty much the same thing. They fetch data. NSURLConnection fetches data but it will block your main thread. This means that if you call the fetch, your app will stop or hand until the NSURLResponse is received.

You could go this route:

1. Adopt the delegate:
& create a data container NSMutableData *_responseData;

2. Call your web fetch:
// Create the request.
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.yourserver.com/appfolder/somewebserviceURL.php"]];

// Create url connection and fire request
NSURLConnection *conn = [[NSURLConnection alloc] initWithRequest:request delegate:self];

3. Get your data from the callbacks:
- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
// A response has been received, this is where we initialize the instance var you created
// so that we can append data to it in the didReceiveData method
// Furthermore, this method is called each time there is a redirect so reinitializing it
// also serves to clear it
_responseData = [[NSMutableData alloc] init];
}

– (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
// Append the new data to the instance variable you declared
[_responseData appendData:data];
}

– (NSCachedURLResponse *)connection:(NSURLConnection *)connection
willCacheResponse:(NSCachedURLResponse*)cachedResponse {
// Return nil to indicate not necessary to store a cached response for this connection
return nil;
}

– (void)connectionDidFinishLoading:(NSURLConnection *)connection {
// The request is complete and data has been received
// You can parse the stuff in your instance variable now
jsonArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];
//UPDATE CURRENT VIEW FIRST
[self setData];
}

– (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {
// The request has failed for some reason!
}

That’s a BIG block of code! And it can get tedious & brittle to maintain.

NSURLSession automatically calls the web fetch in a background thread so as to not block your main thread. How cool is that? 🙂 Enjoy!

Categories
iOS & ObjectiveC Iphone Developer Technological

iOS7 – UIKit Dynamics

iOS7 Series – UIKit Dynamics

 

Incorporating UIKitDynamics into your app is pretty simple!  The great thing about it is that you really get the most bang for your buck because the end result has a really big WOW Factor which is certain to impress your users.  Let’s take a quick conceptual drive around UIKitDynamics.

First we adopt the protocol into the ViewController which will implement UIKitDynamics, why?  Well because the objects which will be animated in the end will have to send back a lot of signals like “Hey, I collided with a boundary” or “hey I just hit somebody else and I was going this fast, in this direction”.  In order to receive these messages we use a delegate and its callbacks.

@interface … <UICollisionBehaviorDelegate>

We would need to create the view to animate and the property to reference a UIDynamicAnimator, which is the object in charge of handling animations in UIKitDynamics.

@property (nonatomic, weak) IBOutlet UIView *square1;

@property (nonatomic) UIDynamicAnimator* animator;

Basically we would prep all we need in viewDidLoad, such as instantiating an animator to call the shots inside a particular reference view.  Then we create a behavior or set of behaviors we wish to assign to our animatable view.  We define boundaries so we can keep our objects inside a view.  Finally we add the behaviors to the animator and set the viewcontroller as the delegate as well as set that animator object to our property in order to hold a reference to it.

That’s it!  Now we just sit back and get messages from the animator and the animated view via the callbacks.

– (void)viewDidLoad{

[super viewDidLoad];

UIDynamicAnimator* animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

UIGravityBehavior* gravityBeahvior = [[UIGravityBehavior alloc] initWithItems:@[self.square1]];

UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[self.square1]];

collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;

[animator addBehavior:gravityBeahvior];

[animator addBehavior:collisionBehavior];

collisionBehavior.collisionDelegate = self;

self.animator = animator;

}

-(void)collisionBehavior:(UICollisionBehavior *)behavior beganContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier atPoint:(CGPoint)p{

// Lighten the background color when the view is in contact with a boundary.

[(UIView*)item setBackgroundColor:[UIColor lightGrayColor]];

}

-(void)collisionBehavior:(UICollisionBehavior *)behavior endedContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier{

// Restore the default color when ending a contcact.

[(UIView*)item setBackgroundColor:[UIColor grayColor]];

}

Ok so let’s use it in a simple example.  Let’s say we are building a Restaurant rating app.  It’s a single view app with a plain vanilla UIViewController which has these properties connected to those outlets:

@property (nonatomic, strong) IBOutlet UILabel *restaurantName;

@property (nonatomic, strong) IBOutlet UILabel *restaurantAddress;

//STAR RATING

@property (nonatomic, strong) IBOutlet UIImageView *stars1;

@property (nonatomic, strong) IBOutlet UIImageView *stars2;

@property (nonatomic, strong) IBOutlet UIImageView *stars3;

@property (nonatomic, strong) IBOutlet UIImageView *stars4;

@property (nonatomic, strong) IBOutlet UIImageView *stars5;

 

First let’s create the animator that will handle the animation inside our viewDidLoad:

// Create animator

UIDynamicAnimator* animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

Now we add the views we want to animate to the behaviors we want to implement:

//Create behaviors

    UIGravityBehavior* gravityBeahvior = [[UIGravityBehavior alloc] initWithItems:@[self.stars1,self.stars2, self.stars3, self.stars4,self.stars5]];

UICollisionBehavior* collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[self.stars1,self.stars2, self.stars3, self.stars4,self.stars5]];

UIDynamicItemBehavior* propertiesBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.stars1,self.stars2, self.stars3, self.stars4,self.stars5]];

propertiesBehavior.elasticity = 5;

Notice that the last behavior is actually created to modify certain physical properties of an object, in this case elasticity.  There are other properties we can modify in this manner.

We can also add specific boundaries but in many cases we will want to simply use the view’s edges as the natural boundaries, so we use this line:

    collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;

Finally we add the behaviors to the animator, set the delegate to self and reference our animator through its property:

[animator addBehavior:gravityBeahvior];

[animator addBehavior:collisionBehavior];

collisionBehavior.collisionDelegate = self;

self.animator = animator;

Finally just add the following delegate callbacks to decide what gets done when a collision occurs:

-(void)collisionBehavior:(UICollisionBehavior *)behavior beganContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier atPoint:(CGPoint)p{

// Lighten the background color when the view is in contact with a boundary.

[(UIView*)item setBackgroundColor:[UIColor lightGrayColor]];

}

-(void)collisionBehavior:(UICollisionBehavior *)behavior endedContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier{

// Restore the default color when ending a contcact.

[(UIView*)item setBackgroundColor:[UIColor grayColor]];

}

That’s it!  There are lots of neat effects you can use but don’t overdo it or your users will sue you for giving them vertigo! J