How to set UITextView's content inset like Notes App

Question

I am working in an app in which I need to give feature like Notes App in iphone. as shown in first screen shot , initially , notes leaves a tab before the content starts, I also wanted to do the same and for that when I set Left Content inset (of UITextView) by 25 , it shows like in screenshot 2, here you may see the image also gets shifted. I have set image as background. I don't know how to solve this problem.

I also tried by adding image as subview of UITextview but it won't repeat the lines, while scrolling (image of lines) like notes app.

I'm setting the background of Textview by following code.

[textView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"line_image.png"]]];

Please tell me if I am going wrong or any extra effort needed to get desired output.

Thanks

Answer 1

UITextView is UIScrollView subclass so all relevant delegate method are available for you (e.g. scrollViewDidScroll:) - you can adjust your custom background in that method.

There's very nice post on Dr.Touch blog about recreating Notes app interface - you can get general idea about how it is done from it. Basically what is done there is adding custom view that draws background behind the text view and adjust it in text view's delegate methods and also using KVO on its 'contentSize' property.

Answer 2

@Dinesh gave nice solution but it doesn't sound to be generic as I want to use image of lines instead of drawing them. Image has some special effects that can not be achieved by drawing. So to solve it I created a table view below the textview keeping textview's background transparent. Now just added the image of line to my tableview's custom cell and set content offset of UItableview same as of the scrollview (subview of text view ,refering to the answer of @Vladimir ) .

And used the following code to scroll my tableview with scrolling the textview and got the desired output.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{           
    tableView.contentOffset =scrollView.contentOffset; 
}

Keeping my tableview's number of rows at a very large number.

PS: instead of setting the content inset of textview, i set its frame's X position and decreased the width relaively.