प्रोग्राम के कस्टम बॉर्डर कलर को UIView कैसे सेट करें?


99

मैं स्विफ्ट में यूएवीवाई के कस्टम बॉर्डर कलर को प्रोग्रामेटिक रूप से सेट करने की कोशिश कर रहा हूं।


3
अपने प्रश्न में संबंधित कोड दिखाएं। बताएं कि आपको क्या समस्या है।
रम्मदी

1
कोको टच के संभावित डुप्लिकेट : कैसे बदल सकते हैं यूआईवीवाई की सीमा का रंग और मोटाई? आपको बस इसे स्वैच्छिक तरीके से उपयोग करने की आवश्यकता है
इंद्र कुमार राठौर

जवाबों:


202

यदि आप 2.0+ स्विफ्ट का उपयोग करते हैं

self.yourView.layer.borderWidth = 1
self.yourView.layer.borderColor = UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor

नोट: यह काम मेरे लिए नहीं लगता है (शायद इसलिए कि मैं स्विफ्ट 3.1 पर हूं?)। पारस जोशी का ( stackoverflow.com/a/29701061/225813 ) संस्करण ने हालांकि काम किया
एशले कूलमैन

मैंने अपना उत्तर संपादित किया। यह आपके लिए काम करना सुनिश्चित करता है .. एशले कूलमैन
शशि वर्मा

1
आपको init को स्पष्ट रूप से स्विफ्ट 3 में कॉल करने की आवश्यकता नहीं है
ibrahimab

क्या एक से अधिक रंगों का उपयोग करना संभव है?
गोखान keokkeçeci

3
क्या आपके दो संस्करणों में कोई अंतर है?
फोगमिस्टर

88

में स्विफ्ट 4 आप सीमा रंग सेट और कोड नीचे का उपयोग कर UIControls लिए चौड़ाई कर सकते हैं।

let yourColor : UIColor = UIColor( red: 0.7, green: 0.3, blue:0.1, alpha: 1.0 )
yourControl.layer.masksToBounds = true
yourControl.layer.borderColor = yourColor.CGColor
yourControl.layer.borderWidth = 1.0

<स्विफ्ट 4 , आप नीचे दिए गए कोड का उपयोग करके यूआईवीवाई की सीमा की चौड़ाई और सीमा का रंग निर्धारित कर सकते हैं।

yourView.layer.borderWidth = 1

yourView.layer.borderColor = UIColor.red.cgColor

1
@ शशिवर्मा आपका स्वागत है। परतों के बारे में विस्तार से जानकारी के लिए, Apple के अलग-अलग ऑब्जेक्ट के क्लास रेफरेंस डॉक्यूमेंट्स पढ़ें, ताकि वह आपके लिए भी उपयोगी हो :)
पारस जोशी

16

ऐसा करने के लिए @IBDesignable और @IBInspectable का उपयोग करें ।

वे इंटरफ़ेस बिल्डर से आसानी से परिवर्तनीय हैं और स्टोरीबोर्ड में तुरंत परिवर्तन परिलक्षित होते हैं

स्टोरीबोर्ड में ऑब्जेक्ट्स को विशेष वर्ग के अनुरूप बनाएं

सांकेतिक टुकड़ा:

@IBDesignable
class CustomView: UIView{

@IBInspectable var borderWidth: CGFloat = 0.0{

    didSet{

        self.layer.borderWidth = borderWidth
    }
}


@IBInspectable var borderColor: UIColor = UIColor.clear {

    didSet {

        self.layer.borderColor = borderColor.cgColor
    }
}

override func prepareForInterfaceBuilder() {

    super.prepareForInterfaceBuilder()
}

}

इंटरफ़ेस बिल्डर से आसान संशोधन की अनुमति देता है:

इंटरफ़ेस बिल्डर


मुझे यह समाधान अधिक पसंद है क्योंकि यह एक पुन: प्रयोज्य है जहां हम कस्टम को UIView सेट करते हैं लेकिन फिर भी कमरे में अधिक परिवर्तन छोड़ देते हैं।
n0rm

यह इसे हासिल करने का मेरा पसंदीदा तरीका था लेकिन डार्क मोड के साथ, यह वास्तव में अच्छी तरह से काम नहीं करता है। यह वर्तमान MacOS की रंग शैली प्राप्त करता है और स्थैतिक का उपयोग करता है। लेकिन निर्माण @IBDesignableऔर @IBInspectableसभी अच्छी तरह से काम करते हैं, इसलिए दोनों डार्क / लाइट मोड के साथ कलर एसेट्स का उपयोग करने के लिए रीति-रिवाजों का एक तरीका होना चाहिए ~ कोई भी जानता है कि इसे कैसे प्राप्त किया जा सकता है?
घुमंतू डेवलपर

12

आप इसका उपयोग करने के लिए एक एक्सटेंशन लिख सकते हैं, जैसे कि सभी उविविओं के साथ। UIButton, UILabel, UIImageView आदि। आप अपनी आवश्यकता के अनुसार मेरी निम्नलिखित विधि को अनुकूलित कर सकते हैं, लेकिन मुझे लगता है कि यह आपके लिए अच्छा काम करेगा।

extension UIView{

    func setBorder(radius:CGFloat, color:UIColor = UIColor.clearColor()) -> UIView{
        var roundView:UIView = self
        roundView.layer.cornerRadius = CGFloat(radius)
        roundView.layer.borderWidth = 1
        roundView.layer.borderColor = color.CGColor
        roundView.clipsToBounds = true
        return roundView
    }
}

उपयोग:

btnLogin.setBorder(7, color: UIColor.lightGrayColor())
imgViewUserPick.setBorder(10)

1
@ मुझे लगता है कि वह / वह एपीआई भाषा के बारे में ज्यादा पसंद नहीं करते हैं!
worthwords


8

स्विफ्ट 5.2 , उविवि + एक्सटेंशन

extension UIView {
    public func addViewBorder(borderColor:CGColor,borderWith:CGFloat,borderCornerRadius:CGFloat){
        self.layer.borderWidth = borderWith
        self.layer.borderColor = borderColor
        self.layer.cornerRadius = borderCornerRadius

    }
}

आपने इस विस्तार का उपयोग किया;

yourView.addViewBorder(borderColor: #colorLiteral(red: 0.6, green: 0.6, blue: 0.6, alpha: 1), borderWith: 1.0, borderCornerRadius: 20)

आप क्लिप जोड़ने से चूक गए = सही
बेंट एल-

3

अपने में कोड लिखें viewDidLoad()

self.view.layer.borderColor = anyColor().CGColor

और आप के Colorसाथ सेट कर सकते हैंRGB

func anyColor() -> UIColor {
    return UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
}

के बारे में कुछ जानें CALayerमेंUIKit


किसी तरह, यह तब तक कुछ नहीं करता जब तक आप स्पष्ट रूप से सीमा की चौड़ाई निर्धारित नहीं करते।
निकोलस मिआरी

@NicolasMiari उम्मीद की जाती है कि ... आप एक सीमा रंग नहीं देख सकते हैं जिसके लिए आपने कोई आकार निर्धारित नहीं किया है।
जोनो गुथरी

क्षमा करें, मैं उल्लेख करना भूल गया था कि मैं पाठ क्षेत्रों का उल्लेख कर रहा था ... जो शुरू से ही एक डिफ़ॉल्ट गैर-शून्य सीमा चौड़ाई है। हालाँकि, मैंने उस रंग को पाने के लिए संघर्ष किया, जब तक मैं स्पष्ट रूप से सीमा की चौड़ाई निर्धारित नहीं करता।
निकोलस मिआरी


3

हम इसके लिए विधि बना सकते हैं। बस इसका उपयोग करें।

public func createBorderForView(color: UIColor, radius: CGFloat, width: CGFloat = 0.7) {
    self.layer.borderWidth = width
    self.layer.cornerRadius = radius
    self.layer.shouldRasterize = false
    self.layer.rasterizationScale = 2
    self.clipsToBounds = true
    self.layer.masksToBounds = true
    let cgColor: CGColor = color.cgColor
    self.layer.borderColor = cgColor
}

2

स्विफ्ट 3.0

       groundTrump.layer.borderColor = UIColor.red.cgColor

एक नया उत्तर जोड़ने के बजाय, आपने मूल उत्तर देने वाले को एक संपादित अनुरोध भेज दिया होगा
राजन माहेश्वरी

@ रजनमहेश्वरी कृपया नं। अन्य लोगों के उत्तरों में कोड न जोड़ें। अपडेट को अपने स्वयं के रूप में पोस्ट किया जाना चाहिए, अन्य उत्तरों में नहीं। इस तरह से प्रत्येक पोस्टर जो वे पोस्ट करते हैं उसके लिए जिम्मेदार है ...
एरिक आया

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