7

iOS 6+ に付属する新しいアプリ ストア アプリの共有サブ ビューにあるようなビューを作成してアニメーション化する方法は知っていますが (添付のスクリーンショットを参照)、透明な色の効果を追加する方法がわかりません。このビューで。UIViewスクリーンショットとまったく同じ外観にするためのコードサンプルを誰でも提供できますか?

PS alphaUIView のプロパティだけでは、そのようなことはできません。

ここに画像の説明を入力

4

7 に答える 7

31

このメソッドをUIViewカテゴリに追加し、必要に応じて再利用できます。これは、「theColor」から特定のビューの透明までの線形の黒のグラデーションを適用します。

CAGradientLayerオブジェクトを使用するには、プロジェクトにQuartzCore.frameworkが必要です。

+ (void)addLinearGradientToView:(UIView *)theView withColor:(UIColor *)theColor transparentToOpaque:(BOOL)transparentToOpaque
{
    CAGradientLayer *gradient = [CAGradientLayer layer];

    //the gradient layer must be positioned at the origin of the view
    CGRect gradientFrame = theView.frame;
    gradientFrame.origin.x = 0;
    gradientFrame.origin.y = 0;
    gradient.frame = gradientFrame;

    //build the colors array for the gradient
    NSArray *colors = [NSArray arrayWithObjects:
                       (id)[theColor CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.9f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.6f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.4f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.3f] CGColor],
                       (id)[[theColor colorWithAlphaComponent:0.1f] CGColor],
                       (id)[[UIColor clearColor] CGColor],
                       nil];

    //reverse the color array if needed
    if(transparentToOpaque)
    {
       colors = [[colors reverseObjectEnumerator] allObjects];
    }

    //apply the colors and the gradient to the view
    gradient.colors = colors;

    [theView.layer insertSublayer:gradient atIndex:0];
}

グラデーションに干渉しないように、ViewのbackgroundColorをclearColorに設定する必要があることに注意してください。また、スクリーンショットに示されている結果の場合、transparentToOpaqueフラグはYESである必要があります。

于 2013-02-18T16:51:23.947 に答える
6

これは、誰かが必要な場合にSwiftに翻訳されたPedroSilvaのソリューションです(垂直オプションも追加されています)

class func addLinearGradientToView(view: UIView, colour: UIColor, transparntToOpaque: Bool, vertical: Bool)
{
    let gradient = CAGradientLayer()
    let gradientFrame = CGRectMake(0, 0, view.frame.size.width, view.frame.size.height)
    gradient.frame = gradientFrame

    var colours = [
        colour.CGColor,
        colour.colorWithAlphaComponent(0.9).CGColor,
        colour.colorWithAlphaComponent(0.8).CGColor,
        colour.colorWithAlphaComponent(0.7).CGColor,
        colour.colorWithAlphaComponent(0.6).CGColor,
        colour.colorWithAlphaComponent(0.5).CGColor,
        colour.colorWithAlphaComponent(0.4).CGColor,
        colour.colorWithAlphaComponent(0.3).CGColor,
        colour.colorWithAlphaComponent(0.2).CGColor,
        colour.colorWithAlphaComponent(0.1).CGColor,
        UIColor.clearColor().CGColor
    ]

    if transparntToOpaque == true
    {
        colours = colours.reverse()
    }

    if vertical == true
    {
        gradient.startPoint = CGPointMake(0, 0.5)
        gradient.endPoint = CGPointMake(1, 0.5)
    }
    gradient.colors = colours
    view.layer.insertSublayer(gradient, atIndex: 0)
}
于 2015-09-11T12:48:20.873 に答える
4
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = yourView.bounds;
UIColor *blackColor = [UIColor colorWithWhite:0.42f alpha:1.0f];
UIColor *clearColor = [UIColor colorWithWhite:0.42f alpha:0.0f];
layer.colors = [NSArray arrayWithObjects:(id)clearColor.CGColor, (id)blackColor.CGColor, nil];
[myView.layer insertSublayer:layer atIndex:0];

layerビューのレイヤーはどこにありますか。

于 2013-02-13T13:37:35.610 に答える
3

半透明のpngを背景として使用するだけで、このような効果を得ることができます。UIViewをに設定していることを確認してくださいopaqueNOそうすれば問題ありません。

于 2013-02-16T02:17:31.847 に答える
3

この効果を達成するために必要な魔法はありません。Apple が行っているように行う必要があります。小さく引き伸ばされた画像を含む UIImageViews。

このビュー (アイコンを含む下半分の正方形) は、引き伸ばされてこの効果を生み出す画像を使用します。

あなたもこの方法に従うべきです。ビューは非常に明るく、Photoshop でいくつかのテストを行うだけで正しい効果が得られます。

お気づきのように、Apple は iPhone でグラデーション レイヤーを使用することはありません。多くの画像を保存していたので、かなり多くの GPU を消費する必要があります...

テスト用の同様の画像を次に示します。 ここに画像の説明を入力

それが役に立てば幸い。

于 2013-02-20T04:14:01.040 に答える
2

ビューの背景色のアルファ値を目的の値に設定するだけです。

添付の郵便番号を参照してください。AlphaViewController の nib ファイルに移動し、そこで確認します

サブビューのアルファ値を 70% に設定しただけです。あなたの要件に応じてそれを行うことができます。

于 2013-02-20T04:55:42.737 に答える