如何为CKComponent（ComponentKit Facebook）绘制线条？

Question

如何为CKComponent（ComponentKit Facebook）画线？

我可以使用基于UIView的类和drawrect方法来完成它。

 [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);

    }

但我怀疑是否有权使用基于UIViev的组件，如CKStackLayoutComponent的孩子？也许有更好的方法？

感谢你提前回复。

Answer 1

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

或：

您可以使用背景图像作为可伸缩图像并在其上绘制线条。