5

UINavigationBar同じビューのカスタムUIButtonサブクラス オブジェクトのグラデーションとして使用するグラデーションを複製しようとしています。

しかし、色がどのように導き出されるのかわかりませんか？つまり、UINavigationBarの背景色を設定するために 1 つの色のみを指定しますtintColorが、少なくとも 4 色のように見える素敵なグラデーションを作成しますか?

私は本当に「内側」の上部と下部の色に興味があります-バーの周りの1pxの境界線のすぐ内側です...外側の「境界線」の色は実際には異なって見えます。

編集 - 1

さらに調査すると、これらの異なる色を取得するために、HSB (最初に考えられた RBG ではなく) の値が操作されているようです。

HSB 値を取得するための便利なメソッドもありUIColorます。これは役立つはずです。

getHue:saturation:brightness:alpha:

これまでに見つかった参考資料

HSL および HSV ウィキ

UIColor クラス リファレンス

プログラムで色を明るくする

『インタラクティブ コンピュータ グラフィックスの基礎』より

編集 - 2

UIButtonプログラムで背景のグラデーションを設定できることを知らなかった場合は、その方法に関する参考文献を次に示します。

UIButtons とコア アニメーション レイヤーで楽しむ

スタイリッシュな UIButton を作成するための 5 つのヒント(このリンクを提供してくれた @cdo に敬意を表します)

編集 - 3

元の色と「内側」のグラデーション色 (最も外側の色は無視) を HSB 値UINavigationBarとそれに対応する「戻る」ボタン (タイトルは関係なく、常に白で表示) に表示するスプレッドシートをまとめました。

いくつかのサンプル色について収集した情報を含む Google ドキュメントへのリンクを次に示します。

https://docs.google.com/spreadsheet/ccc?key=0AnKVtzkNS9scdGVRN01pa1NQcC1hdThNbEVzQU8wRlE&usp=sharing

注: これらの値は、iOS 6.1 用の Retina 3.5 インチ iPhone シミュレーター (Xcode バージョン 4.6) を使用してスクリーンショットを保存し、PhotoShop を使用して HSB 値を目で確認することによって発見されました。

報奨金の基準

この質問に報奨金を出して、より多くの露出をもたらし、うまくいけば良い答えが得られるようにしました. 私が探している答え：

tintColorをonに設定した後に作成された「内側上部」および「内側下部」のグラデーション カラー (スプレッドシートを参照) の RGB または HSB 値を計算/近似 (ほとんどの場合) する方法を提供しUINavigationBarます。

「戻る」ボタンの「内側の上部」と「内側の下部」のグラデーション カラーを計算する方法も提供すると、ボーナス ポイントが付与されます (最初の報奨金の提供を上回る) (これはナビゲーション バーに似ていますが、私はこれらを見つけました)。通常、色はわずかに「暗く」見えます)？

4

4 に答える 4

7

短い答え：それはグラデーションではありません

長い答え：色合いの色を適用した後、その上に透明なオーバーレイ画像がレンダリングされます。

それはUITintedTopBarHighlight@2x.pngと呼ばれ、UIKitアートワークに含まれています。（ここにアップロード：http：//cl.ly/image/2c2V3t1D1T3L）

これは2x88ピクセルの画像であり、色付きの背景の上で水平方向に繰り返す必要があります。

戻るボタンの場合も非常に似ていますが、形を整えるためのマスクもあります。UItintedBackButtonHighlightおよびUITintedBackButtonMask。

于 2013-03-11T20:16:54.437 に答える
2

Appleは色のグループごとに異なる計算をしているように見えるため、正確な動作をコピーするのは困難です。例えば。明るい色はわずかに暗くなり、暗い色は点灯します。

バーボタンアイテムも同様です。一部の色では、通常の「境界線」ボタンと「完了」スタイルのボタンの違いが完全に異なります。ターコイズのように目立たないこともありますが、オレンジの場合は間違いなく見えます。

このサンプルコードを作成するために、私はPaintCodeを使用してプロトタイピングを行いました。
このコードをUIViewサブクラスなどにコピーします。または、必要なピースコードを取得するだけです。

- (void)drawRect:(CGRect)rect
{
    //// General Declarations
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = UIGraphicsGetCurrentContext();

    //// Color Declarations
    UIColor* tint = [UIColor colorWithRed: 1 green: 0.66 blue: 0.329 alpha: 1];
    CGFloat tintRGBA[4];
    [tint getRed: &tintRGBA[0] green: &tintRGBA[1] blue: &tintRGBA[2] alpha: &tintRGBA[3]];

    UIColor* lighter = [UIColor colorWithRed: (tintRGBA[0] * 0.58 + 0.42) green: (tintRGBA[1] * 0.58 + 0.42) blue: (tintRGBA[2] * 0.58 + 0.42) alpha: (tintRGBA[3] * 0.58 + 0.42)];
    CGFloat lighterRGBA[4];
    [lighter getRed: &lighterRGBA[0] green: &lighterRGBA[1] blue: &lighterRGBA[2] alpha: &lighterRGBA[3]];

    UIColor* lightest = [UIColor colorWithRed: (lighterRGBA[0] * 0.55 + 0.45) green: (lighterRGBA[1] * 0.55 + 0.45) blue: (lighterRGBA[2] * 0.55 + 0.45) alpha: (lighterRGBA[3] * 0.55 + 0.45)];
    UIColor* darker = [UIColor colorWithRed: (tintRGBA[0] * 0.92) green: (tintRGBA[1] * 0.92) blue: (tintRGBA[2] * 0.92) alpha: (tintRGBA[3] * 0.92 + 0.08)];
    CGFloat darkerRGBA[4];
    [darker getRed: &darkerRGBA[0] green: &darkerRGBA[1] blue: &darkerRGBA[2] alpha: &darkerRGBA[3]];

    UIColor* darkest = [UIColor colorWithRed: (darkerRGBA[0] * 0.65) green: (darkerRGBA[1] * 0.65) blue: (darkerRGBA[2] * 0.65) alpha: (darkerRGBA[3] * 0.65 + 0.35)];

    //// Gradient Declarations
    NSArray* gradientColors = [NSArray arrayWithObjects:
                               (id)lighter.CGColor,
                               (id)darker.CGColor, nil];
    CGFloat gradientLocations[] = {0, 1};
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)gradientColors, gradientLocations);


    //// top Drawing
    UIBezierPath* topPath = [UIBezierPath bezierPathWithRect: CGRectMake(0, 0, rect.size.width, 1)];
    [lightest setFill];
    [topPath fill];

    //// theGradient Drawing
    UIBezierPath* theGradientPath = [UIBezierPath bezierPathWithRect: CGRectMake(0, 1, rect.size.width, rect.size.height - 1.0f)];
    CGContextSaveGState(context);
    [theGradientPath addClip];
    CGContextDrawLinearGradient(context, gradient, CGPointMake(50, 1), CGPointMake(50, rect.size.height-1.0f), 0);
    CGContextRestoreGState(context);

    //// bottom Drawing
    UIBezierPath* bottomPath = [UIBezierPath bezierPathWithRect: CGRectMake(0, rect.size.height-1.0f, rect.size.width, 1)];
    [darkest setFill];
    [bottomPath fill];


    //// Cleanup
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}
于 2013-03-11T10:24:32.887 に答える
0

UIButton は単一のtintColorプロパティを受け取りますが、これは、バックグラウンドでグラデーションで使用する他の色を計算していないという意味ではありません。このチュートリアルを試してください。

于 2013-03-09T02:14:14.623 に答える