2012-06-01 13 views
30

आईओएस पर मनमाने ढंग से UIView को देखते हुए, क्या कोर ग्राफिक्स (CAGradientLayer दिमाग में आता है) का उपयोग करने के लिए एक "अग्रभूमि पारदर्शी" ढाल लागू करने का कोई तरीका है?UIView पारदर्शी ढाल

मैं मानक CAGradientLayer का उपयोग नहीं कर सकता क्योंकि पृष्ठभूमि UIColor से अधिक जटिल है। मैं एक पीएनजी ओवरले नहीं कर सकता क्योंकि पृष्ठभूमि बदल जाएगी क्योंकि मेरा सबव्यू इसके मूल वर्टिकल स्क्रॉलव्यू (छवि देखें) के साथ स्क्रॉल किया गया है।

मेरे पास एक गैर-सुरुचिपूर्ण फॉलबैक है: मेरे यूवीव्यू को इसके सबव्यूव्स क्लिप करें और बैकग्राउंड स्क्रॉलव्यू स्क्रॉल होने के बाद पृष्ठभूमि के प्री-रेंडर ग्रेडिएंट पीएनजी को ले जाएं।

transparent uiview gradient problem

+0

पृष्ठभूमि क्या है? स्क्रॉल व्यू स्क्रॉल के रूप में यह "परिवर्तन" कैसे करता है? –

उत्तर

88

यह एक शर्मनाक रूप से आसान फिक्स था: मेरे सबव्यू के मुखौटा के रूप में एक CAGradientLayer लागू करें।

CAGradientLayer *gradientLayer = [CAGradientLayer layer]; 
gradientLayer.frame = _fileTypeScrollView.bounds; 
gradientLayer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor, nil]; 
gradientLayer.startPoint = CGPointMake(0.8f, 1.0f); 
gradientLayer.endPoint = CGPointMake(1.0f, 1.0f); 
_fileTypeScrollView.layer.mask = gradientLayer; 

सही दिशा में मुझे इंगित करने के लिए Cocoanetics पर धन्यवाद!

+6

मैंने इस कोड का उपयोग एक समान क्षैतिज UIScrollView में ढाल जोड़ने के लिए किया था।यह सब अच्छा लगता है, लेकिन जब आप वास्तव में स्क्रॉल करते हैं- दाईं ओर आने वाले विचार पारदर्शी होते हैं। ऐसा लगता है जैसे ढाल स्क्रॉलव्यू पर बैठे वास्तविक विचारों पर लागू होता है और न कि उनके ऊपर एक परत के रूप में। मैं क्या गलत कर रहा हूं? –

+0

यह सही जवाब है! – Yariv

+0

इस कोड पर मुकदमा करने वाला लंबवत ढाल कैसे बनाएं? –

0

मैं यह कहना नफरत है, लेकिन मुझे लगता है कि आप कस्टम UIView भूमि में कर रहे हैं। मुझे लगता है कि मैं drawRect दिनचर्या से अधिक एक कस्टम UIView में इसे लागू करने की कोशिश करता हूं।

इसके साथ, आप उस दृश्य को देख सकते हैं, अपने वास्तविक स्क्रॉलव्यू के शीर्ष पर रखें, और अपने ढाल दृश्य (यदि आप करेंगे) "टच-ऑन" सभी स्पर्श ईवेंट (यानी पहले उत्तरदाता को छोड़ दें)।

2

Gradient Example

मैं सिर्फ एक ही मुद्दे में भाग गया और अपने ही वर्ग लेखन को बंद कर। यह गंभीर ओवरकिल की तरह लगता है, लेकिन यह एकमात्र तरीका था जिसे मैं पारदर्शिता के साथ ग्रेडियेंट करने के लिए पा सकता था। आप मेरे writeup and code example here

देख सकते हैं यह मूल रूप से एक कस्टम UIView पर आता है जो दो छवियां बनाता है। एक ठोस रंग है, दूसरा एक ढाल है जिसे छवि मास्क के रूप में उपयोग किया जाता है। वहां से मैंने परिणामस्वरूप छवि को uiview.layer.content पर लागू किया।

मुझे आशा है कि यह मदद करता है, जो

1

यह मैं कैसे करना होगा।

चरण 1 एक कस्टम ढाल दृश्य (स्विफ्ट 4) को परिभाषित करें:

import UIKit 

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

    required init?(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
     let gradientLayer = self.layer as! CAGradientLayer 
     gradientLayer.colors = [ 
      UIColor.white.cgColor, 
      UIColor.init(white: 1, alpha: 0).cgColor 
     ] 
     backgroundColor = UIColor.clear 
    } 
} 

चरण 2 - खींचें और अपने स्टोरीबोर्ड में एक UIView ड्रॉप और GradientView

enter image description here करने के लिए अपने कस्टम वर्ग सेट

उदाहरण के तौर पर, उपरोक्त ढाल दृश्य इस तरह दिखता है:


https://github.com/yzhong52/GradientViewDemo

+0

मेरे साथ काम नहीं किया – Elsammak

+0

@Elsammak मुझे लगता है कि ऐसा इसलिए है क्योंकि आप साफ़ करने के लिए UIview का पृष्ठभूमि रंग सेट नहीं किया था। विस्तार के लिए स्माइली कैरिलो के संपादन देखें। –

+1

यह वास्तव में काम करता है। धन्यवाद। – kkazakov