0

ほとんど同じことを行う Mint アプリのようなカスタム セルを作成したいと考えています。獲得データと使用データを使用して 2 つのバーを描画するにはどうすればよいですか?

ありがとう、

カスタムセル

私はこれまでに得ました：

-(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 の後、描画が停止するため、バーが 1 つだけ表示されます。addClip を CGContextSaveGState と CGContextRestoreGState にラップすると、バーの 2 番目の角だけが丸くなります。

また、ビューをサブクラス化し、ビューに描画してから、サブビューとしてテーブルビューセルに追加し、cornerRadius を使用しようとしましたが、図面は実際にはビューの背後にあるため、長方形のバーが背後にある丸みを帯びたビュー (背景付き) として表示されます. これはもっと簡単であるべきだと思いました。

4

3 に答える 3

3

あなたのバグは[pathE addClip];

メソッドについてaddClip、アップルのドキュメントは次のように述べています。

重要: 後続の描画操作を実行するためにクリッピング領域を削除する必要がある場合は、このメソッドを呼び出す前に、(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: に投稿できると思いますdrawGlossAndGradientstackoverflow 、他の人が簡単に役立つことができ、答えを検索する他の人に役立つかもしれません。

そして、私は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);

}

このような効果：

ここに画像の説明を入力

于 2013-04-20T10:33:01.327 に答える
2

UIViewそれは、グラデーションと丸い角を持つ以上のものではありません。これで十分です。

角を丸くする:

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

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

ここから撮影。

于 2013-04-19T19:36:05.493 に答える
1

コーディングを節約したい場合は、グラフを描画およびアニメーション化するための Mac/iOS フレームワークであるCore Plotをご覧ください。

于 2013-04-20T00:05:28.073 に答える