iOS
XIB फ़ाइलों से कस्टम UIViews

टिप्पणियों

तारों वाले तत्व

एक XIB फ़ाइल बनाएँ

Xcode मेनू बार> फ़ाइल> नया> फ़ाइल।
IOS, यूजर इंटरफेस और फिर "व्यू" चुनें:

अपने XIB को एक नाम दें (हाँ, हम एक Pokemon उदाहरण name कर रहे हैं)।
अपने लक्ष्य की जांच करना और "क्रिएट" करना याद रखें ।

अपना दृष्टिकोण डिजाइन करें

चीजों को आसान बनाने के लिए, सेट करें:

• आकार: मुक्त
• स्टेटस बार: कोई नहीं
• शीर्ष बार: कोई नहीं
• निचला बार: कोई नहीं

आकार निरीक्षक पर क्लिक करें और दृश्य का आकार बदलें।
इस उदाहरण के लिए हम चौड़ाई 321 और ऊंचाई 256 का उपयोग करेंगे।

नीचे दिखाए गए जैसे कुछ तत्वों को अपनी XIB फ़ाइल में छोड़ें।
यहां हम एक इमेज व्यू (256x256) और एक स्विच जोड़ेंगे।

"सभी दृश्य" के तहत "ऑटो लेआउट मुद्दों को हल करें" (नीचे-दाएं) पर क्लिक करके और "मिस की कमी को जोड़ें" का चयन करके ऑटो-लेआउट बाधाओं को जोड़ें।

"सहायक संपादक दिखाएँ" (शीर्ष-दाएं) पर क्लिक करके आपके द्वारा किए गए परिवर्तनों का पूर्वावलोकन करें, फिर "पूर्वावलोकन" करें।
आप "प्लस" बटन पर क्लिक करके iPhone स्क्रीन जोड़ सकते हैं।
पूर्वावलोकन इस तरह दिखना चाहिए:

उपवर्ग UIView

XIB फ़ाइल को प्रबंधित करने जा रहा वर्ग बनाएँ।
Xcode मेनू बार> फ़ाइल> नया> फ़ाइल।
IOS / Source / कोको टच क्लास का चयन करें। "अगला" मारो।

कक्षा को एक नाम दें, जो XIB फ़ाइल (Pokemon) के समान नाम होना चाहिए।
उपवर्ग प्रकार के रूप में UIView का चयन करें, फिर "अगला" दबाएं।

अगली विंडो पर, अपना लक्ष्य चुनें और "बनाएँ" पर हिट करें।

"फ़ाइल का स्वामी" विशेषता के माध्यम से Pokemon.xib को Pokemon.xift से कनेक्ट करें

Xcode में Pokemon.xib फाइल पर क्लिक करें।
"फ़ाइल का स्वामी" आउटलेट पर क्लिक करें।
"पहचान निरीक्षक" (शीर्ष-दाएं) पर, कक्षा को हमारी हाल ही में बनाई गई Pokemon.swift फ़ाइल पर सेट करें।

Pokemons !!!

हाँ! हमारे "बुनियादी ढांचे" को खत्म करने के लिए कुछ पोकेमॉन को अपनी परियोजना में खींचें और छोड़ें।
यहां हम दो PGN फाइलें, 256x256, पारदर्शी जोड़ रहे हैं।

मुझे पहले से ही कोड दिखाएं।

ठीक है ठीक है।
हमारे Pokemon.swift वर्ग में कुछ कोड जोड़ने का समय।

यह वास्तव में बहुत आसान है:

1. आवश्यक इनिशियलाइज़र लागू करें
2. XIB फ़ाइल लोड करें
3. उस दृश्य को कॉन्फ़िगर करें जो XIB फ़ाइल प्रदर्शित करेगा
4. उपरोक्त दृश्य दिखाएं

निम्नलिखित कोड को Pokemon.swift वर्ग में जोड़ें:

import UIKit

class Pokemon: UIView {
    
    // MARK: - Initializers
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    // MARK: - Private Helper Methods
    
    // Performs the initial setup.
    private func setupView() {
        let view = viewFromNibForClass()
        view.frame = bounds

        // Auto-layout stuff.
        view.autoresizingMask = [
            UIViewAutoresizing.flexibleWidth,
            UIViewAutoresizing.flexibleHeight
        ]

        // Show the view.
        addSubview(view)
    }
    
    // Loads a XIB file into a view and returns this view.
    private func viewFromNibForClass() -> UIView {
        
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        /* Usage for swift < 3.x
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        */

        return view
    }
}

@IBDesignable और @IBInspectable

अपनी कक्षा में @IBDesignable को जोड़कर, आप इसे इंटरफ़ेस बिल्डर में लाइव-रेंडर करने के लिए संभव बनाते हैं।
अपनी कक्षा के गुणों में @IBInspectable को शामिल करके, आप जैसे ही आप इन गुणों को संशोधित करते हैं, आप इंटरफ़ेस बिल्डर में अपने कस्टम दृश्य बदल सकते हैं।

आइए हमारे कस्टम व्यू "इंस्पेक्टेबल" की Image View ।

सबसे पहले, Pokemon.xib फ़ाइल से Pokemon.swift क्लास में Image View को हुक करें।

आउटलेट imageView कॉल करें और फिर निम्न कोड जोड़ें (वर्ग नाम से पहले @IBDesignable नोटिस करें):

@IBDesignable class Pokemon: UIView {
    
    // MARK: - Properties
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBInspectable var image: UIImage? {
        get {
            return imageView.image
        }
        set(image) {
            imageView.image = image
        }
    }

    // MARK: - Initializers
    ...

अपने कस्टम दृश्य का उपयोग करना

आपकी मुख्य स्टोरीबोर्ड फ़ाइल के लिए मिला, इसमें एक UIView खींचें।
200x200 कहने के लिए दृश्य का आकार बदलें। केंद्रस्थ।
आइडेंटिटी इंस्पेक्टर (टॉप-राइट) पर जाएं और क्लास को पोकेमॉन पर सेट करें।

एक @IBInspectable का चयन करने के लिए, @IBInspectable इंस्पेक्टर (शीर्ष-दाएं) पर जाएं और पहले से भयानक @IBInspectable छवि संपत्ति का उपयोग करके आपके द्वारा जोड़ी गई एक @IBInspectable छवियों का चयन करें।

अब अपने कस्टम Pokemon दृश्य की नकल करें।
इसे एक अलग आकार दें, 150x150 कहें।
एक और नि छवि चुनें, निरीक्षण करें:

अब हम उस स्व-युक्त कस्टम UI तत्व में और अधिक तर्क जोड़ने जा रहे हैं।
बटन पोकेमॉन को सक्षम / अक्षम करने की अनुमति देगा।

स्विच बटन से Pokemon.swift वर्ग में एक IBAction बनाएं।
switchTapped जैसी क्रिया को कॉल करें।
इसमें निम्न कोड जोड़ें:

// MARK: - Actions

@IBAction func switchTapped(sender: UISwitch) {
    imageView.alpha = sender.on ? 1.0 : 0.2
}

// MARK: - Initializers
...

अंतिम परिणाम:

आप कर चुके हैं!
अब आप जटिल कस्टम दृश्य बना सकते हैं और उन्हें कहीं भी उपयोग कर सकते हैं।
यह कोड को स्व-निहित यूआई तत्वों में अलग करते हुए उत्पादकता बढ़ाएगा।

अंतिम परियोजना गितुब में क्लोन की जा सकती है।
( स्विफ्ट 3.1 का अद्यतन )

XIB का उपयोग करके कस्टम पुन: प्रयोज्य UIView कैसे बनाएं

निम्नलिखित उदाहरण से पता चलता है कि XIB से किसी दृश्य को शुरू करने में शामिल कदम।

यह एक जटिल ऑपरेशन नहीं है, लेकिन अपवादों से बचते हुए, इसे पहली बार सही तरीके से करने के लिए सटीक चरणों का पालन करने की आवश्यकता है।

लोडनेम कैसे काम करता है

मुख्य चरण हैं:

1. XIB बनाएं
2. वर्ग .h और .m बनाएँ
3. .H में आउटलेट को परिभाषित करें
4. .H और XIB के बीच आउटलेट कनेक्ट करें

संलग्न स्क्रीनशॉट देखें:

5. .M फ़ाइल के initWithCoder फ़ंक्शन के अंदर loadNibNamed का आह्वान करें। यह सुनिश्चित करने की आवश्यकता है कि आप सीधे UIView ऑब्जेक्ट को स्टोरीबोर्ड / पेरेंट UIView XIB फ़ाइल में रख सकते हैं और इसे आपके कस्टम दृश्य के रूप में परिभाषित कर सकते हैं। स्टोरीबोर्ड / पैरेंट XIB को लोड करने के बाद किसी अन्य इनिशियलाइज़ेशन कोड की आवश्यकता नहीं होती है। आपके कस्टम दृश्य को अन्य विचारों की तरह ही जोड़ा जा सकता है जैसे कि XCode में दी गई अन्य अंतर्निहित ऑब्जेक्टिव सी व्यू ऑब्जेक्ट।