स्टोरीबोर्ड में एक साधारण गोल बटन कैसे बनाएं?

Question

मैंने अभी-अभी iOS विकास सीखना शुरू किया है, सरल गोल बटन बनाने का तरीका नहीं खोज सकता। मुझे पुराने संस्करणों के लिए संसाधन मिले। क्या मुझे एक बटन के लिए एक कस्टम पृष्ठभूमि सेट करने की आवश्यकता है? एंड्रॉइड में, मैं सिर्फ 9 पैच का उपयोग करूंगा, लेकिन मुझे पता है कि आईओएस में यह क्षमता नहीं है।

Answer 1

स्टोरीबोर्ड में करने के लिए, आपको बटन के लिए एक छवि का उपयोग करने की आवश्यकता है।

वैकल्पिक रूप से आप इसे कोड में कर सकते हैं:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

Comments

क्लिप क्यों आवश्यक है? ऐसा लगता है, यह छाया तब तक काम नहीं करती जब तक मैं इसे हटा नहीं देता।

— गिंतस_

अच्छा उत्तर, लेकिन आप इसे आईबी में कर सकते हैं, बिना छवियों के। निचे देखो।

— जोंतर

Answer 2

संक्षिप्त उत्तर: हाँ

आप पूरी तरह से एक अतिरिक्त पृष्ठभूमि छवि की आवश्यकता के बिना एक साधारण गोल बटन बना सकते हैं या उसी के लिए कोई भी कोड लिख सकते हैं। बस वांछित परिणाम प्राप्त करने के लिए, बटन के लिए रनटाइम विशेषताओं को सेट करने के लिए, नीचे दिए गए स्क्रीनशॉट का पालन करें।

यह प्रदर्शित नहीं होगा, Storyboardलेकिन जब आप प्रोजेक्ट चलाते हैं तो यह ठीक काम करेगा।

नोट: 'कुंजी पथ'
layer.cornerRadius और मूल्य मूल्य ऊंचाई बटन की चौड़ाई के अनुसार बदलने की आवश्यकता 5. है। इसके लिए सूत्र बटन की ऊंचाई * 0.50 है। तो सिम्युलेटर में या भौतिक डिवाइस पर अपेक्षित गोल बटन देखने के लिए मूल्य के आसपास खेलें। यह प्रक्रिया तब थकाऊ लगेगी जब आपके पास स्टोरीबोर्ड में एक से अधिक बटन होंगे।

Comments

कृपया नकारात्मक में मतदान करते समय एक टिप्पणी जोड़ें।

— निशांत

यह निराशाजनक है कि आईबी इसे मिल ड्राइंग ऐप की तरह नहीं दिखा सकती है।

— विलियम सेर्नियुक

@WilliamCerniuk: वास्तव में यह हो सकता है। की जाँच करें nshipster.com/ibinspectable-ibdesignable

— निशांत

उपयोगकर्ता परिभाषित रैनटाइम विशेषताओं को सेट करना वास्तव में काम करता है, निर्माण के बाद सिम्युलेटर में देखा जा सकता है।

— कंस तुलाणा

जैसा कि स्वीकृत उत्तर कहता है, आपको clipsToBoundsकाम करने के लिए बूलियन कुंजी पथ जोड़ने की आवश्यकता हो सकती है ।

— मैक्स

Answer 3

आप ऐसा कुछ कर सकते हैं:

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

करने के लिए सेट वर्ग MyButtonमें Identity Inspectorऔर आईबी में आप होगा roundedसंपत्ति:

Comments

अब तक का सबसे अच्छा जवाब। कुछ नया सीखा आज कमाल!

— मार्क

यह उत्तर पूर्ण नहीं है। जब आप अपना ऐप लॉन्च करते हैं, तो xCode इंटरफ़ेस बिल्डर में दृश्य के फ्रेम आकार का उपयोग करेगा, न कि वास्तविक फ्रेम आकार जब ऐप चल रहा हो।

— सिमोन बैकक्स

आप "विलसेट" के बजाय "डिडसेट" का उपयोग कर सकते हैं और तर्क को हटा सकते हैं।

— साइमन बैकक्स

यदि आप एक पृष्ठभूमि छवि का उपयोग करते हैं, तो layer.masksToBounds = trueभी सेट करें

— zontar

Answer 4

1. कोको टच क्लास बनाएं।

2. RoundButton वर्ग में कोड डालें।

   import UIKit
   
   @IBDesignable
   class RoundButton: UIButton {
   
       @IBInspectable var cornerRadius: CGFloat = 0{
           didSet{
           self.layer.cornerRadius = cornerRadius
           }
       }
   
       @IBInspectable var borderWidth: CGFloat = 0{
           didSet{
               self.layer.borderWidth = borderWidth
           }
       }
   
       @IBInspectable var borderColor: UIColor = UIColor.clear{
           didSet{
               self.layer.borderColor = borderColor.cgColor
           }
       }
   }

3. छवि देखें।

Comments

कृपया एक ही उत्तर को बार-बार पोस्ट करना बंद करें। इसे शोर माना जाता है। या तो अलग-अलग प्रश्नों के अपने उत्तर दें या, यदि वे वास्तव में एक ही प्रश्न हैं, तो आप उन्हें डुप्लिकेट के रूप में चिह्नित कर सकते हैं (और जब आपके पास पर्याप्त प्रतिष्ठा हो, तो वोट बंद करें)।

— elixenide

पता नहीं कि अन्य लोग इसमें भाग भी गए, लेकिन जैसे ही मैंने कक्षा को एक बटन पर सेट किया और उसे एक त्रिज्या, सीमा चौड़ाई और सीमा रंग Xcode (9.2) दिया, एक त्रुटि है कि एक रेंडरिंग त्रुटि थी। एप्लिकेशन बिल्डिंग सफल लेकिन लाल "!" प्रदर्शित किया जा रहा है। बस कह रहा हूं ... मैंने कोड को केवल समाधान पर वापस स्विच किया (हालांकि यह वास्तव में एक सुंदर तरीका था)।

— aeger

Answer 5

मुझे यह करने का सबसे आसान तरीका मिला, यह कोनेरेडियस को दृश्य की ऊंचाई के आधे भाग पर सेट करके है।

button.layer.cornerRadius = button.bounds.size.height/2

Comments

नहीं, मैंने नहीं। यदि आपकी ऊंचाई और चौड़ाई समान है (तो यह चौकोर होगा), तो आपको एक चक्र मिलेगा। लेकिन अगर चौड़ाई ऊंचाई से अधिक है, तो बटन सही होगा।

— फ्रैंकनीएनल

आप सही कह रहे हैं, मैंने उस प्रश्न में शामिल छवि को याद किया जो दिखाता है कि पोस्टर वास्तव में आपके उत्तर को स्वीकार किए गए उत्तर से अधिक मेल खाने के बाद था - upvote

— माइकल हडसन

Answer 6

आप कनेक्ट कर सकते हैं IBOutlet स्टोरीबोर्ड से yur बटन ।

फिर आप सेट कर सकते हैं corner radius इसे कॉर्नर राउंड बनाने के लिए अपने बटन को ।

उदाहरण के लिए, अपने outletहै myButtonतो,

ओब्ज - सी

 self.myButton.layer.cornerRadius = 5.0 ;

तीव्र

  myButton.layer.cornerRadius = 5.0

यदि आप सटीक राउंड बटन चाहते हैं तो आपका बटन widthऔर heightहोना चाहिए equalऔर cornerRadiusऊंचाई या चौड़ाई / 2 (चौड़ाई या ऊंचाई का आधा) के बराबर होना चाहिए।

Answer 7

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

कृपया निम्नलिखित कोड देखें। इस कोड का उपयोग करने के लिए एक नई स्विफ्ट फ़ाइल बनाएं जिसे RoundedView कहा जाता है या जिसे आप इसे कॉल करना चाहते हैं तो अपने स्टोरीबोर्ड पर जाएं और कक्षा को "RoundedView", "RoundedImageView" या "RoundedButton" में बदल दें।

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

Answer 8

layer.cornerRadiusस्टोरीबोर्ड में जोड़ते समय सुनिश्चित करें कि आपके पास अग्रणी या अनुगामी स्थान नहीं है। यदि आप कॉपी पेस्ट करते हैं, तो आपको रिक्त स्थान सम्मिलित हो सकते हैं। अच्छा होगा यदि XCode किसी प्रकार की चेतावनी या त्रुटि कहे।

Answer 9

इसे इस्तेमाल करे!!

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}

Answer 10

इस समस्या के लिए विस्तार सबसे अच्छा विकल्प है। व्यू या बटन का एक्सटेंशन बनाएं

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

इसे कोड से कॉल करें

button.roundCorners()

Answer 11

मैं Xcode संस्करण 11.4 का उपयोग कर रहा हूं

विशेषता निरीक्षक में, आप कोने त्रिज्या को परिभाषित कर सकते हैं।

यह स्टोरीबोर्ड में नहीं दिखाई देगा, लेकिन जब आप प्रोजेक्ट चलाते हैं तो यह ठीक काम करेगा।

Answer 12

import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}