Question

我想在Mint应用程序中创建一个自定义单元格，它几乎完全相同。如何使用获得和使用的数据绘制两个柱？

谢谢，

custom Cell

我到目前为止：

-(void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:0/255.0f alpha:1.0f];
    UIColor * earningEndColor = [UIColor colorWithRed:15/255.0f green:188/255.0f blue:0/255.0f alpha:1.0f];

    CGRect earningRect = CGRectMake(5, 32, 60, 13);

    UIBezierPath *pathE = [UIBezierPath bezierPathWithRoundedRect:earningRect
                                                     cornerRadius:3.0];
    [pathE addClip];

    drawGlossAndGradient(context, earningRect, earningStartColor.CGColor, earningEndColor.CGColor);


    UIColor * spentStartColor = [UIColor colorWithRed:255/255.0f green:88/255.0f blue:67/255.0f alpha:1.0f];
    UIColor * spentEndColor = [UIColor colorWithRed:255/255.0f green:52/255.0f blue:49/255.0f alpha:1.0f];

    CGRect spentRect = CGRectMake(5, 52, 25, 13);    

    UIBezierPath *pathS = [UIBezierPath bezierPathWithRoundedRect:spentRect
                                                    cornerRadius:5.0];
    [pathS addClip];

    drawGlossAndGradient(context, spentRect, spentStartColor.CGColor, spentEndColor.CGColor);
}

但是，在addClip之后，绘图停止，因此只显示一个条形图。如果我在CGContextSaveGState附近包装addClip＆amp; CGContextRestoreGState，只有第二个圆角是圆角。

我还尝试了对视图进行子类化并在视图上绘制，然后将其作为子视图添加到我的tableviewcell并使用cornerRadius，但绘图实际上位于视图后面，因此它显示为圆形视图（带有背景）矩形条后面。我认为这应该比它更容易。

Answer 1

您的错误是因为[pathE addClip];

关于addClip方法，苹果医生说：

重要提示：如果您需要删除要执行的剪裁区域后续绘图操作，您必须保存当前图形在调用之前调用state（使用CGContextSaveGState函数）方法。当您不再需要裁剪区域时，您可以使用。恢复以前的绘图属性和剪裁区域 CGContextRestoreGState函数。

因此您应该在addClip之前保存图形状态，并在addClip之后恢复图形状态

这可以帮到你：

-(void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor * earningStartColor = [UIColor colorWithRed:15/255.0f green:227/255.0f blue:0/255.0f alpha:1.0f];
    UIColor * earningEndColor = [UIColor colorWithRed:15/255.0f green:188/255.0f blue:0/255.0f alpha:1.0f];

    CGRect earningRect = CGRectMake(5, 32, 60, 13);

    UIBezierPath *pathE = [UIBezierPath bezierPathWithRoundedRect:earningRect
                                                     cornerRadius:3.0];
    CGContextSaveGState(context);
    [pathE addClip];

    drawGlossAndGradient(context, earningRect, earningStartColor.CGColor, earningEndColor.CGColor);
    CGContextRestoreGState(context);

    UIColor * spentStartColor = [UIColor colorWithRed:255/255.0f green:88/255.0f blue:67/255.0f alpha:1.0f];
    UIColor * spentEndColor = [UIColor colorWithRed:255/255.0f green:52/255.0f blue:49/255.0f alpha:1.0f];

    CGRect spentRect = CGRectMake(5, 52, 25, 13);

    UIBezierPath *pathS = [UIBezierPath bezierPathWithRoundedRect:spentRect
                                                     cornerRadius:5.0];
    [pathS addClip];

    drawGlossAndGradient(context, spentRect, spentStartColor.CGColor, spentEndColor.CGColor);
}

PS：我认为您可以将drawGlossAndGradient发布到stackoverflow，以便其他人可以轻松提供帮助，对于搜索答案的其他人可能会有所帮助。

我伪造了drawGlossAndGradient方法

void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor,
                          CGColorRef endColor) {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = {0.0, 1.0};

    NSArray *colors = [NSArray arrayWithObjects:(__bridge id) startColor, (__bridge id) endColor, nil];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,
                                                        (__bridge CFArrayRef) colors, locations);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);

}

这样的效果：

enter image description here

Answer 2

这不超过UIView的渐变和圆角。 This对你来说绰绰有余。

圆角：

#import <QuartzCore/QuartzCore.h>
...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = YES;

取自here。

Answer 3

如果你想节省一些编码，请查看Core Plot，一个Mac / iOS框架，用于绘制和动画图形。

iOS绘制简单的条形图，如Mint app

3 个答案: