I often need to add borders to edges of UITableViewCell, but the approach I tried seems not quite working well.
First, I created CustomBorderView class, and implemented drawRect to draw specified type of borders to the view.
#import <UIKit/UIKit.h>
typedef NS_ENUM (NSUInteger,CustomBorderType)
{
CustomBorderTypeTop, //Draw a border only at top
CustomBorderTypeBottom, //Draw a border only at bottom
CustomBorderTypeLeft, //Draw a border only at left
CustomBorderTypeRight, //Draw a border only at right
CustomBorderTypeSides,
CustomBorderTypeAll, //Draw a border on all edges
CustomBorderTypeDottedBottomSolidSides, //Draw a dotted border at bottom and solid border both sides
CustomBorderTypeNone //Cell with no border
};
@interface CustomBorderView : UIView
@property (strong, nonatomic) UIColor *borderColor;
@property (nonatomic) CGFloat borderWidth;
@property (nonatomic) CustomBorderType borderType;
- (id)initWithFrame:(CGRect)frame borderType:(CustomBorderType)borderType;
@end
.m
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
/* draw lines in the cell */
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, self.borderColor.CGColor);
CGContextSetLineWidth(context, self.borderWidth);
switch (self.borderType)
{
...
case CustomBorderTypeAll:
//draw top separator
CGContextMoveToPoint(context, 0.0f, 0.0f + (self.borderWidth / 2)); //start at this point
CGContextAddLineToPoint(context, self.bounds.size.width, 0.0f + (self.borderWidth / 2)); //draw to this point
//draw left edge line
CGContextMoveToPoint(context, 0.0f + (self.borderWidth / 2), 0.0f); //start at this point
CGContextAddLineToPoint(context, 0.0f + (self.borderWidth / 2), self.bounds.size.height); //draw to this point
//draw right edge line
CGContextMoveToPoint(context, self.bounds.size.width - (self.borderWidth / 2), 0.0f); //start at this point
CGContextAddLineToPoint(context, self.bounds.size.width - (self.borderWidth / 2), self.bounds.size.height); //draw to this point
//draw bottom separator
CGContextMoveToPoint(context, 0.0f, self.bounds.size.height - (self.borderWidth / 2)); //start at this point
CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height - (self.borderWidth / 2)); //draw to this point
break;
case CustomBorderTypeDottedBottomSolidSides:
{
//draw left edge line
CGContextMoveToPoint(context, 0.0f + (self.borderWidth / 2), 0.0f); //start at this point
CGContextAddLineToPoint(context, 0.0f + (self.borderWidth / 2), self.bounds.size.height); //draw to this point
//draw right edge line
CGContextMoveToPoint(context, self.bounds.size.width - (self.borderWidth / 2), 0.0f); //start at this point
CGContextAddLineToPoint(context, self.bounds.size.width - (self.borderWidth / 2), self.bounds.size.height); //draw to this point
//stroke solid line
CGContextStrokePath(context);
//draw dotted line
CGFloat dashPattern[] = {1.0, 1.0};
CGContextSetLineDash(context, 0.0, dashPattern, 2);
CGContextMoveToPoint(context, 0 , self.bounds.size.height - (DOT_RADIUS / 2)); //start at this point
CGContextAddLineToPoint(context, self.bounds.size.width, self.bounds.size.height - (DOT_RADIUS / 2)); //draw to this point
break;
}
Secondly, add UIViewAutoResizingMaskFlexibleWidth and Height, so that custom view autoresizes when cell bounds changed.
Finally, insert this view below the custom UITableViewCell's contentView.
[cell insertSubview:borderView belowSubview:cell.contentView];
I actually do this in UITableViewCell subclass.
I thought this is a good way to accomplish what I want because it's reusable and easy to use. I can specify the border type in cellForRowAtIndexPath method for each single rows.
However, somehow the border is sometimes off, disappear, extended when I use cell with dynamic height. Especially for dotted lines, dots are extended to vertical lines.
I would like to know if there is a way to fix this issue, or any better approach to accomplish adding borders to views. Thanks in advance!