How to draw lines for CKComponent (ComponentKit Facebook)?

Question

How to draw lines for CKComponent (ComponentKit Facebook)?

I can do it using UIView-based class with drawrect method.

 [CKStackLayoutComponent newWithView:{ [ViewWithDrawrectMethod class],
                                    {
                                    { CKComponentViewAttribute::LayerAttribute(@selector(setCornerRadius:)), @4.0 },
                                    { CKComponentViewAttribute::LayerAttribute(@selector(setBorderColor:)), (id)[[UIColor lightGrayColor] CGColor]},
                                    { CKComponentViewAttribute::LayerAttribute(@selector(setBorderWidth:)), @0.5},
                                    { @selector(setClipsToBounds:), @YES },
                                    { @selector(setBackgroundColor:),  [UIColor whiteColor]},
                                   }
                               }

---

@interface ViewWithDrawrectMethod : UIView

@end

@implementation ViewWithDrawrectMethod
    -(void) drawRect: (CGRect) rect
    {

        [super drawRect:rect];

        CGContextRef context = UIGraphicsGetCurrentContext();

        CGFloat dash[] = {2.0, 3.0};
        CGContextSetLineDash(context, 0, dash, 1);

        CGRect paperRect =  self.bounds;

        CGPoint startPoint = CGPointMake(paperRect.origin.x,50);
        CGPoint endPoint = CGPointMake(paperRect.origin.x + paperRect.size.width, 50);

        CGContextSetLineCap(context, kCGLineCapSquare);
        CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
        CGContextSetLineWidth(context, 0.5);
        CGContextMoveToPoint(context, startPoint.x , startPoint.y);
        CGContextAddLineToPoint(context, endPoint.x, endPoint.y );
        CGContextStrokePath(context);

    }

But I doubt if the right to use UIViev-based component like a child of CKStackLayoutComponent? Maybe there is a better way?

Thanks for your responses in advance.

Answer 1

+ (instancetype)newLineWithColor: (UIColor *)color {
    return [super newWithComponent:[CKComponent
                                newWithView:{
                                    UIView.class,
                                    {{@selector(setBackgroundColor:), color}}
                                }
                                size:{
                                    .height = 0.5
                                }]];
}

or:

you can make use a background image as stretchable image and draw lines on it.