UIButton में बॉर्डर कैसे बनाएं?

Question

मैं अपने ऐप में "addButton" नाम से कस्टम बटन का उपयोग करता हूं और मैं इसे सफेद रंग के साथ बॉर्डर करना चाहता हूं मैं अपने कस्टम बटन के आसपास सफेद रंग की सीमा कैसे प्राप्त कर सकता हूं?

Comments

बटन में सीमा और छाया जोड़ें

— अंकुर

Answer 1

आप बटन की लेयर प्रॉपर्टी को एक्सेस करके कैलेयर पर बॉर्डर प्रॉपर्टीज सेट कर सकते हैं।

सबसे पहले, क्वार्ट्ज जोड़ें

#import <QuartzCore/QuartzCore.h>

गुण सेट करें:

myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;

देख:

https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer

ऊपर दिए गए लिंक में कैलेयर आपको अन्य गुणों जैसे कोने त्रिज्या, मास्कटबाउंड आदि को सेट करने की अनुमति देता है ...

इसके अलावा, बटन पर एक अच्छा लेख मजेदार:

https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

Comments

सुनिश्चित करें कि आप लक्ष्य संपादक के बिल्ड चरणों टैब में अपने लक्ष्य को क्वार्टकोर ढांचे से जोड़ते हैं।

— ज़ेकेल

क्या मुझे क्वार्ट्ज आयात करने की आवश्यकता है? मैं अभी भी इसके बिना बटन की परत तक पहुंच सकता हूं। पूछने का मेरा उद्देश्य है: क्वार्ट्ज

— एलिक्स

प्लस 1 प्रयोग करने के लिएCGColor

— अनुराग शर्मा

Answer 2

यह बहुत ही सरल है, बस अपनी फ़ाइल में क्वार्टजकोर हेडर जोड़ें (इसके लिए आपको अपनी परियोजना में क्वार्ट्ज फ्रेमवर्क जोड़ना होगा)

और फिर यह करो

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

आप आवश्यकतानुसार फ्लोट मान बदल सकते हैं।

का आनंद लें।

---

यहां जानिए कुछ खास आधुनिक कोड ...

self.buttonTag.layer.borderWidth = 1.0f;
self.buttonCancel.layer.borderWidth = 1.0f;

self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor;
self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor;

self.buttonTag.layer.cornerRadius = 4.0f;
self.buttonCancel.layer.cornerRadius = 4.0f;

यह खंडों वाले नियंत्रणों के समान है।

स्विफ्ट के लिए अद्यतन:

• "क्वार्ट्जकोर" जोड़ने की आवश्यकता नहीं है

बस करो:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

Answer 3

और तेजी से, आपको "क्वार्ट्जकोर / क्वार्टजकोर.एच" आयात करने की आवश्यकता नहीं है

महज प्रयोग करें:

button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor

या

button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor

Comments

XCode 9 के अनुसार, "CGColor का नाम बदलकर cgColor" कर दिया गया है।

— ब्लेंडरबेंडर 13

Answer 4

समस्या परत सेटिंग borderWidthऔरborderColor है कि जब आप बटन को स्पर्श करें सीमा उजागर प्रभाव चेतन नहीं करता है।

बेशक, आप बटन की घटनाओं का निरीक्षण कर सकते हैं और उसके अनुसार सीमा का रंग बदल सकते हैं लेकिन यह अनावश्यक लगता है।

एक अन्य विकल्प एक स्ट्रेचेबल UIImage बनाना और इसे बटन की पृष्ठभूमि छवि के रूप में सेट करना है। आप इस तरह से अपने Images.xcassets में एक इमेज सेट बना सकते हैं:

फिर, आप इसे बटन की पृष्ठभूमि छवि के रूप में सेट करते हैं:

यदि आपकी छवि एक टेम्पलेट छवि है, तो आप बटन का टिंट रंग सेट कर सकते हैं और सीमा बदल जाएगी:

अब बॉर्डर टच होने पर बाकी बटन के साथ हाइलाइट होगा।

Comments

आप छवि से बाहर क्या करते हैं?

— बिगफुट 11

उस छवि को बनाने के लिए मैंने स्केच का उपयोग किया, लेकिन आप जिम्प, इलस्ट्रेटर, फ़ोटोशॉप का उपयोग कर सकते हैं ...

— juanjo

अच्छा उत्तर। यह बदलाव परत से बेहतर है borderWidth।

— अलेक्जेंडर डोलोज

Answer 5

बटन त्रिज्या, रंग और चौड़ाई बदलने के लिए मैं इस तरह सेट करता हूं:

self.myBtn.layer.cornerRadius = 10;
self.myBtn.layer.borderWidth = 1;
self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;

Answer 6

यहाँ बेन पैकर्ड के उत्तर से एक अद्यतन संस्करण ( स्विफ्ट 3.0.1 ) है ।

import UIKit

@IBDesignable class BorderedButton: UIButton {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            if let bColor = borderColor {
                self.layer.borderColor = bColor.cgColor
            }
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    override var isHighlighted: Bool {
        didSet {
            guard let currentBorderColor = borderColor else {
                return
            }

            let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {

                self.layer.borderColor = currentBorderColor.cgColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = currentBorderColor.cgColor
                animation.duration = 0.4
                self.layer.add(animation, forKey: "")
            }
        }
    }
}

परिणामी बटन का उपयोग आपके स्टोरीबोर्ड के अंदर @IBDesignableऔर @IBInspectableटैग के लिए किया जा सकता है ।

साथ ही परिभाषित दो गुण, आपको इंटरफ़ेस बिल्डर पर सीधे बॉर्डर की चौड़ाई और रंग सेट करने और परिणाम का पूर्वावलोकन करने की अनुमति देते हैं।

अन्य गुणों को एक समान फैशन में जोड़ा जा सकता है, सीमा त्रिज्या के लिए और लुप्त होती समय को उजागर करें।

Comments

मुझे स्विफ्ट 4 से अधिक की अड़चनों की समस्या है, मैंने फुल साइज बटन (साइड में साइड की तरफ) किया, एक्सकोड में मैंने बॉर्डर प्रीव्यू को बहुत अच्छी तरह से देखा, लेकिन एमुलेटर या डिवाइस पर मैंने बॉर्डर को साइज में घटा कर देखा। बटन के अंदर पाठ, मेरे द्वारा जोड़ा गया एकमात्र ऑटोलैयट बाधा क्षैतिज रूप से केंद्रित था, इसे कैसे ठीक करें? धन्यवाद!

— क्रिस्टियन चपरो ए।

@CristianChaparroA। कारण यह है कि prepareForInterfaceBuilderकेवल आईबी से कॉल किया जाता है, न कि जब आप ऐप चलाते हैं। इसलिए UIEdgeInsets को भी इसमें सेट करें awakeFromNib, फिर यह ऐप चलाते समय भी दिखाई देगा।

— सामूएल

Answer 7

आपको आयात करने की आवश्यकता नहीं है QuartzCore.hअब आपको । संदर्भ में iOS 8 sdk और Xcode 6.1 लेना।

सीधे उपयोग:

[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];

Answer 8

यहां एक UIButtonउपवर्ग है जो छवियों का उपयोग किए बिना हाइलाइट किए गए राज्य एनीमेशन का समर्थन करता है। व्यू का टिंट मोड बदलने पर यह बॉर्डर कलर को भी अपडेट करता है।

class BorderedButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        layer.borderColor = tintColor.CGColor
        layer.borderWidth = 1
        layer.cornerRadius = 5

        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("NSCoding not supported")
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        layer.borderColor = tintColor.CGColor
    }

    override var highlighted: Bool {
        didSet {
            let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor

            if highlighted {
                layer.borderColor = fadedColor
            } else {
                layer.borderColor = tintColor.CGColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = tintColor.CGColor
                animation.duration = 0.4
                layer.addAnimation(animation, forKey: "")
            }
        }
    }
}

उपयोग:

let button = BorderedButton(style: .System) //style .System is important

प्रकटन:

Answer 9

यह नवीनतम संस्करण अगस्त - 2017 में स्विफ्ट 3.0 वर्कड में विभिन्न तरीकों से प्राप्त किया जा सकता है

विकल्प 1:

UI बटन के लिए बॉर्डरविद संपत्ति मूल्यों को सीधे असाइन करें:

  btnUserButtonName.layer.borderWidth = 1.0

UI बटन के लिए डिफ़ॉल्ट रंग मानों के साथ शीर्षक सेट करें:

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

UI बटन के लिए सीमा गुण मान के लिए डिफ़ॉल्ट रंग के साथ सीमा निर्धारित करें:

btnUserButtonName.layer.borderColor = UIColor.red

यूआई बटन के लिए बॉर्डर प्रॉपर्टी वैल्यू के लिए उपयोगकर्ता निर्धारित रंग निर्धारित करें:

   let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )
   btnUserButtonName.layer.borderColor = myGrayColor.cgColor

विकल्प 2: [अनुशंसित]

एक्सटेंशन विधि का उपयोग करें, इसलिए एप्लिकेशन के माध्यम से बटन सुसंगत दिख रहा होगा और हर जगह कोड की कई पंक्तियों को दोहराने की आवश्यकता नहीं होगी।

//Create an extension class in any of the swift file

extension UIButton {
func setBordersSettings() {
        let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = c1GreenColor.cgColor
        self.setTitleColor(c1GreenColor, for: .normal)
        self.layer.masksToBounds = true
    }
}

कोड में उपयोग:

//use the method and call whever the border has to be applied

btnUserButtonName.setBordersSettings()

एक्सटेंशन विधि बटन का आउटपुट:

Answer 10

स्विफ्ट 3 के साथ अपडेट

    button.layer.borderWidth = 0.8
    button.layer.borderColor = UIColor.blue.cgColor

Answer 11

**** स्विफ्ट 3 में ****

सीमा बनाने के लिए

 btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor

कोने को गोल करना

 btnName.layer.cornerRadius = 5

Answer 12

स्विफ्ट 5

button.layer.borderWidth = 2

सीमा उपयोग का रंग बदलने के लिए

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)

Comments

button.layer.borderColor = UIColor.gray.cgColor भी स्वीकार्य है!

— कार्लोस ईरानी