1

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!

Extended dotted line

Off side borders

Disappeared border

4

0 回答 0