ios - 複数の色で円を作成する

Question

私はiPhoneアプリを開発していて、複数の色で円を作りたいと思っています。下の画像のように

m draw rect メソッドを使用して円を描画しますが、複数の色では運がありません。

手伝ってくれませんか？

前もって感謝します。

Answer 1

この効果は、CAGradientLayerと円形マスクを使用して実現できます。サンプルコード (一部のビュー コントローラーで使用すると仮定):

- (void)viewDidLoad
{
    [super viewDidLoad];

    CAGradientLayer *glayer = [CAGradientLayer layer];
    glayer.frame = CGRectMake(60.0f, 60.0f, 200.0f, 200.0f);
    glayer.colors = @[(__bridge id)[UIColor greenColor].CGColor,
                      (__bridge id)[UIColor cyanColor].CGColor,
                      (__bridge id)[UIColor blueColor].CGColor,
                      (__bridge id)[UIColor purpleColor].CGColor,
                      (__bridge id)[UIColor redColor].CGColor,
                      (__bridge id)[UIColor orangeColor].CGColor,
                      (__bridge id)[UIColor yellowColor].CGColor];
    glayer.backgroundColor = [UIColor redColor].CGColor;
    CAShapeLayer *shLayer = [CAShapeLayer layer];
    [shLayer setPath:CGPathCreateWithEllipseInRect(CGRectMake(0, 0, 200, 200), NULL)];
    [glayer setMask:shLayer];
    [self.view.layer addSublayer: glayer];
}

CAGradientLayerのプロパティcolorsとlocationsプロパティはアニメーション化可能であるため、そのアプローチを使用してアニメーション効果を簡単に追加できます。

Answer 2

QuartzCore から CGGradientRef と CGContextDrawLinearGradient を使用してみることができます (プロジェクトに QuartzCore を追加してインポートすることを忘れないでください)。

グラデーションを作成するそのようなものを（UIViewサブクラスで）使用できます：

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

        CGGradientRef gradient;
        CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();;

        //5 is for count of colors
        CGFloat parts[5] = { .2, .4, .6, .8, .1 };

        //colors for each part, so 5 parts by 4 each (r,g,b,a for each part in range 0 - 1, 1 is for 255 in regular rgb space, and alpha as usual)
        CGFloat components[20] = {
            .3, .24, .1, 1,
            .3, .2, .7, 1,
            .3, .84, .2, 1,
            .3, .24, .3, 1,
            .1, .5, .38, 1
        };

        gradient = CGGradientCreateWithColorComponents(rgb, components, parts, 5);

        CGPoint top = CGPointMake(CGRectGetMidX(rect), 0.0f);
        CGPoint bottom = CGPointMake(CGRectGetMidX(rect), rect.size.height);

        CGContextDrawLinearGradient(ctx, gradient, top, bottom, 0);

        CGGradientRelease(gradient);
        CGColorSpaceRelease(rgb);

        //round shape you can archive by Vladimir's solution
        CAShapeLayer *shLayer = [CAShapeLayer layer];
        [shLayer setPath:CGPathCreateWithEllipseInRect(CGRectInset(rect, 5, 5), NULL)];
        [self.layer setMask:shLayer];
}