Draw beautiful diagram effortlessly on ipad. Click here to know more..

Saturday, March 23, 2013

Variable size text view in iOS (iPad and iPhone)

Based on specific need, you may want a variable size text view on iOS as

  • Fixed width. Vary height based on length of text
  • Vary both width and height, based on length of text. You will increase height if new line is added otherwise increase width.
These two kinds of text views are used in "Lekh Diagram" app. This is a diagramming app. You can add text on a shape, or free floating text. If text is added on a shape, then width of text is constrained to the width of shape. The free floating text has variable width and height.

Lets see how to do in code:
Add to text boxes, one for fixed width and other for variable width and height.

In ViewController.h

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UITextViewDelegate>
@property (weak, nonatomic) IBOutlet UITextView *textView1;
@property (weak, nonatomic) IBOutlet UITextView *textView2;
@end

In ViewController.m

#import "ViewController.h"

@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.textView1.delegate = self;
    self.textView2.delegate = self;
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}
-(BOOL)shouldAutorotate
{
    return NO;
}
- (void)textViewDidChange:(UITextView *)textView
{
    // textView2 has variable width and variable height
    if (textView == self.textView2) {
        // max widht and height: some random big value
        float maxWidth = 40000;
        float maxHeight = 40000;
        
        CGSize sz = [textView.text sizeWithFont:textView.font constrainedToSize:CGSizeMake(maxWidth, maxHeight)];
        
        // There is some margin around text view. we need to consider margin,
        // otherwise there will text wrapping without new line.
        sz.width += 32;
        sz.height += 16;
        
        CGRect frame = textView.frame;
        frame.size = sz;
        textView.frame = frame;
    }
    else {
        // textView1 has fixed width and variable height
        CGRect frame = textView.frame;
        frame.size.width = textView.contentSize.width;
        frame.size.height = textView.contentSize.height;
        textView.frame = frame;
    }
}
@end


In code above, textView2 has variable width and height and textView1 has fixed width.
Download code from here

The code above is based on code used in "Lekh Diagram", a sketch recognition diagramming app for iPad and iPhone.
Get "Lekh Diagram" from app store: https://itunes.apple.com/us/app/lekh-diagram/id576124115?mt=8