Draw Line using CGContext

Question

I want to draw line in table view cell so that I can place textfield & switch in single cell. I increased the height of cell. How can I draw line in cell?

I have subclass of UIView which contains following code

 //Get the CGContext from this view
 CGContextRef context = UIGraphicsGetCurrentContext();
 //Set the stroke (pen) color
 CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
 //Set the width of the pen mark
 CGContextSetLineWidth(context, 1.0);

 // Draw a line
 //Start at this point
 CGContextMoveToPoint(context, 10.0, 30.0);

 //Give instructions to the CGContext
 //(move "pen" around the screen)
 CGContextAddLineToPoint(context, 310.0, 30.0);


 //Draw it
 CGContextStrokePath(context);

Then I have a tableViewController with grouped table style. In cellForRowAtIndexPath I have following code

//code to add textfield
DrawLineView *drawLine = [[DrawLineView alloc]init];
[cell addSubview:drawLine];
//code add switch

But it is not drawing any line. I can't use 2 different cells. I have to Please help me. This is my first to deal with graphics i iphone. Thanks

Answer 1

Two things... First, you usually don't draw into the cell itself.

You normally draw into the content view. Sometimes it makes sense draw into the cell's backgroundView or selectedBackgroundView.

[cell.contentView addSubview:drawLine];

Second, the default cell text labels cell.textLabel and cell.detailTextLabel have non-transparent background. Try setting their background colors to [UIColor clearColor].

Edit: one more thing: you need to set a proper frame for your drawLine

DrawLineView *drawLine = [[DrawLineView alloc]initWithFrame:cell.contentView.bounds];

Answer 2

If all you want to do is draw a line, it would be a lot better to use a CAShapeLayer, pass it a path with a line, and then attach that as a sublayer of the cells content view. The table should perform better than using a view with a custom drawRect.

Example of drawing a line via CALayer and a path:

// You'll also need the QuartzCore framework added to the project
#import <QuartzCore/QuartzCore.h>

CAShapeLayer *lineShape = nil;
CGMutablePathRef linePath = nil;
linePath = CGPathCreateMutable();
lineShape = [CAShapeLayer layer];

lineShape.lineWidth = 4.0f;
lineShape.lineCap = kCALineCapRound;;
lineShape.strokeColor = [[UIColor blackColor] CGColor];

int x = 0; int y = 0;
int toX = 30; int toY = 40;                            
CGPathMoveToPoint(linePath, NULL, x, y);
CGPathAddLineToPoint(linePath, NULL, toX, toY);

lineShape.path = linePath;
CGPathRelease(linePath);
[self.layer addSublayer:lineShape];

Answer 3

I think a very simplified way of drawing a line is to create a UIView and fill it with desired color, then choose its width accordingly, and setup height to be 1 pixel like so:

var lineView : UIView = {
     let view = UIView()
     view.backgroundColor = UIColor.blackColor()
     view.translatesAutoresizingMaskIntoConstraints = false
     return view
}()


self.view.addSubview(lineView)
self.view.addConstraints(NSLayoutConstraint.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["view": lineView])))
self.view.addConstraints(NSLayoutConstraint.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-50-[view(1)]", options: NSLayoutFormatOptions(), metrics: nil, views: ["view": lineView])))