Drawing Line Bars on a UITextView for IPhone

Question

I would like to create the same view as the application of notes on the iPhone, and for this you need the view to display the lines in accordance with the application of notes, I did this in the windows where you need to get the font metrics, and then draw the lines in the device context, did anyone do this in a UITextView if any help were appriciated

Answer 1

Subclass of UITextView. Override -drawRect:

- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor); CGContextSetLineWidth(context, self.lineWidth); CGFloat strokeOffset = (self.lineWidth / 2); CGFloat rowHeight = self.font.lineHeight; if (rowHeight > 0) { CGRect rowRect = CGRectMake(self.contentOffset.x, - self.bounds.size.height, self.contentSize.width, rowHeight); while (rowRect.origin.y < (self.bounds.size.height + self.contentSize.height)) { CGContextMoveToPoint(context, rowRect.origin.x + strokeOffset, rowRect.origin.y + strokeOffset); CGContextAddLineToPoint(context, rowRect.origin.x + rowRect.size.width + strokeOffset, rowRect.origin.y + strokeOffset); CGContextDrawPath(context, kCGPathStroke); rowRect.origin.y += rowHeight; } } } 

When you start a text view, be sure to set the contentMode to UIViewContentModeRedraw. Otherwise, the lines will not scroll with the text.

 self.contentMode = UIViewContentModeRedraw; 

This is not perfect. Ideally, you should just draw a rectangle that has passed. But I was lazy, and it worked for my needs.

Answer 2

I think this works fine, but I feel like it has been hacked, and I have not fully disclosed the mechanism of the UITextView class;

you must first add the following to your delegate to force the scroll to be redrawn

 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // NSLog(@"scrollViewDidScroll The scroll offset is ---%f",scrollView.contentOffset.y); [noteText setNeedsDisplay]; } 

then we implement drawRect in a subclass, so

 - (void)drawRect:(CGRect)rect { // Drawing code // Get the graphics context CGContextRef ctx = UIGraphicsGetCurrentContext(); [super drawRect:rect]; // Get the height of a single text line NSString *alpha = @"ABCD"; CGSize textSize = [alpha sizeWithFont:self.font constrainedToSize:self.contentSize lineBreakMode:UILineBreakModeWordWrap]; NSUInteger height = textSize.height; // Get the height of the view or contents of the view whichever is bigger textSize = [self.text sizeWithFont:self.font constrainedToSize:self.contentSize lineBreakMode:UILineBreakModeWordWrap]; NSUInteger contentHeight = (rect.size.height > textSize.height) ? (NSUInteger)rect.size.height : textSize.height; NSUInteger offset = 6 + height; // MAGIC Number 6 to offset from 0 to get first line OK ??? contentHeight += offset; // Draw ruled lines CGContextSetRGBStrokeColor(ctx, .8, .8, .8, 1); for(int i=offset;i < contentHeight;i+=height) { CGPoint lpoints[2] = { CGPointMake(0, i), CGPointMake(rect.size.width, i) }; CGContextStrokeLineSegments(ctx, lpoints, 2); } } 

Still worried about this Magic Number 6

Bean

Answer 3

You can try setting backgroundColor from textView using a line chart image.

 textView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"RuledLinesPage.png"]]; 

A color with a pattern creates a tiled image if the area filled with color is larger than the image. That way, you will need to make sure the image size is the right size / tile (I don't think that “tileable” is the real word, but I hope you get what I mean). You will also need to create an image with ruled lines in order to best match the textView font.

Good luck.

Answer 4

@lukya, Your decision is a bit messy, because when we scroll through a UITextView, only scrolls in the text leave the lines (coming from the image) in their place.

A better solution would be to add a subview to the text view where you drew the lines. You need to add an observer to the text view in order to track its change in the size of the content when the text is enlarged / reduced.