Help needed with drawRect: - objective-c

I'm having a fundamental issue with use of drawRect: Any advice would be greatly appreciated.
The application needs to draw a variety of .png images at different times, sometimes with animation, sometimes without.
A design goal that I was hoping to adhere to is to have the code inside drawRect: very simple and "dumb" - i.e. just do drawing and no other application logic.
To draw the image I am using the drawAtPoint: method of UIImage. Since this method does not take a CGContext as a parameter, it can only be called within the drawRect: method. So I have:
- (void)drawRect:(CGRect)rect {
[firstImage drawAtPoint:CGPointMake(firstOffsetX, firstOffsetY)];
}
All fine and dandy for one image. To draw multiple images (over time) the approach I have taken is to maintain an array of dictionaries with each dictionary containing an image, the point location to draw at and a flag to enable/suppress drawing for that image. I add dictionaries to the array over time and trigger drawing via the setNeedsDisplay: method of UIView. Use of an array of dictionaries allows me to completely reconstruct the entire display at any time. drawRect: now becomes:
- (void)drawRect:(CGRect)rect {
for (NSMutableDictionary *imageDict in [self imageDisplayList]) {
if ([[imageDict objectForKey:#"needsDisplay"] boolValue]) {
[[imageDict objectForKey:#"image"] drawAtPoint:[[imageDict objectForKey:#"location"] CGPointValue]];
[imageDict setValue:[NSNumber numberWithBool:NO] forKey:#"needsDisplay"];
}
}
}
Still OK. The code is simple and compact. Animating this is where I run into problems. The first problem is where do I put the animation code? Do I put it in UIView or UIViewController? If in UIView, do I put it in drawRect: or elsewhere? Because the actual animation depends on the overall state of the application, I would need nested switch statements which, if put in drawRect:, would look something like this:
- (void)drawRect:(CGRect)rect {
for (NSMutableDictionary *imageDict in [self imageDisplayList]) {
if ([[imageDict objectForKey:#"needsDisplay"] boolValue]) {
switch ([self currentState]) {
case STATE_1:
switch ([[imageDict objectForKey:#"animationID"] intValue]) {
case ANIMATE_FADE_IN:
[self setAlpha:0.0];
[UIView beginAnimations:[[imageDict objectForKey:#"animationID"] intValue] context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:2];
[self setAlpha:1.0];
break;
case ANIMATE_FADE_OUT:
[self setAlpha:1.0];
[UIView beginAnimations:[[imageDict objectForKey:#"animationID"] intValue] context:nil];
[UIView setAnimationDelegate:self];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:2];
[self setAlpha:0.0];
break;
case ANIMATE_OTHER:
// similar code here
break;
default:
break;
}
break;
case STATE_2:
// similar code here
break;
default:
break;
}
[[imageDict objectForKey:#"image"] drawAtPoint:[[imageDict objectForKey:#"location"] CGPointValue]];
[imageDict setValue:[NSNumber numberWithBool:NO] forKey:#"needsDisplay"];
}
}
[UIView commitAnimations];
}
In addition, to make multiple sequential animations work correctly, there would need to be an outer controlling mechanism involving the animation delegate animationDidStop: callback that would set the needsDisplay entries in the dictionaries to allow/suppress drawing (and animation).
The point that we are at now is that it all starts to look very ugly. More specifically:
drawRect: starts to bloat quickly and contain code that is not "just drawing" code
the UIView needs implicit awareness of the application state
the overall process of drawing is now spread across three methods at a minimum
And on to the point of this post: how can I do this better? What would the experts out there recommend in terms of overall structure? How can I keep application state information out of the view? Am I looking at this problem from the wrong direction. Is there some completely different approach that I should consider?

I'd start off by not re-inventing Core Animation…
Bill Dudney's is probably the best: Core Animation for Mac OS X and the iPhone: Creating Compelling Dynamic User Interfaces

Related

objective-c animations - how to set end position, direction and type

I've seen many examples and read tutorial on animations,
all examples look +- the same like so:
- (void)showAnimation
{
[UIView animateWithDuration:0.3f animations:^{
backgroundView.alpha = 1.0f;
}];
[UIView animateWithDuration:1.0f
delay:0.0f
usingSpringWithDamping:0.4f
initialSpringVelocity:0.0f
options:UIViewAnimationOptionCurveLinear
animations:^{
CATransform3D init = CATransform3DIdentity;
alertView.layer.transform = init;
}
completion:^(BOOL finished) {
if( [self.delegate respondsToSelector:#selector(alertViewDidAppear:)] && finished) {
[self.delegate alertViewDidAppear:self];
}
}];
}
what I'm failing to understand is in the animation block where:
1. I set the beginning position
2. set the end position
3. the direction of movement
4. type of animation (fly-in/ turn/ fade-in/appear etc.)
There is no "starting position". There is no "direction of movement" or "type of animation". Animation is a change over time. The view is a certain way at the time your code runs. UIView animation has 6 possible view properties. You change any of those in the animation block (which states the time) and the change is animated - that is, instead of the change just happening, kaboom, it is performed over the given time.
That's all there is to it (as far as UIView class-method animation is concerned).

Alternative to "self" in calling methods in Objective-C

This may sound really noob, but i've spent an entire day wrestling with this problem and would appreciate some help.
You see i have a method which I call more than once inside gameplay. If I use [self myMethod]; then it works for ONE time. And then when I call it again, the animation in the method doesn't commence anymore.
What I need is to replace "self" with an alternative that can be "alloc'ed" and "released" to make my animations work.
I've tried;
#implementation gameViewController
gameViewController *object = [[gameViewController alloc] init];
[object myMethod];
However the above substitute for self doesn't even call on the method. I don't know what I did wrong, it's suppose to work just like "self".
Is there something i missed? How do you make an object of the class to work just like "self" does?
Thanks so much.
Here is a more detailed look of my code;
[self explosionAnimations];
- (void) explosionAnimations
{
UIImage *image = [UIImage imageNamed: #"Yellow Explosion.png"];
[bomb setImage:image];
[UIView beginAnimations:#"bomb1ExplosionIncrease" context:NULL];
[UIView setAnimationDuration:0.5];
[UIView setAnimationDelegate:self];
bomb.transform = CGAffineTransformMakeScale(3.4, 3.4);
[UIView commitAnimations];
}
The setImage works fine every time. But the animations stop working on the second call of the method. While in the console it logs "animation completed" with nothing happening to the image.
This leads me to believe that somehow "self" believes that the animation was already done and will not bother to do it again. So I thought a new "alloc" might give it a kick awake.
The problem doesn't have anything to do with "self". The problem is that you set the transform in your animation, and then when you run it again, you're setting the same transform, so it does nothing. You need to reset the frame to the new frame and then set the transform back to the identity transform before you do the animation again. Also, you should be using block based animations. I'm not sure this is the best way to do it, but this worked for me (if you have auto layout turned off).
- (void)explosionAnimations {
UIImage *image = [UIImage imageNamed: #"Yellow Explosion.png"];
[self.bomb setImage:image];
[UIView animateWithDuration:.5 animations:^{
self.bomb.transform = CGAffineTransformMakeScale(3.4, 3.4);
} completion:^(BOOL finished) {
CGRect newFrame = self.bomb.frame;
self.bomb.transform = CGAffineTransformIdentity;
self.bomb.frame = newFrame;
}];
}
If you're doing this in an app with auto layout turned on (which it is by default), then I would not use a transform, but just resize the width and height of the image view by adjusting its height and width constraints. So, in this method, you should make IBOutlets to height and width constraints you make in IB, then change their constant values in an animation block:
[UIView animateWithDuration:.5 animations:^{
self.heightCon.constant = self.heightCon.constant * 3.4;
self.widthCon.constant = self.widthCon.constant * 3.4;
[self.view layoutIfNeeded];
}];

Fading UIView allows subviews to be seen

I have a UIScrollView which contains various subviews (UIImageViews, UILabels and standard UIViews). Some of the UIImageViews are partially covered by other UIViews.
However, when I fade out the UIScrollView, the partially covered parts of the UIImageViews are being exposed for the brief moment of the animation.
I want to be able to fade the scrollview and all it's contents at the same time in the same animation - i.e. not revealing any of the partially covered images.
If it's not possible, I can always add a UIView on top of all the other controls and fade it from alpha 0 upto 1 to hide everything, but I'm sure there's a way to perform a complete fade on a view and all it's subviews.
I tried this:
[UIView beginAnimations:nil context:NULL];
[scrollViewResults setAlpha:0.0f];
[UIView commitAnimations];
And I've tried this:
- (IBAction)questionGroupChanged:(UIButton*)sender {
[UIView beginAnimations:nil context:NULL];
[self fadeViewHierarchy:scrollViewResults toAlpha:0.0f];
[UIView commitAnimations];
}
- (void)fadeViewHierarchy:(UIView*)parentView toAlpha:(float)alpha {
[parentView setAlpha:alpha];
for (UIView *subView in parentView.subviews) {
[self fadeViewHierarchy:subView toAlpha:alpha];
}
}
But I've still not cracked it. Any ideas?
This happens because of the way the compositor works. You need to enable rasterization on the view's layer when fading it in/out:
view.layer.shouldRasterize = YES;
You should probably only enable this for the duration of the animation because it will take up some extra memory and graphics processing time.
Mike's answer is the correct one and he deserves all credit for this. Just to illustrate, it might look like:
- (void)fadeView:(UIView*)view toAlpha:(CGFloat)alpha
{
view.layer.shouldRasterize = YES;
[UIView animateWithDuration:0.75
animations:^{
view.alpha = alpha;
}
completion:^(BOOL finished){
view.layer.shouldRasterize = NO;
}];
}
Thus, using your scrollViewResults, it would be invoked as:
[self fadeView:scrollViewResults toAlpha:0.0f];
Did you try with UIView class methods +animateWithDuration:* (available on iOS 4 and +)
Like :
- (void)fadeAllViews
{
[UIView animateWithDuration:2
animations:^{
for (UIView *view in allViewsToFade)
view.alpha = 0.0;
}
completion:^(BOOL finished){}
];
}

Use of beginAnimations discouraged

I was informed recently by meronix that use of beginAnimations is discouraged. Reading through the UIView class reference I see that this is indeed true - according to the Apple class ref:
Use of this method is discouraged in iOS 4.0 and later. You should use
the block-based animation methods to specify your animations instead.
I see that a large number of other methods - which I use frequently - are also "discouraged" which means they'll be around for iOS 6 (hopefully) but probably will be deprecated/removed eventually.
Why are these methods being discouraged?
As a side note, right now I'm using beginAnimations in all sorts of apps, most commonly to move the view up when a keyboard is shown.
//Pushes the view up if one of the table forms is selected for editing
- (void) keyboardDidShow:(NSNotification *)aNotification
{
if ([isRaised boolValue] == NO)
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.25];
self.view.center = CGPointMake(self.view.center.x, self.view.center.y-moveAmount);
[UIView commitAnimations];
isRaised = [NSNumber numberWithBool:YES];
}
}
Not sure how to duplicate this functionality with block-based methods; a tutorial link would be nice.
They are discouraged because there is a better, cleaner alternative
In this case all a block animation does is automatically wrap your animation changes (setCenter: for example) in begin and commit calls so you dont forget. It also provides a completion block, which means you don't have to deal with delegate methods.
Apple's documentation on this is very good but as an example, to do the same animation in block form it would be
[UIView animateWithDuration:0.25 animations:^{
self.view.center = CGPointMake(self.view.center.x, self.view.center.y-moveAmount);
} completion:^(BOOL finished){
}];
Also ray wenderlich has a good post on block animations: link
Another way is to think about a possible implementation of block animations
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
{
[UIView beginAnimations];
[UIView setAnimationDuration:duration];
animations();
[UIView commitAnimations];
}
Check out this method on UIView, which makes it quite simple. The trickiest part nowadays is not allowing a block to have a strong pointer to self:
//Pushes the view up if one of the table forms is selected for editing
- (void) keyboardDidShow:(NSNotification *)aNotification
{
if ([isRaised boolValue] == NO)
{
__block UIView *myView = self.view;
[UIView animateWithDuration:0.25 animations:^(){
myView.center = CGPointMake(self.view.center.x, self.view.center.y-moveAmount);
}];
isRaised = [NSNumber numberWithBool:YES];
}
}

Is there a recommended or even automatic way to move a UITextField into view when editing it?

Having implemented this now in various flavors, I wonder: if editing starts on a UITextField and the keyboard appears, is there a recommended or even automated way that would keep the textfield visible by scrolling it up?
I think it would be easiest and best to scroll up the whole root view. Is there something in the API I've been missing so far, that would save me from writing this code myself?
I sit all my UITextFields on a contentView (In my example I have called this view 'movableView') and then when the user taps one of the text fields
//The hardcoded 10's and 20's are the origin of the view before
//the user starts messing with it!
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
[self scrollViewToTextField:textField];
//Other stuff I want to do here
return YES;
}
- (void)scrollViewToTextField:(id)textField
{
UITextField* tf = (UITextField*)textField;
CGPoint newOffset = tf.frame.origin;
newOffset.x = 10;
newOffset.y = 20 - newOffset.y;
//This is a category method on UIView which simply adjusts the views
//frame over a delay.
[self.movableView moveToX:newOffset.x andY:newOffset.y withDuration:0.3f];
}
When the editing is finished you have to move the view back
-(void)textFieldDidEndEditing:(UITextField *)textField {
[self resetView];
// do other stuff here such as grab the text and stick it in ivars etc.
}
-(void)resetView {
[self.movableView moveToX:10.0f andY:10.0f withDuration:0.3f];
}
Just in case - here is the category method for completeness
// UIView+BasicAnimation.h
-(void) moveToX:(CGFloat) x andY:(CGFloat) y withDuration:(NSTimeInterval) duration;
// UIView+BasicAnimation.m
-(void) moveToX:(CGFloat) x andY:(CGFloat) y withDuration:(NSTimeInterval) duration {
CGRect newFrame = self.frame;
newFrame.origin.x = x;
newFrame.origin.y = y;
[UIView beginAnimations:#"BasicAnimation" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:duration];
self.frame = newFrame;
[UIView commitAnimations];
}
I don't think any such thing exists and it seems like an odd omission. When you consider the existence of iPad split keyboards, it seems even more like something that should be done correctly once and provided in the API.
For a current project, I'm trying out TPKeyboardAvoidingScrollView. (https://github.com/michaeltyson/TPKeyboardAvoiding)
It's common to implement this by using an UIScrollView and modifying the content offset when a field gains firstResponder status.