IKANGAI Solutions. e.u.

T F G+ E

IKANGAI Blog

Code Snippet of the Week-UITextView Text Zoom

June 22nd, 2010 by Martin

Sometimes one requires to have a zoom function in a UITextView. Although zooming is available for UIWebView, this control might not always be the right choice when displaying ASCII text files. We’ve created a simple zoom function that uses the swipe gesture to zoom the content of a UITextView. In order to do so, we need to subclass UITextView, overwrite the methods to handle touches and add an overlay view that is used for user feedback.
In the initialization method, we need to add the overlay view and its subviews that indicate the zoom level:

[sourcecode language="objc"]
- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
fontSize = 12;
overlayView = [[UIView alloc]initWithFrame:CGRectMake(0, 20, 320, 28)];
overlayView.backgroundColor = [UIColor clearColor];
overlayView.alpha = 0.6f;
fontSizeBoxOne = [[UIView alloc]initWithFrame:CGRectMake(5, 5, 20, 20)];
fontSizeBoxOne.backgroundColor = [UIColor grayColor];
fontSizeBoxOne.alpha = 0.6f;
fontSizeBoxOne.hidden = YES;
[overlayView addSubview:fontSizeBoxOne];
[fontSizeBoxOne release];
fontSizeBoxTwo = [[UIView alloc]initWithFrame:CGRectMake(30, 5, 20, 20)];
fontSizeBoxTwo.backgroundColor = [UIColor grayColor];
fontSizeBoxTwo.alpha = 0.6f;
fontSizeBoxTwo.hidden = YES;
[overlayView addSubview:fontSizeBoxTwo];
[fontSizeBoxTwo release];
fontSizeBoxThree = [[UIView alloc]initWithFrame:CGRectMake(55, 5, 20, 20)];
fontSizeBoxThree.backgroundColor = [UIColor grayColor];
fontSizeBoxThree.alpha = 0.6f;
fontSizeBoxThree.hidden = YES;
[overlayView addSubview:fontSizeBoxThree];
[fontSizeBoxThree release];
fontSizeBoxFour = [[UIView alloc]initWithFrame:CGRectMake(80, 5, 20, 20)];
fontSizeBoxFour.backgroundColor = [UIColor grayColor];
fontSizeBoxFour.alpha = 0.6f;
fontSizeBoxFour.hidden = YES;
[overlayView addSubview:fontSizeBoxFour];
[fontSizeBoxFour release];
fontSizeBoxFive = [[UIView alloc]initWithFrame:CGRectMake(105, 5, 20, 20)];
fontSizeBoxFive.backgroundColor = [UIColor grayColor];
fontSizeBoxFive.alpha = 0.6f;
fontSizeBoxFive.hidden = YES;
[overlayView addSubview:fontSizeBoxFive];
[fontSizeBoxFive release];
}
return self;
}
[/sourcecode]
When a touch event is detected, we need to store the point where the swipe gesture began:
[sourcecode language="objc"]
-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
gestureStartPoint = [touch locationInView:self];
initialDirection = 0;
[self.superview addSubview:overlayView];
}
[/sourcecode]

The variable initialDirection is used to indicate the swipe direction and to register changes in the swipe direction during the swipe gesture. This allows us to use
During the touch, we check for the distance between the starting point and the current position. We either increase the font size by 0.5 points or decrease it by 0.5 points. Simultaneously, we display an overlay view

[sourcecode language="objc"]
-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint currentPosition = [touch locationInView:self];
CGFloat deltaX = fabsf(gestureStartPoint.x – currentPosition.x);
if (abs(deltaX)>=initialDirection) {
initialDirection = abs(deltaX);
} else {
gestureStartPoint = [touch locationInView:self];
initialDirection = 0;
}
CGFloat direction = gestureStartPoint.x – currentPosition.x;
CGFloat deltaY = fabsf(gestureStartPoint.y – currentPosition.y);
if (deltaX>=kMinimumGestureLength && deltaY< =kMaximumVariance) {
if (direction&lt;0) {
NSLog(@"font++");
if (fontSize<MAXFONTSIZE) {
fontSize = fontSize + 0.5;
self.font = [UIFont fontWithName:@"Verdana" size:fontSize];
}
} else {
NSLog(@"font–");
if (fontSize>MINFONTSIZE) {
fontSize = fontSize – 0.5;
self.font = [UIFont fontWithName:@"Verdana" size:fontSize];
}
}
if (fontSize>=15) {
fontSizeBoxOne.hidden = NO;
} else {
fontSizeBoxOne.hidden = YES;
}
if (fontSize>=16) {
fontSizeBoxTwo.hidden = NO;
} else {
fontSizeBoxTwo.hidden = YES;
}
if (fontSize>=17) {
fontSizeBoxThree.hidden = NO;
} else {
fontSizeBoxThree.hidden = YES;
}
if (fontSize>=18) {
fontSizeBoxFour.hidden = NO;
} else {
fontSizeBoxFour.hidden = YES;
}
if (fontSize>=19) {
fontSizeBoxFive.hidden = NO;
} else {
fontSizeBoxFive.hidden = YES;
}
}
}
[/sourcecode]

And finally, we need to remove the overlay view:

[sourcecode language="objc"]
(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
initialDirection = 0;
[overlayView removeFromSuperview];
}
[/sourcecode]

The complete project can be downloaded from here

your coding ikangai team

Tags: , , , , ,