web-dev-qa-db-ja.com

UIViewに放射状グラデーションを追加するにはどうすればよいですか？

放射状のグラデーションが必要なUIViewがありますが、これをどのように行うのか疑問に思っていますか？

iosobjective-cuiviewradial-gradients
14
Andrew

これを行うには、コアグラフィックスにドロップダウンして CGContextDrawRadialGradient を使用する必要があります。

同様のスタックオーバーフローの質問

放射状のグラデーションで扇形を描くにはどうすればよいですか（iphone）

Core Graphics/iPhoneでグラデーションライン（フェードイン/フェードアウト）を描画する方法は？

その他のリソース

IOSでグラデーション付きのアイコンを描画する方法を示すチュートリアルがここにあります：

http://redartisan.com/2011/05/13/porting-iconapp-core-graphics

彼はコードをGithubに配置し、コアグラフィックスを使用してグラデーションを作成する（かなり長蛇の列の）方法を示すUIViewサブクラスを完備しています。

https://github.com/crafterm/IconApp/blob/master/IconApp/IconView.m

6
John Gallagher

UIViewの最初のサブクラス：

@implementation UIRadialView

- (void)drawRect:(CGRect)rect
{
    // Setup view
    CGFloat colorComponents[] = {0.0, 0.0, 0.0, 1.0,   // First color:  R, G, B, ALPHA (currently opaque black)
                                 0.0, 0.0, 0.0, 0.0};  // Second color: R, G, B, ALPHA (currently transparent black)
    CGFloat locations[] = {0, 1}; // {0, 1) -> from center to outer edges, {1, 0} -> from outer edges to center
    CGFloat radius = MIN((self.bounds.size.height / 2), (self.bounds.size.width / 2));
    CGPoint center = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);

    // Prepare a context and create a color space
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    // Create gradient object from our color space, color components and locations
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colorComponents, locations, 2);

    // Draw a gradient
    CGContextDrawRadialGradient(context, gradient, center, 0.0, center, radius, 0);
    CGContextRestoreGState(context);

    // Release objects
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
}

@end

そして、それをビューに追加します。

UIRadialView *radialView = [[UIRadialView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
radialView.backgroundColor = [UIColor redColor];
[self.view addSubview:radialView];

結果：

Radial gradient view

16
Karlis

Swift 3- @ IBDesignable

KarlisとAlexanderの答えを処理しました。できるだけシンプルにすることを目指しました。色空間と場所（nil）を削除して、グラデーションがデフォルトを使用するようにします。

使い方

ステップ1

ファイルを作成し、次のコードを追加します：import UIKit

@IBDesignable
class RadialGradientView: UIView {

    @IBInspectable var InsideColor: UIColor = UIColor.clear
    @IBInspectable var OutsideColor: UIColor = UIColor.clear

    override func draw(_ rect: CGRect) {
        let colors = [InsideColor.cgColor, OutsideColor.cgColor] as CFArray
        let endRadius = min(frame.width, frame.height) / 2
        let center = CGPoint(x: bounds.size.width / 2, y: bounds.size.height / 2)
        let gradient = CGGradient(colorsSpace: nil, colors: colors, locations: nil)
        UIGraphicsGetCurrentContext()!.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: endRadius, options: CGGradientDrawingOptions.drawsBeforeStartLocation)
    }
}

ステップ2

ストーリーボードで、IDインスペクターでUIViewを上記のRadialGradientViewに設定します。 Custom Class

ステップ3

属性インスペクターでグラデーションの内側の色と外側の色を設定し、ストーリーボードで変更を確認します。 Radial Gradient

（注：ストーリーボードのUIViewを十分に大きくして、全体を埋めるようにしました

15
Mark Moeykens

これがKarlisの答えですSwift 3：

override func draw(_ rect: CGRect) {

    // Setup view
    let colors = [UIColor.white.cgColor, UIColor.black.cgColor] as CFArray
    let locations = [ 0.0, 1.0 ] as [CGFloat]
    let radius = min((self.bounds.size.height / 2), (self.bounds.size.width / 2))
    let center = CGPoint.init(x: self.bounds.size.width / 2, y: self.bounds.size.height / 2)

    // Prepare a context and create a color space
    let context = UIGraphicsGetCurrentContext()
    context!.saveGState()
    let colorSpace = CGColorSpaceCreateDeviceRGB()

    // Create gradient object from our color space, color components and locations
    let gradient = CGGradient.init(colorsSpace: colorSpace, colors: colors, locations: locations)

    // Draw a gradient
    context!.drawRadialGradient(gradient!, startCenter: center, startRadius: 0.0, endCenter: center, endRadius: radius, options: CGGradientDrawingOptions(rawValue: 0))
    context?.restoreGState()
}
6
Alexander

Xamarin.iOSのc＃でのKarlisの回答は次のとおりです。ここでは色を直接指定していますが、もちろんKarlisと同じ方法で実装できます。

public class RadialView : UIView
{
    public RadialView(CGRect rect) : base (rect)
    {
        this.BackgroundColor = UIColor.DarkGray;
    }

    public override void Draw(CGRect rect)
    {
        CGColor[] colorComponents = { UIColor.DarkGray.CGColor, UIColor.LightGray.CGColor };
        var locations = new nfloat[]{ 1, 0 }; 
        var radius = this.Bounds.Size.Height / 2;
        CGPoint center = new CGPoint(this.Bounds.Size.Width / 2, this.Bounds.Size.Height / 2);

        var context = UIGraphics.GetCurrentContext();
        context.SaveState();
        var colorSpace = CGColorSpace.CreateDeviceRGB();

        CGGradient gradient = new CGGradient(colorSpace, colorComponents, locations);
        context.DrawRadialGradient(gradient, center, 0, center, radius, CGGradientDrawingOptions.None);

        context.RestoreState();
        colorSpace.Dispose();
        gradient.Dispose();
    }
}
1
c.lamont.dev