web-dev-qa-db-ja.com

UIViewのグラデーションとiPhoneのUILabels

可能性のある複製：
iPhoneアプリでグラデーションを手動で描画しますか？

私のアプリケーションでは、UIViewまたはUILabelのいずれかにテキストを表示する必要がありますが、背景は真のUIColorではなくグラデーションでなければなりません。グラフィックプログラムを使用して目的の外観を作成することは、テキストがサーバーから返されるデータによって異なる場合があるため、良くありません。

誰もこれに取り組む最も速い方法を知っていますか？あなたの考えは大歓迎です。

iphoneioscocoa-touchgradient
219
TonyNeallon

また、1ピクセル幅のグラフィックイメージをグラデーションとして使用し、ビュープロパティを設定してグラフィックを拡大してビューを埋めることもできます（何らかの放射状グラフィックではなく、単純な線形グラデーションを考えている場合）。

44
Kendall Helmstetter Gelner

これは古いスレッドですが、今後の参考のために：

IPhone SDK 3.0の時点で、新しいCAGradientLayerを使用することにより、サブクラス化や画像なしでカスタムグラデーションを非常に簡単に実装できます。

 UIView *view = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 100)] autorelease];
 CAGradientLayer *gradient = [CAGradientLayer layer];
 gradient.frame = view.bounds;
 gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
 [view.layer insertSublayer:gradient atIndex:0];

CAGradientLayerのドキュメントをご覧ください。必要に応じて、開始点と終了点（上から下にまっすぐ進む線形グラデーションが必要ない場合）、または各色にマップする特定の場所を指定することもできます。

779
Mirko Froehlich

Mikeの応答で指摘されているように、Core Graphicsを使用してグラデーションを描画できます。より詳細な例として、UIViewの背景として使用するUILabelサブクラスを作成できます。そのUIViewサブクラスで、drawRect:メソッドをオーバーライドし、次のようなコードを挿入します。

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

    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 1.0, 1.0, 1.0, 0.35,  // Start color
         1.0, 1.0, 1.0, 0.06 }; // End color

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGRect currentBounds = self.bounds;
    CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMidY(currentBounds));
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);

    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace); 
}

この特定の例では、UIViewの上部から垂直方向の中央に向かって描画される、白い光沢のあるスタイルのグラデーションを作成します。 UIViewのbackgroundColorを好きなものに設定すると、この光沢がその色の上に描画されます。 CGContextDrawRadialGradient関数を使用して放射状グラデーションを描くこともできます。

このUIViewのサイズを適切に調整し、UILabelをサブビューとして追加するだけで、目的の効果を得ることができます。

編集（2009年4月23日）：St3fanの提案に従って、ビューのフレームをコード内の境界に置き換えました。これにより、ビューの原点が（0,0）でない場合が修正されます。

120
Brad Larson

CAGradientLayerとは対照的に、CGGradientを使用する場合、勾配は滑らかではありませんが、顕著なステップがあります。見る this example：

より魅力的な結果を得るには、CGGradientを使用することをお勧めします。

72
ThomasW

Mirko Froehlichの答えは、カスタムカラーを使用したい場合を除いて、私にとってはうまくいきました。コツは、RGBではなく色相、彩度、明度でUIカラーを指定することです。

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = myView.bounds;
UIColor *startColour = [UIColor colorWithHue:.580555 saturation:0.31 brightness:0.90 alpha:1.0];
UIColor *endColour = [UIColor colorWithHue:.58333 saturation:0.50 brightness:0.62 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[startColour CGColor], (id)[endColour CGColor], nil];
[myView.layer insertSublayer:gradient atIndex:0];

色の色相、彩度、明るさを取得するには、内蔵のXcodeカラーピッカーを使用して[HSB]タブに移動します。このビューでは色相は度数で測定されるため、値を360で除算して、コードに入力する値を取得します。

24
Robert Wagstaff

これは、xCodeのIBのUIButtonを透明/クリアに設定し、bg画像なしで動作するようにしたものです。

UIColor *pinkDarkOp = [UIColor colorWithRed:0.9f green:0.53f blue:0.69f alpha:1.0];
UIColor *pinkLightOp = [UIColor colorWithRed:0.79f green:0.45f blue:0.57f alpha:1.0];

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = [[shareWordButton layer] bounds];
gradient.cornerRadius = 7;
gradient.colors = [NSArray arrayWithObjects:
                   (id)pinkDarkOp.CGColor,
                   (id)pinkLightOp.CGColor,
                   nil];
gradient.locations = [NSArray arrayWithObjects:
                      [NSNumber numberWithFloat:0.0f],
                      [NSNumber numberWithFloat:0.7],
                      nil];

[[recordButton layer] insertSublayer:gradient atIndex:0];
15
Anna Billstrom

UIImageViewであるサブビューを持つビューでこれを実現します。 ImageViewが指している画像はグラデーションです。次に、UIViewで背景色を設定し、色付きのグラデーションビューを作成しました。次に、必要に応じてビューを使用します。描画するものはすべてこのグラデーションビューの下になります。 ImageViewの上に2番目のビューを追加することで、描画がグラデーションの下または上にあるかどうかのいくつかのオプションを持つことができます...

3
mahboudz