iOS: Vertical aligning text in a UITextView

February 01, 2013

The default and expected behavior of a UITextView (multi-line text) out of the box in iOS is to align the text top left in it’s container. That works well most of the time. However I recently had need to either center the text vertically within the control or have all the text align to the bottom of the control.

You can add an observer to the control and when it’s content size changes (text is set), fire a method. The method can then handle how the text is actually positioned in the control. If it doesn’t make sense to do the alignment, it will default to the normal behavior of the control (top vertical alignment).

Here we go:

- (void) viewDidLoad {
   [textField addObserver:self forKeyPath:@"contentSize" options:(NSKeyValueObservingOptionNew) context:NULL];
   [super viewDidLoad];

-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
   UITextView *tv = object;
   //Center vertical alignment
   //CGFloat topCorrect = ([tv bounds].size.height - [tv contentSize].height * [tv zoomScale])/2.0;
   //topCorrect = ( topCorrect < 0.0 ? 0.0 : topCorrect );
   //tv.contentOffset = (CGPoint){.x = 0, .y = -topCorrect};

   //Bottom vertical alignment
   CGFloat topCorrect = ([tv bounds].size.height - [tv contentSize].height);
    topCorrect = (topCorrect <0.0 ? 0.0 : topCorrect);
    tv.contentOffset = (CGPoint){.x = 0, .y = -topCorrect};

You can decide which you’d like to use, or flush the method out to take an argument for which type of vertical alignment you’d like to use. This works quite well and it would have been nice if the properties were built into the control to begin with.

If you can use it, enjoy.

Related Posts Plugin for WordPress, Blogger...