मैं क्रम में एक ढाल रंग पृष्ठभूमि (पारदर्शी करने के लिए एक ठोस रंग) के साथ एक दृश्य उत्पन्न करने की कोशिश कर रहा हूँ। क्या ऐसा करने का कोई तरीका है?
मैं क्रम में एक ढाल रंग पृष्ठभूमि (पारदर्शी करने के लिए एक ठोस रंग) के साथ एक दृश्य उत्पन्न करने की कोशिश कर रहा हूँ। क्या ऐसा करने का कोई तरीका है?
जवाबों:
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
में हल्का प्रदर्शन होता है।
view
करने के लिए self.view
और यह एक आकर्षण की तरह :) काम किया
gradient.frame = view.bounds
में viewDidAppear()
और में didRotateFromInterfaceOrientation()
नहीं तो ढाल ठीक से आकार नहीं किया जाएगा।
आप एक कस्टम वर्ग बना सकते हैं 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
layerClass
अब कोई फ़ंक्शन नहीं है, यह एक संपत्ति है इसलिए आपको इसे एक संपत्ति की तरह ओवरराइड करना होगा: stackoverflow.com/questions/28786597/… । इसके अलावा आपको इसे लागू करना है override init(frame: CGRect)
, इस उत्तर की जांच करें: stackoverflow.com/questions/27374330/… । धन्यवाद!
init(frame:CGRect)
हालांकि ओवरराइड करना होगा । मैंने अद्यतन कोड का परीक्षण किया और यह ठीक काम करता है।
@IBDesignable
इसका उपयोग किया जाता है तो आईबी में रेंडर क्यों नहीं किया गया है?
यह कोशिश करो कि यह मेरे लिए एक आकर्षण की तरह काम करे,
उद्देश्य सी
मैंने आरजीबी ग्रेडिएंट बैकग्राउंड कलर को 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 देखें
आशा है कि यह कुछ के लिए मदद है।
यह मेरा अनुशंसित दृष्टिकोण है।
पुन: प्रयोज्यता को बढ़ावा देने के लिए, मैं कहूंगा कि श्रेणी की 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];
viewDidLoad
viewDidLoad
, तो यह काम नहीं किया अगर ऐप को लैंडस्केप ओरिएंटेशन में लॉन्च किया गया था। मेरा समाधान अन्य झुकाव के लिए क्षतिपूर्ति करने के लिए दृश्य.फ्रेम की तुलना में पृष्ठभूमि परत के फ्रेम को व्यापक बनाना था।
चूँकि मुझे अपने पूरे ऐप में केवल एक प्रकार के ग्रेडिएंट की आवश्यकता थी, इसलिए मैंने 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
एक इनिलाइज़र के समान है। मुझे नहीं लगता कि यह बहुत उपयुक्त है।
स्विफ्ट कार्यान्वयन:
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)
मैंने स्विफ्ट के विस्तार की कार्यक्षमता के साथ-साथ एक एनम का उपयोग करके स्वीकृत उत्तर को थोड़ा बढ़ाया है।
ओह, और यदि आप स्टोरीबोर्ड का उपयोग कर रहे हैं जैसे मैं करता हूं, तो या बाद 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)
}
}
मैंने इसे एक विस्तार के साथ तेजी से लागू किया है:
स्विफ्ट 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)
एक स्विफ्ट दृष्टिकोण
यह उत्तर ऊपर दिए गए उत्तरों को बनाता है और रोटेशन के दौरान ढाल के ठीक से लागू नहीं होने की समस्या से निपटने के लिए कार्यान्वयन प्रदान करता है। यह ग्रेडिएंट लेयर को एक वर्ग में बदलकर इस समस्या को संतुष्ट करता है ताकि सभी दिशाओं में घूमने से एक सही ग्रेडिएंट आए। फ़ंक्शन हस्ताक्षर में एक स्विफ्ट वैरेडिक तर्क शामिल है जो किसी को आवश्यकतानुसार कई 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)
}
तुम जो खोज रहे हो, वह है CAGradientLayer
। प्रत्येक UIView
में एक परत होती है - उस परत में आप सबलेयर्स जोड़ सकते हैं, जैसे कि आप सब-वे जोड़ सकते हैं। एक विशिष्ट प्रकार है CAGradientLayer
, जहां आप इसे बीच में ढालने के लिए रंगों की एक सरणी देते हैं।
एक उदाहरण एक ढाल दृश्य के लिए यह सरल आवरण है:
http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/
ध्यान दें कि आपको UIVIV के सभी परत भागों तक पहुंचने के लिए QuartZCore ढांचे को शामिल करने की आवश्यकता है।
स्विफ्ट 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]
}
}
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])
यूचेन के संस्करण पर आधारित सरल स्विफ्ट दृश्य
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]
मेरा समाधान है कि आसानी 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);
ऊपर के लेयर को अपडेट करने के लिए कॉल करने के लिए इसका एक अच्छा विचार है
viewDidLayoutSubviews
विचारों को सही ढंग से अपडेट करने के लिए
स्विफ्ट 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)
स्विफ्ट 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)
}
}
मैंने अपने कोड में इसे लागू किया है।
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];
अब मैं अपने दृष्टिकोण पर एक ढाल देख सकता हूं।
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)