Question

I have a UITextView where the user can create notes and save into a plist file.
I want to be able to show lines just like a normal notebook. The problem I have is
that the text won’t align properly.

The image below explains the problem quite well.

This is the background I use to create the lines like the Notes.app

This is my code for creating the background for my UITextView:

textView.font            = [UIFont fontWithName:@"MarkerFelt-Thin" size:19.0]; 
textView.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: @"Notes.png"]];

I know that the UIFont.lineHeight property is only available in > iOS 4.x.

So I wonder if there is another solution to my problem?

Answer 1

You should try and draw your lines programmatically rather than using an image. Here’s some sample code of how you could accomplish that. You can subclass UITextView and override it’s drawRect: method.

NoteView.h

#import <UIKit/UIKit.h>
@interface NoteView : UITextView <UITextViewDelegate> {
}
@end

NoteView.m

#import "NoteView.h"

@implementation NoteView

- (id)initWithFrame:(CGRect)frame {

    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor colorWithRed:1.0f green:1.0f blue:0.6f alpha:1.0f];
        self.font = [UIFont fontWithName:@"MarkerFelt-Thin" size:19];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {

    //Get the current drawing context   
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    //Set the line color and width
    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.2f].CGColor);
    CGContextSetLineWidth(context, 1.0f);
    //Start a new Path
    CGContextBeginPath(context);

    //Find the number of lines in our textView + add a bit more height to draw lines in the empty part of the view
    NSUInteger numberOfLines = (self.contentSize.height + self.bounds.size.height) / self.font.leading;

    //Set the line offset from the baseline. (I'm sure there's a concrete way to calculate this.)
    CGFloat baselineOffset = 6.0f;

    //iterate over numberOfLines and draw each line
    for (int x = 0; x < numberOfLines; x++) {
        //0.5f offset lines up line with pixel boundary
        CGContextMoveToPoint(context, self.bounds.origin.x, self.font.leading*x + 0.5f + baselineOffset);
        CGContextAddLineToPoint(context, self.bounds.size.width, self.font.leading*x + 0.5f + baselineOffset);
    }

    //Close our Path and Stroke (draw) it
    CGContextClosePath(context);
    CGContextStrokePath(context);
}

@end

MyViewController.h

#import <UIKit/UIKit.h>
#import "NoteView.h"
@interface MyViewController : UIViewController <UITextViewDelegate> {

    NoteView *note;
}

@property (nonatomic, retain) NoteView *note;

@end

MyViewController.m

#import "MyViewController.h"
#import "NoteView.h"

#define KEYBOARD_HEIGHT 216

@implementation MyViewController
@synthesize note;

- (void)loadView {
    [super loadView];
    self.note = [[[NoteView alloc] initWithFrame:self.view.bounds] autorelease];
    [self.view addSubview:note];
    note.delegate = self;
    note.text = @"This is the first line.\nThis is the second line.\nThis is the ... line.\nThis is the ... line.\nThis is the ... line.\nThis is the ... line.\nThis is the ... line.\n";
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    [note setNeedsDisplay];
}

- (void)textViewDidBeginEditing:(UITextView *)textView {
    CGRect frame = self.view.bounds;
    frame.size.height -= KEYBOARD_HEIGHT;
    note.frame = frame;
}

- (void)textViewDidEndEditing:(UITextView *)textView {
    note.frame = self.view.bounds;
}

- (void)dealloc {
    [note release];
    [super dealloc];
}

Take a look at Apple’s documentation for Managing the Keyboard, specifically “Moving Content That Is Located Under the Keyboard”. It explains how to listen for NSNotifcations and adjust your views properly.