ios - 如何为 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);

    }

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

提前感谢您的回复。

Answer 1

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

或者：

您可以将背景图像用作可拉伸图像并在其上画线。