प्रोग्राम रंग ढाल के साथ एक UIView बनाएँ


292

मैं क्रम में एक ढाल रंग पृष्ठभूमि (पारदर्शी करने के लिए एक ठोस रंग) के साथ एक दृश्य उत्पन्न करने की कोशिश कर रहा हूँ। क्या ऐसा करने का कोई तरीका है?


2
यह एक उपयोगी छोटा उपकरण है जो आपके लिए itunes.apple.com/gb/app/gradient-creator/id1031070259?mt=12
burrGGG

जवाबों:


694

उद्देश्य सी:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
CAGradientLayer *gradient = [CAGradientLayer layer];

gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor blackColor].CGColor];

[view.layer insertSublayer:gradient atIndex:0];

स्विफ्ट:

let view = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 50))
let gradient = CAGradientLayer()

gradient.frame = view.bounds
gradient.colors = [UIColor.white.cgColor, UIColor.black.cgColor]

view.layer.insertSublayer(gradient, at: 0)

जानकारी : ढाल की दिशा बदलने के लिए startPoint और एंडपॉइंट का उपयोग करें ।

इस पर जोड़ा उस किसी भी दृश्य नहीं हैं, तो UIView(जैसे कि एक के रूप में UILabel), तो आप उन की पृष्ठभूमि का रंग की स्थापना पर विचार कर सकते UIView'के लिए है [UIColor clearColor]तो ढाल दृश्य उप विचारों के लिए पृष्ठभूमि रंग के बजाय प्रस्तुत किया है। उपयोग करने clearColorमें हल्का प्रदर्शन होता है।


13
सभी समाधानों में से सबसे कम कोड के लिए +1। मैं सिर्फ अपनी मौजूदा दृश्य नियंत्रक को जोड़ा गया, के लिए 2 refs बदल viewकरने के लिए self.viewऔर यह एक आकर्षण की तरह :) काम किया
एरगिन

4
यह भी प्रासंगिक है कि इस कोड को कहां जोड़ा जाए। मुझे यह काम करने के लिए निम्न पद की आवश्यकता थी: stackoverflow.com/a/200592626/1480518
गैरेट डिस्को

13
इसने मेरी बहुत मदद की! हर जगह CGColor भाग याद किया! धन्यवाद
Gyfis

48
धीरे-धीरे दिशा बदलने के लिए 'startPoint' और 'endPoint' का उपयोग करना न भूलें। डिफ़ॉल्ट मान हैं (0.5, 0) और (0.5,1) - ऊपर से नीचे की दिशा में।
वैलेंटाइन शमरार्डिन

12
जब मेरी UIView autolayout उपयोग कर रहा है, मैं भी कॉल करने के लिए किया था gradient.frame = view.boundsमें viewDidAppear()और में didRotateFromInterfaceOrientation()नहीं तो ढाल ठीक से आकार नहीं किया जाएगा।
EricRobertBrewer

70

आप एक कस्टम वर्ग बना सकते हैं GradientView:

स्विफ्ट 5

class GradientView: UIView {
    override open class var layerClass: AnyClass {
       return CAGradientLayer.classForCoder()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let gradientLayer = layer as! CAGradientLayer
        gradientLayer.colors = [UIColor.white.cgColor, UIColor.black.cgColor]
    }
}

स्टोरीबोर्ड में, वर्ग प्रकार को किसी भी दृश्य पर सेट करें जिसे आप क्रमिक पृष्ठभूमि चाहते हैं:

यहां छवि विवरण दर्ज करें

यह निम्नलिखित तरीकों से बेहतर है:

  • फ़्रेम सेट करने की आवश्यकता नहीं है CLayer
  • NSConstraintहमेशा की तरह उपयोग करेंUIView
  • सबलेयर (कम मेमोरी उपयोग) बनाने की आवश्यकता नहीं है

1
स्विफ्ट 3 पर layerClassअब कोई फ़ंक्शन नहीं है, यह एक संपत्ति है इसलिए आपको इसे एक संपत्ति की तरह ओवरराइड करना होगा: stackoverflow.com/questions/28786597/… । इसके अलावा आपको इसे लागू करना है override init(frame: CGRect), इस उत्तर की जांच करें: stackoverflow.com/questions/27374330/… । धन्यवाद!
लाललूप

नमस्कार @LaloLoop, टिप्पणी के लिए धन्यवाद! मैंने कोड अपडेट कर दिया है। मुझे नहीं लगता कि मुझे init(frame:CGRect)हालांकि ओवरराइड करना होगा । मैंने अद्यतन कोड का परीक्षण किया और यह ठीक काम करता है।
युकेन झोंग सेप

@ यूचेन झोंग यह आईबी में दुर्घटनाग्रस्त है, लेकिन ऐप में काम करता है। यदि @IBDesignableइसका उपयोग किया जाता है तो आईबी में रेंडर क्यों नहीं किया गया है?
अलेक्जेंडर वोल्कोव

@AlexanderVolkov शायद कुछ अन्य मुद्दा? हम स्टोरीबोर्ड में इसका उपयोग कर रहे हैं और हालांकि इसमें कोई समस्या नहीं है। आप अपने स्टोरीबोर्ड को डीबग कर सकते हैं और देख सकते हैं कि कौन सी लाइन दुर्घटनाग्रस्त हो रही है।
युकेन झोंग

1
सबसे अच्छा उपाय !
बारां इमरे

40

यह कोशिश करो कि यह मेरे लिए एक आकर्षण की तरह काम करे,

उद्देश्य सी

मैंने आरजीबी ग्रेडिएंट बैकग्राउंड कलर को UIview में सेट किया है

   UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,35)];
   CAGradientLayer *gradient = [CAGradientLayer layer];
   gradient.frame = view.bounds;
   gradient.startPoint = CGPointZero;
   gradient.endPoint = CGPointMake(1, 1);
   gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:34.0/255.0 green:211/255.0 blue:198/255.0 alpha:1.0] CGColor],(id)[[UIColor colorWithRed:145/255.0 green:72.0/255.0 blue:203/255.0 alpha:1.0] CGColor], nil];
   [view.layer addSublayer:gradient];

यहां छवि विवरण दर्ज करें

अद्यतन: - स्विफ्ट 3 +

कोड : -

 var gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 35))
 let gradientLayer:CAGradientLayer = CAGradientLayer()
 gradientLayer.frame.size = self.gradientView.frame.size
 gradientLayer.colors = 
 [UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor] 
//Use diffrent colors
 gradientView.layer.addSublayer(gradientLayer)

यहां छवि विवरण दर्ज करें

आप ग्रेडिएंट कलर के शुरुआती और अंत बिंदु जोड़ सकते हैं।

  gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
  gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)

यहां छवि विवरण दर्ज करें

अधिक जानकारी के विवरण के लिए CAGradientLayer Doc देखें

आशा है कि यह कुछ के लिए मदद है।


36

यह मेरा अनुशंसित दृष्टिकोण है।

पुन: प्रयोज्यता को बढ़ावा देने के लिए, मैं कहूंगा कि श्रेणी की CAGradientLayerविधियों के रूप में अपने वांछित ग्रेडिएंट को जोड़ें और बनाएं । उन्हें headerइस तरह फ़ाइल में निर्दिष्ट करें :

#import <QuartzCore/QuartzCore.h>

@interface CAGradientLayer (SJSGradients)

+ (CAGradientLayer *)redGradientLayer;
+ (CAGradientLayer *)blueGradientLayer;
+ (CAGradientLayer *)turquoiseGradientLayer;
+ (CAGradientLayer *)flavescentGradientLayer;
+ (CAGradientLayer *)whiteGradientLayer;
+ (CAGradientLayer *)chocolateGradientLayer;
+ (CAGradientLayer *)tangerineGradientLayer;
+ (CAGradientLayer *)pastelBlueGradientLayer;
+ (CAGradientLayer *)yellowGradientLayer;
+ (CAGradientLayer *)purpleGradientLayer;
+ (CAGradientLayer *)greenGradientLayer;

@end

फिर अपनी कार्यान्वयन फ़ाइल में, इस सिंटैक्स के साथ प्रत्येक ढाल निर्दिष्ट करें:

+ (CAGradientLayer *)flavescentGradientLayer
{
    UIColor *topColor = [UIColor colorWithRed:1 green:0.92 blue:0.56 alpha:1];
    UIColor *bottomColor = [UIColor colorWithRed:0.18 green:0.18 blue:0.18 alpha:1];

    NSArray *gradientColors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
    NSArray *gradientLocations = [NSArray arrayWithObjects:[NSNumber numberWithInt:0.0],[NSNumber numberWithInt:1.0], nil];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = gradientColors;
    gradientLayer.locations = gradientLocations;

    return gradientLayer;
}

तो बस इस श्रेणी को अपने ViewControllerया किसी अन्य आवश्यक में आयात करें subclass, और इसे इस तरह उपयोग करें:

CAGradientLayer *backgroundLayer = [CAGradientLayer purpleGradientLayer];
backgroundLayer.frame = self.view.frame;
[self.view.layer insertSublayer:backgroundLayer atIndex:0];

आपको इसे उपयोग करने के लिए कोड कहां रखना चाहिए? क्या जीवन पद्धति है? viewdappappear यह एक दूसरे को बहुत देर से प्रकट होता है। viewdidload और viewdidappear इसे घुमाते समय काम नहीं करने का कारण बनता है। Viewdidlayoutsubviews रोटेशन के लिए बेहतर काम करता है, लेकिन फिर भी थोड़ा तड़का हुआ लगता है।
एडम जॉन्स

मैं व्यक्तिगत रूप से में रखviewDidLoad
सैम फिशर

1
जब मैंने इसे डाला viewDidLoad, तो यह काम नहीं किया अगर ऐप को लैंडस्केप ओरिएंटेशन में लॉन्च किया गया था। मेरा समाधान अन्य झुकाव के लिए क्षतिपूर्ति करने के लिए दृश्य.फ्रेम की तुलना में पृष्ठभूमि परत के फ्रेम को व्यापक बनाना था।
एडम जॉन्स

2
viewDidLoad काम करता है, आपको बस [बैकग्राउंडर setAutoresizingMask: UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleeeight] का उपयोग करके AutoResizingMask भी सेट करना होगा;
ekscrypto

21

चूँकि मुझे अपने पूरे ऐप में केवल एक प्रकार के ग्रेडिएंट की आवश्यकता थी, इसलिए मैंने UIView का एक उपवर्ग बनाया और निश्चित रंगों के साथ आरंभीकरण पर ग्रेडिएंट लेयर को पूर्वनिर्मित किया। यूआईवीवाई के शुरुआती लोग कॉन्फ़िगरग्रैडिएंटलाइयर -मैथोड को कॉल करते हैं , जो कैग्रैडिएंटलाइयर को कॉन्फ़िगर करता है:

DDGradientView.h:

#import <UIKit/UIKit.h>

@interface DDGradientView : UIView {

}
@end

DDGradientView.m:

#import "DDGradientView.h"

@implementation DDGradientView

// Change the views layer class to CAGradientLayer class
+ (Class)layerClass
{
    return [CAGradientLayer class];
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if(self) {
        [self configureGradientLayer];
    }
    return self;
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self) {
        [self configureGradientLayer];
    }
    return self;
}

// Make custom configuration of your gradient here   
- (void)configureGradientLayer {
    CAGradientLayer *gLayer = (CAGradientLayer *)self.layer;
    gLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor lightGrayColor] CGColor], nil];
}
@end

विधि का नाम initGradientLayerएक इनिलाइज़र के समान है। मुझे नहीं लगता कि यह बहुत उपयुक्त है।
डॉनसॉन्ग

@DawnSong अच्छा बिंदु, मैंने इसे 'कॉन्फ़िगरग्रेडिएंटलेयर' में बदल दिया।
blauzahn

12

स्विफ्ट कार्यान्वयन:

var gradientLayerView: UIView = UIView(frame: CGRectMake(0, 0, view.bounds.width, 50))
var gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = gradientLayerView.bounds
gradient.colors = [UIColor.grayColor().CGColor, UIColor.clearColor().CGColor]
gradientLayerView.layer.insertSublayer(gradient, atIndex: 0)
self.view.layer.insertSublayer(gradientLayerView.layer, atIndex: 0)

11

मैंने स्विफ्ट के विस्तार की कार्यक्षमता के साथ-साथ एक एनम का उपयोग करके स्वीकृत उत्तर को थोड़ा बढ़ाया है।

ओह, और यदि आप स्टोरीबोर्ड का उपयोग कर रहे हैं जैसे मैं करता हूं, तो या बाद gradientBackground(from:to:direction:)में कॉल करना सुनिश्चित करें viewDidLayoutSubviews()

स्विफ्ट 3

enum GradientDirection {
    case leftToRight
    case rightToLeft
    case topToBottom
    case bottomToTop
}

extension UIView {
    func gradientBackground(from color1: UIColor, to color2: UIColor, direction: GradientDirection) {
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = [color1.cgColor, color2.cgColor]

        switch direction {
        case .leftToRight:
            gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        case .rightToLeft:
            gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
            gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
        case .bottomToTop:
            gradient.startPoint = CGPoint(x: 0.5, y: 1.0)
            gradient.endPoint = CGPoint(x: 0.5, y: 0.0)
        default:
            break
        }

        self.layer.insertSublayer(gradient, at: 0)
    }
}

10

मैंने इसे एक विस्तार के साथ तेजी से लागू किया है:

स्विफ्ट 3

extension UIView {
    func addGradientWithColor(color: UIColor) {
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = [UIColor.clear.cgColor, color.cgColor]

        self.layer.insertSublayer(gradient, at: 0)
    }
}

स्विफ्ट 2.2

extension UIView {
    func addGradientWithColor(color: UIColor) {
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.colors = [UIColor.clearColor().CGColor, color.CGColor]

        self.layer.insertSublayer(gradient, atIndex: 0)
    }
}

नहीं, मैं इस तरह से हर दृश्य पर एक ग्रेडिएंट सेट कर सकता हूं:

myImageView.addGradientWithColor(UIColor.blue)

Swift3 कॉल की तरह होना चाहिए: myImageView.addGradientWithColor (रंग: UIColor.blue)
mgyky

8

एक स्विफ्ट दृष्टिकोण

यह उत्तर ऊपर दिए गए उत्तरों को बनाता है और रोटेशन के दौरान ढाल के ठीक से लागू नहीं होने की समस्या से निपटने के लिए कार्यान्वयन प्रदान करता है। यह ग्रेडिएंट लेयर को एक वर्ग में बदलकर इस समस्या को संतुष्ट करता है ताकि सभी दिशाओं में घूमने से एक सही ग्रेडिएंट आए। फ़ंक्शन हस्ताक्षर में एक स्विफ्ट वैरेडिक तर्क शामिल है जो किसी को आवश्यकतानुसार कई CGColorRef's (CGColor) पास करने की अनुमति देता है (नमूना उपयोग देखें)। साथ ही प्रदान की गई एक स्विफ्ट एक्सटेंशन के रूप में एक उदाहरण है ताकि कोई भी यूआईवीवाई के लिए एक ढाल लागू कर सके।

   func configureGradientBackground(colors:CGColorRef...){

        let gradient: CAGradientLayer = CAGradientLayer()
        let maxWidth = max(self.view.bounds.size.height,self.view.bounds.size.width)
        let squareFrame = CGRect(origin: self.view.bounds.origin, size: CGSizeMake(maxWidth, maxWidth))
        gradient.frame = squareFrame

        gradient.colors = colors
        view.layer.insertSublayer(gradient, atIndex: 0)
    }

काम में लाना:

व्यूडीडलड में ...

  override func viewDidLoad() {
        super.viewDidLoad()
        configureGradientBackground(UIColor.redColor().CGColor, UIColor.whiteColor().CGColor)
  }

विस्तार कार्यान्वयन

extension CALayer {


    func configureGradientBackground(colors:CGColorRef...){

        let gradient = CAGradientLayer()

        let maxWidth = max(self.bounds.size.height,self.bounds.size.width)
        let squareFrame = CGRect(origin: self.bounds.origin, size: CGSizeMake(maxWidth, maxWidth))
        gradient.frame = squareFrame

        gradient.colors = colors

        self.insertSublayer(gradient, atIndex: 0)
    }

}

एक्सटेंशन उपयोग-केस उदाहरण:

 override func viewDidLoad() {
        super.viewDidLoad()

        self.view.layer.configureGradientBackground(UIColor.purpleColor().CGColor, UIColor.blueColor().CGColor, UIColor.whiteColor().CGColor)
 }

जिसका अर्थ है कि ढाल पृष्ठभूमि अब किसी भी UIControl पर लागू की जा सकती है क्योंकि सभी नियंत्रण UIViews (या एक उपवर्ग) हैं और सभी UIView में CALayers हैं।

स्विफ्ट 4

विस्तार कार्यान्वयन

extension CALayer {
    public func configureGradientBackground(_ colors:CGColor...){

        let gradient = CAGradientLayer()

        let maxWidth = max(self.bounds.size.height,self.bounds.size.width)
        let squareFrame = CGRect(origin: self.bounds.origin, size: CGSize(width: maxWidth, height: maxWidth))
        gradient.frame = squareFrame

        gradient.colors = colors

        self.insertSublayer(gradient, at: 0)
    }    
}

एक्सटेंशन उपयोग-केस उदाहरण:

override func viewDidLoad() {
    super.viewDidLoad()

    self.view.layer.configureGradientBackground(UIColor.purple.cgColor, UIColor.blue.cgColor, UIColor.white.cgColor)
}

5

तुम जो खोज रहे हो, वह है CAGradientLayer। प्रत्येक UIViewमें एक परत होती है - उस परत में आप सबलेयर्स जोड़ सकते हैं, जैसे कि आप सब-वे जोड़ सकते हैं। एक विशिष्ट प्रकार है CAGradientLayer, जहां आप इसे बीच में ढालने के लिए रंगों की एक सरणी देते हैं।

एक उदाहरण एक ढाल दृश्य के लिए यह सरल आवरण है:

http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/

ध्यान दें कि आपको UIVIV के सभी परत भागों तक पहुंचने के लिए QuartZCore ढांचे को शामिल करने की आवश्यकता है।


4

स्विफ्ट 4:

आईबी में ढाल को सही ढंग से दिखाता है:

@IBDesignable public class GradientView: UIView {

    override open class var layerClass: AnyClass {
        return CAGradientLayer.classForCoder()
    }

    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        configureGradientLayer()
    }

    public override init(frame: CGRect) {
        super.init(frame: frame)
        configureGradientLayer()
    }

    func configureGradientLayer() {
        let gradientLayer = layer as! CAGradientLayer
        gradientLayer.colors = [UIColor(hex: 0x003399).cgColor, UIColor(hex: 0x00297b).cgColor]
    }
}

4
extension UIView {

    func applyGradient(isVertical: Bool, colorArray: [UIColor]) {
        if let sublayers = layer.sublayers {
            sublayers.filter({ $0 is CAGradientLayer }).forEach({ $0.removeFromSuperlayer() })
        }

        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = colorArray.map({ $0.cgColor })
        if isVertical {
            //top to bottom
            gradientLayer.locations = [0.0, 1.0]
        } else {
            //left to right
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        }

        backgroundColor = .clear
        gradientLayer.frame = bounds
        layer.insertSublayer(gradientLayer, at: 0)
    }

}

उपयोग

someView.applyGradient(isVertical: true, colorArray: [.green, .blue])

3

यूचेन के संस्करण पर आधारित सरल स्विफ्ट दृश्य

class GradientView: UIView {
    override class func layerClass() -> AnyClass { return CAGradientLayer.self }

    lazy var gradientLayer: CAGradientLayer = {
        return self.layer as! CAGradientLayer
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

}

फिर आप इस तरह के प्रारंभ के बाद gradientLayer का उपयोग कर सकते हैं ...

someView.gradientLayer.colors = [UIColor.whiteColor().CGColor, UIColor.blackColor().CGColor]

3

मेरा समाधान है कि आसानी UIViewसे CAGradientLayerसुलभ संपत्ति के साथ उपवर्ग का निर्माण किया जाए । यह आपको अपनी ढाल को अनुकूलित करने की अनुमति देगा कि आप कैसे चाहते हैं और आपको अपने आप को लेआउट परिवर्तनों को संभालने की आवश्यकता नहीं है। उपवर्ग कार्यान्वयन:

@interface GradientView : UIView

@property (nonatomic, readonly) CAGradientLayer *gradientLayer;

@end

@implementation GradientView

+ (Class)layerClass
{
    return [CAGradientLayer class];
}

- (CAGradientLayer *)gradientLayer
{
    return (CAGradientLayer *)self.layer;
}

@end

उपयोग:

self.iconBackground = [GradientView new];
[self.background addSubview:self.iconBackground];
self.iconBackground.gradientLayer.colors = @[(id)[UIColor blackColor].CGColor, (id)[UIColor whiteColor].CGColor];
self.iconBackground.gradientLayer.startPoint = CGPointMake(1.0f, 1.0f);
self.iconBackground.gradientLayer.endPoint = CGPointMake(0.0f, 0.0f);

3

ऊपर के लेयर को अपडेट करने के लिए कॉल करने के लिए इसका एक अच्छा विचार है

viewDidLayoutSubviews

विचारों को सही ढंग से अपडेट करने के लिए


2

स्विफ्ट 3

अपने दृष्टिकोण पर एक ढाल परत जोड़ने के लिए

  • अपने दृश्य आउटलेट को बांधें

    @IBOutlet var YOURVIEW : UIView!
  • CAGradientLayer को परिभाषित करें ()

    var gradient = CAGradientLayer()
  • यहाँ कोड आपको अपने viewDidLoad में लिखना है

    YOURVIEW.layoutIfNeeded()

    gradient.startPoint = CGPoint(x: CGFloat(0), y: CGFloat(1)) gradient.endPoint = CGPoint(x: CGFloat(1), y: CGFloat(0)) gradient.frame = YOURVIEW.bounds gradient.colors = [UIColor.red.cgColor, UIColor.green.cgColor] gradient.colors = [ UIColor(red: 255.0/255.0, green: 56.0/255.0, blue: 224.0/255.0, alpha: 1.0).cgColor,UIColor(red: 86.0/255.0, green: 13.0/255.0, blue: 232.0/255.0, alpha: 1.0).cgColor,UIColor(red: 16.0/255.0, green: 173.0/255.0, blue: 245.0/255.0, alpha: 1.0).cgColor] gradient.locations = [0.0 ,0.6 ,1.0] YOURVIEW.layer.insertSublayer(gradient, at: 0)


1
मैंने इस दृष्टिकोण का उपयोग किया, अपने दृश्य के लिए "इबाउटलेट" के नाम के लिए "टॉपव्यू" को बदल दिया। मैंने "SearchView" लाइन को हटा दिया।
जेसी

अच्छी योजना - शायद यह भी ध्यान दें कि आप ढाल के किसी भी उपयोग कर सकते हैं। रंग सेट अप। इसलिए, यदि आप यूआई रंगों का उपयोग करते हुए सरल ढाल लिखते हैं। छवि समान है, लेकिन यदि आप दूसरे को टिप्पणी करते हैं, तो रंग ढाल फिर लाल से हरे पर निर्भर है। उपयोगकर्ता एक कर सकते हैं।
जेसी

1

स्विफ्ट 3.1 में मैंने इस एक्सटेंशन को UIView में जोड़ा है

import Foundation
import UIKit
import CoreGraphics


extension UIView {
    func gradientOfView(withColours: UIColor...) {

        var cgColours = [CGColor]()

        for colour in withColours {
            cgColours.append(colour.cgColor)
        }
        let grad = CAGradientLayer()
        grad.frame = self.bounds
        grad.colors = cgColours
        self.layer.insertSublayer(grad, at: 0)
    }
}

जिसे मैं फिर फोन करता हूं

    class OverviewVC: UIViewController {

        override func viewDidLoad() {
            super.viewDidLoad()

            self.view.gradientOfView(withColours: UIColor.red,UIColor.green, UIColor.blue)

        }
}

0

मैंने अपने कोड में इसे लागू किया है।

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.view.frame.size.width, 31.0f)];
view1.backgroundColor = [UIColor clearColor];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view1.bounds;
UIColor *topColor = [UIColor colorWithRed:132.0/255.0 green:222.0/255.0 blue:109.0/255.0 alpha:1.0];
UIColor *bottomColor = [UIColor colorWithRed:31.0/255.0 green:150.0/255.0 blue:99.0/255.0 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];


[view1.layer insertSublayer:gradient atIndex:0];

अब मैं अपने दृष्टिकोण पर एक ढाल देख सकता हूं।


0

UIView को ढाल रंग देने के लिए (तेजी से 4.2)

func makeGradientLayer(`for` object : UIView, startPoint : CGPoint, endPoint : CGPoint, gradientColors : [Any]) -> CAGradientLayer {
        let gradient: CAGradientLayer = CAGradientLayer()
        gradient.colors = gradientColors
        gradient.locations = [0.0 , 1.0]
        gradient.startPoint = startPoint
        gradient.endPoint = endPoint
        gradient.frame = CGRect(x: 0, y: 0, w: object.frame.size.width, h: object.frame.size.height)
        return gradient
    }

कैसे इस्तेमाल करे

let start : CGPoint = CGPoint(x: 0.0, y: 1.0)
let end : CGPoint = CGPoint(x: 1.0, y: 1.0)

let gradient: CAGradientLayer = makeGradientLayer(for: cell, startPoint: start, endPoint: end, gradientColors: [
                    UIColor(red:0.92, green:0.07, blue:0.4, alpha:1).cgColor,
                    UIColor(red:0.93, green:0.11, blue:0.14, alpha:1).cgColor
                    ])

self.vwTemp.layer.insertSublayer(gradient, at: 0)
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.