devedup.com

When you develop forms or any screens with input fields, occasionally the inputs will be obscured by the keyboard when it appears. This is bad usability for the user who now has to input data without being able to see what they have typed! One solution is to slide the whole view so that the field being edited is always visible.

This solution I provide adds a few methods to UIView (yes i know, adding categories to cocoa classes is naughty) – which will determine how much to slide the view based on the inputs position on the whole screen, and then slide the view at the same speed as the keyboard slide entry. It then will slide back to where it was when you are finished editing.

It is pretty simple to do this – here is how I calculate where to scroll the view:

- (void) maintainVisibityOfControl:(UIControl *)control offset:(float)offset {
	static const float deviceHeight = 480;
	static const float keyboardHeight = 216;
	static const float gap = 5; //gap between the top of keyboard and the control

	//Find the controls absolute position in the 320*480 window - it could be nested in other views
	CGPoint absolute = [control.superview convertPoint:control.frame.origin toView:nil];

	//If it would be hidden behind the keyboard....
	if (absolute.y > (keyboardHeight + gap)) {
		//Shift the view
		float shiftBy = (deviceHeight - absolute.y) - (deviceHeight - keyboardHeight - gap - offset);
		[UIView beginAnimations:nil context:nil];
		[UIView setAnimationDuration:0.3f]; //this is speed of keyboard
		CGAffineTransform slideTransform = CGAffineTransformMakeTranslation(0.0, shiftBy);
		self.transform = slideTransform;
		[UIView commitAnimations];
	}
}

..and then I reset the view afterwards using:

- (void) resetViewToIdentityTransform {
	[UIView beginAnimations:nil context:nil];
	[UIView setAnimationDuration:0.3f]; //this is speed of keyboard
	CGAffineTransform slideTransform = CGAffineTransformIdentity;
	self.transform = slideTransform;
	[UIView commitAnimations];
}

You only need to make minimal changes to your own code, and call these methods from your UITextFieldDelegate methods (or other control delegates):

- (void) textFieldDidBeginEditing:(UITextField *)textField {
	[self.view maintainVisibityOfControl:textField offset:0.0f];
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
	if (textField == currentControl) {
		//If the textfield is still the same one, we can reset the view animated
		[self.view resetViewToIdentityTransform];
	}else {
		//However, if the currentControl has changed - that indicates the user has
		//gone into another control - so don't reset view, otherwise animations jump around
	}
}

Here is a copy of the XCode project:

Thanks

written by admin \\ tags: form visibility, inputs hidden, iPhone, keyboard hiding view, scrolling view

UPDATE: iOS 4.1 Now has this behaviour built into the SDK. You can set your keyboard type to be UIKeyboardTypeDecimalPad ! Finally !

Of the various keyboards you can choose when developing iPhone apps, the number pad doesn’t come with a decimal point. There is a blank button in the bottom left corner that doesn’t do anything, so I’m going to show you how to put a decimal point button there to look like this:

There are a few other tutorial around that show you how to do this, but i believe mine is better….because the code is simpler to use, its more flexible, and the UI colors and button states are perfectly matched to the rest of the keyboard (unlike some of the other tutorials) The code you use to implement this will look like this:

@interface DecimalPointNumberPadViewController : UIViewController <UITextFieldDelegate> {
	NumberKeypadDecimalPoint *numberKeyPad;
}
@end

@implementation DecimalPointNumberPadViewController
- (void) textFieldDidBeginEditing:(UITextField *)textField {
	numberKeyPad = [[NumberKeypadDecimalPoint keypadForTextField:textField] retain];
}
- (void)textFieldDidEndEditing:(UITextField *)textField {
	[numberKeyPad release];
}
@end

• it works on any number of UITextFields that are displayed on your view controller.
• It will only add one decimal point per text field.

To achieve this, here are the basic steps of what i do:

1. Create a custom UIButton with clear background and dark grey text.
2. For the highlighted state i change the background image of the button and the text color to be white
3. I find the UIKeyboard in the application window and add the custom button at the required location
4. I add a delegate to the button to listen for click events and pass the event to a handler which adds a decimal point to the current UITextField

Update 5th June 2010: OS4 compatible and using only public API

As using private API’s is against the SDK agreement, I’ve updated the code to remove references to any private API. It is also now compatible with OS 4.0.

Update 20th July 2010: This code was part of the app I’m working on and was accepted by apple.

A copy of my XCode project is here:

DecimalPointNumberPad-v4

Thanks

written by admin \\ tags: iphone keyboard, legal, number pad, number pad decimal point, OS 4.0

Here i will show you how to animate an object along a path on a UIView. I will create the path and draw it onto the UIView so that you can see it, and then use the same path for the animation.

I’m doing all of this within a UIView that i have added to my screen…

Firstly, we will draw a curved line on the screen….

//This draws a quadratic bezier curved line right across the screen
- ( void ) drawACurvedLine {
	//Create a bitmap graphics context, you will later get a UIImage from this
	UIGraphicsBeginImageContext(CGSizeMake(320,460));
	CGContextRef ctx = UIGraphicsGetCurrentContext();

	//Set variables in the context for drawing
	CGContextSetLineWidth(ctx, 1.5);
	CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);

	//Set the start point of your drawing
	CGContextMoveToPoint(ctx, 10, 10);
	//The end point of the line is 310,450 .... i'm also setting a reference point of 10,450
	//A quadratic bezier curve is drawn using these coordinates - experiment and see the results.
	CGContextAddQuadCurveToPoint(ctx, 10, 450, 310, 450);
	//Add another curve, the opposite of the above - finishing back where we started
	CGContextAddQuadCurveToPoint(ctx, 310, 10, 10, 10);

	//Draw the line
	CGContextDrawPath(ctx, kCGPathStroke);

	//Get a UIImage from the current bitmap context we created at the start and then end the image context
	UIImage *curve = UIGraphicsGetImageFromCurrentImageContext();
	UIGraphicsEndImageContext();

	//With the image, we need a UIImageView
	UIImageView *curveView = [[UIImageView alloc] initWithImage:curve];
	//Set the frame of the view - which is used to position it when we add it to our current UIView
	curveView.frame = CGRectMake(1, 1, 320, 460);
	curveView.backgroundColor = [UIColor clearColor];
	[self addSubview:curveView];
}

Now we will create a keyframe animation, and a path that is the same as the line we just drew. We will also draw a circle, and animate it along that path:

- (void) animateCicleAlongPath {
	//Prepare the animation - we use keyframe animation for animations of this complexity
	CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
	//Set some variables on the animation
	pathAnimation.calculationMode = kCAAnimationPaced;
	//We want the animation to persist - not so important in this case - but kept for clarity
	//If we animated something from left to right - and we wanted it to stay in the new position,
	//then we would need these parameters
	pathAnimation.fillMode = kCAFillModeForwards;
	pathAnimation.removedOnCompletion = NO;
	pathAnimation.duration = 5.0;
	//Lets loop continuously for the demonstration
	pathAnimation.repeatCount = 1000;

	//Setup the path for the animation - this is very similar as the code the draw the line
	//instead of drawing to the graphics context, instead we draw lines on a CGPathRef
	CGPoint endPoint = CGPointMake(310, 450);
	CGMutablePathRef curvedPath = CGPathCreateMutable();
	CGPathMoveToPoint(curvedPath, NULL, 10, 10);
	CGPathAddQuadCurveToPoint(curvedPath, NULL, 10, 450, 310, 450);
	CGPathAddQuadCurveToPoint(curvedPath, NULL, 310, 10, 10, 10);

	//Now we have the path, we tell the animation we want to use this path - then we release the path
	pathAnimation.path = curvedPath;
	CGPathRelease(curvedPath);

	//We will now draw a circle at the start of the path which we will animate to follow the path
	//We use the same technique as before to draw to a bitmap context and then eventually create
	//a UIImageView which we add to our view
	UIGraphicsBeginImageContext(CGSizeMake(20,20));
	CGContextRef ctx = UIGraphicsGetCurrentContext();
	//Set context variables
	CGContextSetLineWidth(ctx, 1.5);
	CGContextSetFillColorWithColor(ctx, [UIColor greenColor].CGColor);
	CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
	//Draw a circle - and paint it with a different outline (white) and fill color (green)
	CGContextAddEllipseInRect(ctx, CGRectMake(1, 1, 18, 18));
	CGContextDrawPath(ctx, kCGPathFillStroke);
	UIImage *circle = UIGraphicsGetImageFromCurrentImageContext();
	UIGraphicsEndImageContext();

	UIImageView *circleView = [[UIImageView alloc] initWithImage:circle];
	circleView.frame = CGRectMake(1, 1, 20, 20);
	[self addSubview:circleView];

	//Add the animation to the circleView - once you add the animation to the layer, the animation starts
	[circleView.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];
}

To get all this running, you can use this init method:

- (id)initWithFrame:(CGRect)frame {
	if (self = [super initWithFrame:frame]) {
		[self drawACurvedLine];
		[self animateCicleAlongPath];
    }
    return self;
}

and use something like this in your ViewController….

- (void)viewDidLoad {
	UIView *customView = [[Canvas alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
	customView.backgroundColor = [UIColor blackColor];
	[self.view addSubview:customView];
	[customView release];
    [super viewDidLoad];
}

Also…don’t forget to add your Quartz import:

#import <QuartzCore/QuartzCore.h>

I’m sure there are lots of better ways of doing this, such as using CALayers and adding CGImage to the layers. But that’s something I haven’t tried yet. The example above should be enough to get you started with animation along a path.

Here is a copy of the XCode project:

written by admin \\ tags: "animate along a path", "animation path", animation, CAKeyframeAnimation, iPhone, UIGraphicsBeginImageContext

Doing some iPhone development and this error really caught me out for a while:

2009-11-16 21:02:48.387 Pickers[3779:207] *** Terminating app due to uncaught
exception 'NSUnknownKeyException', reason: '[<UIViewController 0x381d740>
setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key datePicker.'
2009-11-16 21:02:48.388 Pickers[3779:207] Stack: (

It’s seemed fairly cryptic at the time. I had created a Tab Bar Controller and for each tab button, i hadn’t set its class identity – so each tab was still declared as a UIViewController instead of the actual Controller class that i had created.

The error comes from the NSKeyValueCoding category which allows you to access properties via setValue: forKey:

Person *aPerson = [[Person alloc] initWithAge: 53];
aPerson.name = @"Steve";
// NOTE: dot notation, uses synthesized setter, equivalent to [aPerson setName: @"Steve"];
NSLog(@"Access by message (%@), dot notation(%@),
    property name(%@) and direct instance variable access (%@)",
      [aPerson name], aPerson.name, [aPerson valueForKey:@"name"], aPerson->name);

So i guess it is just complaining that it can’t find the generated setter method named setDatePicker – because datePicker instance is not on the generic class.

written by admin \\ tags: iphone development, key value coding-compliant, objective-c