为UITableViewCell添加边框的最佳方法

时间:2013-10-28 23:48:43

标签: ios objective-c uitableview drawrect quartz-2d

我经常需要在UITableViewCell的边缘添加边框,但我尝试的方法看起来效果不佳。

首先,我创建了CustomBorderView类,并实现了drawRect以将指定类型的边框绘制到视图中。

#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;
    }

其次,添加UIViewAutoResizingMaskFlexibleWidth和Height,以便在单元格边界发生更改时自定义视图。

最后,在自定义UITableViewCell的contentView下面插入此视图。

[cell insertSubview:borderView belowSubview:cell.contentView];

我实际上是在UITableViewCell子类中执行此操作。

我认为这是实现我想要的好方法,因为它可重复使用且易于使用。我可以在cellForRowAtIndexPath方法中为每一行指定边框类型。

但是,当我使用具有动态高度的单元格时,某种程度上边界有时会关闭,消失,扩展。特别是对于虚线,点扩展到垂直线。

我想知道是否有办法解决此问题,或者是否有更好的方法来完成向视图添加边框。提前谢谢!

Extended dotted line

Off side borders

Disappeared border

0 个答案:

没有答案