UIView को मुखौटा और गोल कोनों को देने के लिए स्टोरीबोर्ड का उपयोग करें?


100

इस तरह के बहुत सारे प्रश्न बताते हैं कि कैसे प्रोग्रामेटिक रूप से एक मास्क बनाएं और एक UIView को गोल कोनों प्रदान करें।

क्या स्टोरीबोर्ड के भीतर यह सब करने का कोई तरीका है? सिर्फ इसलिए पूछ रहा हूं क्योंकि ऐसा लगता है कि स्टोरीबोर्ड में गोल कोनों को बनाना प्रस्तुति और तर्क के बीच एक स्पष्ट सीमांकन है।


जवाबों:


264

हां, मैं इसका उपयोग करता हूं लेकिन इस तरह का सवाल पहले ही कई बार जवाब दे चुका था।

लेकिन वैसे भी इंटरफ़ेस बिल्डर में। आपको इस तरह यूजर डिफाइंड रनटाइम अटेंडेंस जोड़ने की जरूरत है:

layer.masksToBounds Boolean YES
layer.cornerRadius Number {View's Width/2}

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

और सक्षम करें

Clips subviews

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

परिणाम:

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


मैं उपयोगकर्ता परिभाषित रनटाइम विशेषताओं को कहां जोड़ सकता हूं?
हेंसन फेंग

जैसा कि मैंने पहले चित्र का चयन दृश्य में दिखाया है, फिर दाहिने फलक पर तीसरे आइकन का चयन करें उपयोगकर्ता परिभाषित रनटाइम एट्रिब्यूट्स कुंजी पथ, प्रकार, मान जोड़ने के लिए नीचे दिए गए आइटम पर क्लिक करें
वॉरफोट चोकरत्नसोम्बैट

1
क्या आप सीमा त्रिज्या को गतिशील बना सकते हैं ताकि यह हमेशा चौड़ाई का 50% हो या इसे स्थिर पूर्णांक होने की आवश्यकता है?
क्रैशलॉट

1
जहाँ तक मुझे पता है, केवल निश्चित मूल्य।
वरफोट चोकरत्नसोमबट

1
सिर्फ FYI करें, अगर मेरी तरह आप यहां सोच कर आए तो यह LaunchScreen.storyboard पर काम करेगा, ऐसा नहीं है। आपको मिलेगा: Error: Launch screens may not use user defined runtime attributes. ऐसा लगता है कि यदि आपको लॉन्चस्क्रीन पर गोल छवि की आवश्यकता है, तो आप विकल्पों से बाहर हैं।
कोड नॉक्स

22

आप इसे उपयोगकर्ता-परिभाषित गुणों का उपयोग करके स्टोरीबोर्ड में कर सकते हैं। उस दृश्य का चयन करें, जिसे आप उसकी पहचान इंस्पेक्टर को गोल और खोलना चाहते हैं। में उपयोगकर्ता निर्धारित क्रम गुण अनुभाग, निम्नलिखित दो प्रविष्टियों जोड़ें:

  • मुख्य पथ:, layer.cornerRadiusप्रकार: संख्या, मान: (जो भी त्रिज्या आपको चाहिए)
  • मुख्य पथ: layer.masksToBoundsप्रकार: बूलियन, मान: जाँच की गई

आपको QuartzKitअपने दृश्य के संबंधित वर्ग फ़ाइल (यदि कोई है) में आयात करना पड़ सकता है , लेकिन मैं कसम खाता हूं कि मैंने इसे बिना काम किए इसे प्राप्त कर लिया है। आपके परिणाम भिन्न हो सकते हैं।

EDIT: एक गतिशील त्रिज्या का उदाहरण

extension UIView {

    /// The ratio (from 0.0 to 1.0, inclusive) of the view's corner radius
    /// to its width. For example, a 50% radius would be specified with
    /// `cornerRadiusRatio = 0.5`.
    @IBDesignable public var cornerRadiusRatio: CGFloat {
        get {
            return layer.cornerRadius / frame.width
        }

        set {
            // Make sure that it's between 0.0 and 1.0. If not, restrict it
            // to that range.
            let normalizedRatio = max(0.0, min(1.0, newValue))
            layer.cornerRadius = frame.width * normalizedRatio
        }
    }

}

मैंने सत्यापित किया कि यह एक खेल के मैदान में काम करता है।


1
क्या आप सीमा त्रिज्या को गतिशील बना सकते हैं ताकि यह हमेशा चौड़ाई का 50% हो या इसे स्थिर पूर्णांक होने की आवश्यकता है?
क्रैशलॉट

5
आप कर सकते हैं, लेकिन केवल कोड में। एक दिलचस्प बात यह है कि, हालांकि, अपने दृश्य वर्ग में एक IBInspectable संपत्ति जोड़ना है जो 0 और 100 के बीच का संख्यात्मक मान है और चौड़ाई का प्रतिशत इंगित करता है कि त्रिज्या होनी चाहिए। उदाहरण के लिए, 50 का मान मतलब त्रिज्या चौड़ाई का 50% होना चाहिए। क्योंकि यह एक संगृहीत (संग्रहीत नहीं) संपत्ति है, आप इसे UIView के विस्तार में भी जोड़ सकते हैं ताकि सभी विचारों में संपत्ति हो सके।
एनआरआईटीएच

@NitH, मुझे ऐसा कुछ देखने में दिलचस्पी होगी। क्या आपको लगता है कि आप यहां कोड पोस्ट कर सकते हैं?
कोबी फिशर

17

दृश्य का चयन करें आपने कॉर्नर रिड्यूस, बॉर्डर विथे और बॉर्डर कलर को भी स्टोरीबॉर्ड का उपयोग करके बदल दिया

extension UIView {

    @IBInspectable var cornerRadiusV: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidthV: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColorV: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

3
क्यों कोनेरेडियस के बजाय कोनेरेडियस का उपयोग करें?
लुहुइया

1
यह स्टोरीबोर्ड के माध्यम से कोनेरेडियस के माध्यम से सेट किया गया है, प्रोजेक्ट में लेखन कोडिंग को
बचाएं

पूरी तरह से काम किया
हसन तारेक

0

स्टोरीबोर्ड में सभी परिवर्तन करने के बाद भी, वॉरफोट का जवाब मेरे लिए काम नहीं करता है।

यह मेरे लिए काम किया:

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

लंबा जवाब :

UIView / UIButton आदि के गोल कोनों

customUIView.layer.cornerRadius = 10

बॉर्डर की मोटाई

pcustomUIView.layer.borderWidth = 1

किनारे का रंग

customUIView.layer.borderColor = UIColor.blue.cgColor

यह प्रश्न का उत्तर देने का प्रयास नहीं करता है और यहाँ आपके अन्य उत्तर का केवल एक डुप्लिकेट है
शिम
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.