मैं iPhone पर एक गोल कोने वाला UILabel कैसे बनाऊं?

150

वहाँ एक तरह से बनाया गया है गोल कोनों UILabels बनाने के लिए? यदि उत्तर नहीं है, तो कोई ऐसी वस्तु बनाने के बारे में कैसे जाएगा?

— newtonapple
स्रोत

229

आईओएस 3.0 और बाद में

iPhone OS 3.0 और बाद cornerRadiusमें CALayerवर्ग पर संपत्ति का समर्थन करता है । हर दृश्य में एक CALayerउदाहरण है कि आप हेरफेर कर सकते हैं। इसका मतलब है कि आप एक पंक्ति में गोल कोने प्राप्त कर सकते हैं:

view.layer.cornerRadius = 8;

आपको #import <QuartzCore/QuartzCore.h>कैलेयर के हेडर और संपत्तियों तक पहुंच प्राप्त करने के लिए क्वार्ट्जकोर फ्रेमवर्क से लिंक करना होगा।

IOS 3.0 से पहले

इसे करने का एक तरीका, जिसे मैंने हाल ही में उपयोग किया है, वह है यूआईवीईवाई उपवर्ग का निर्माण करना जो बस एक गोल आयत खींचता है, और फिर यूआईबेल या, मेरे मामले में, यूआईटैक्सव्यू, इसके अंदर एक सबव्यू। विशेष रूप से:

एक UIViewउपवर्ग बनाएँ और इसे कुछ इस तरह नाम दें RoundRectView।
में RoundRectViewकी drawRect:विधि, गोलाकार कोनों के लिए किनारों और और CGContextAddArcToPoint () के लिए () CGContextAddLineToPoint तरह कोर ग्राफिक्स कॉल का उपयोग दृश्य की सीमाएँ चारों ओर एक मार्ग बनाना।
एक UILabelउदाहरण बनाएं और इसे RoundRectView का एक उप-भाग बनाएं।
RoundRectView की सीमा के कुछ पिक्सेल इनसेट होने के लिए लेबल का फ्रेम सेट करें। (उदाहरण के लिए, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

यदि आप एक सामान्य यूआईवीयूवी बनाते हैं और फिर इंस्पेक्टर का उपयोग करके इसकी कक्षा को बदलते हैं, तो आप इंटरफ़ेस बिल्डर का उपयोग करके राउंडरेक्ट व्यू को रख सकते हैं। जब तक आप अपने ऐप को संकलित नहीं करते हैं, तब तक आप आयत नहीं देखेंगे, लेकिन कम से कम आप सबव्यू को जगह देने में सक्षम होंगे और ज़रूरत पड़ने पर इसे आउटलेट या क्रियाओं से जोड़ सकते हैं।

— benzado
स्रोत

1

view.layer.cornerRadius अभी भी संपूर्ण दृश्य (इसके सक्षम होने पर ऑफ़स्क्रीन के बजाय) खींचता है और केवल CoreAnimation लेयर पर यह आपके दृश्य को क्लिप करेगा। लागत यह है कि यह UIScrollView में सक्षम किए गए किसी भी दृश्य को डाल देगा, आपके स्क्रॉलिंग प्रदर्शन को मार देगा।

— Zac बॉलिंग

UIScrollView के अंदर कोनेरेडियस का उपयोग करना आपके स्क्रॉलिंग प्रदर्शन को मार देगा ? यदि आप UITableView के बारे में बात कर रहे हैं, तो मुझे विश्वास हो सकता है, लेकिन एक गोल-गोल कोने वाला दृश्य ड्रॉइंग सिस्टम को रोक नहीं सकता है।

— बेंजोडा

20

यदि आप कोड के बजाय इंटरफ़ेस बिल्डर में ऐसा करना चाहते हैं, तो आप पहचानकर्ता निरीक्षक में मुख्य पथ "layer.cornerRadius" के साथ एक उपयोगकर्ता परिभाषित रनटाइम एट्रीब्यूट सेट कर सकते हैं।

— क्रिस वासेली

141

IOS 7.1 या बाद वाले डिवाइस के लिए, आपको जोड़ने की आवश्यकता है:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;

— OscarWyck
स्रोत

3

कोने के त्रिज्या को सेट करें लेकिन स्क्रॉलिंग / एनीमेशन के लिए मास्कटबाउंड धीमा है। यदि आप परत की पृष्ठभूमि का रंग बनाम दृश्य सेट करते हैं तो यह परत के कोनेरेडियस के साथ 7.1 पर पर्याप्त है (जहां यह केवल कोनेरेडियस के साथ काम करना बंद कर देगा)।

— एरोन ज़िनमैन

22

स्विफ्ट IOS8 के लिए OSCarsWyck उत्तर के आधार पर:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0

— VBaarathi
स्रोत

15

कृपया स्विफ्ट में ऑब्जेक्टिव-सी उत्तरों के अनुवाद के साथ स्टैक ओवरफ्लो को अव्यवस्थित न करें, खासकर जब इस मामले में एकमात्र बदलाव हो रहा YESहो true।

— मार्लिसब्रोर्न

7

इस मामले में परिवर्तन न्यूनतम है, लेकिन एक सामान्य बिंदु के रूप में ऑब्जेक्टिव-सी से स्विफ्ट में अनुवाद अक्सर बहुत उपयोगी होते हैं।

— CKP78

1

मूल उत्तर को संपादित करने और वहां स्विफ्ट अनुवाद को कैसे जोड़ा जाए?

— मरिआन Marierný

11

आप एक है UILabelकहा जाता है: myLabel।
आपके "m" या "h" फ़ाइल आयात में: #import <QuartzCore/QuartzCore.h>
अपनी viewDidLoadलाइन में यह लिखें:self.myLabel.layer.cornerRadius = 8;
- निर्भर करता है कि आप कैसे चाहते हैं कि आप 8 से दूसरे नंबर पर कोनेरेडियस मान बदल सकते हैं :)

सौभाग्य

— गेब्रियल
स्रोत

11

आप इस तरह से किसी भी नियंत्रण की सीमा के साथ गोल सीमा बना सकते हैं: -

CALayer * l1 = [lblName layer];
[l1 setMasksToBounds:YES];
[l1 setCornerRadius:5.0];

// You can even add a border
[l1 setBorderWidth:5.0];
[l1 setBorderColor:[[UIColor darkGrayColor] CGColor]];

बस lblNameअपने से बदल दो UILabel।

नोट: - आयात करना न भूलें<QuartzCore/QuartzCore.h>

— पीयूष दुबे
स्रोत

7

मैंने UILabelइस प्रभाव को प्राप्त करने के लिए एक तेज उपवर्ग बनाया । इसके अलावा मैं अपने आप ही टेक्स्ट कलर को मैक्सिमम कंट्रास्ट के लिए ब्लैक या व्हाइट में सेट कर देता हूं।

परिणाम

प्रयुक्त SO-पोस्ट:

खेल का मैदान

बस इसे आईओएस प्लेग्राउंड में पेस्ट करें:

//: Playground - noun: a place where people can play

import UIKit

class PillLabel : UILabel{

    @IBInspectable var color = UIColor.lightGrayColor()
    @IBInspectable var cornerRadius: CGFloat = 8
    @IBInspectable var labelText: String = "None"
    @IBInspectable var fontSize: CGFloat = 10.5

    // This has to be balanced with the number of spaces prefixed to the text
    let borderWidth: CGFloat = 3

    init(text: String, color: UIColor = UIColor.lightGrayColor()) {
        super.init(frame: CGRectMake(0, 0, 1, 1))
        labelText = text
        self.color = color
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup(){
        // This has to be balanced with the borderWidth property
        text = "  \(labelText)".uppercaseString

        // Credits to https://stackoverflow.com/a/33015915/784318
        layer.borderWidth = borderWidth
        layer.cornerRadius = cornerRadius
        backgroundColor = color
        layer.borderColor = color.CGColor
        layer.masksToBounds = true
        font = UIFont.boldSystemFontOfSize(fontSize)
        textColor = color.contrastColor
        sizeToFit()

        // Credits to https://stackoverflow.com/a/15184257/784318
        frame = CGRectInset(self.frame, -borderWidth, -borderWidth)
    }
}


extension UIColor {
    // Credits to https://stackoverflow.com/a/29044899/784318
    func isLight() -> Bool{
        var green: CGFloat = 0.0, red: CGFloat = 0.0, blue: CGFloat = 0.0, alpha: CGFloat = 0.0
        self.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        let brightness = ((red * 299) + (green * 587) + (blue * 114) ) / 1000

        return brightness < 0.5 ? false : true
    }

    var contrastColor: UIColor{
        return self.isLight() ? UIColor.blackColor() : UIColor.whiteColor()
    }
}

var label = PillLabel(text: "yellow", color: .yellowColor())

label = PillLabel(text: "green", color: .greenColor())

label = PillLabel(text: "white", color: .whiteColor())

label = PillLabel(text: "black", color: .blackColor())

— Besi
स्रोत

6

एक और तरीका है कि UILabel के पीछे एक png लगाना है। मेरे पास कई लेबल वाले विचार हैं जो एक एकल पृष्ठभूमि पींग को ओवरले करते हैं जिसमें व्यक्तिगत लेबल के लिए सभी कलाकृति हैं।

— alpinista
स्रोत

6

xCode 7.3.1 आईओएस 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;

— अहमद अब्दुल्ला
स्रोत

6

यदि आप चाहते हैं यूआई के गोल कोने की तरह वस्तुओं ( UILabel, UIView, UIButton, UIImageView) स्टोरीबोर्ड से तो सेट clip to boundsसच्चे और सेट User Defined Runtime Attributesके रूप में कुंजी पथ layer.cornerRadius, type = संख्या और मूल्य = 9 (आपकी आवश्यकता के रूप में)

— निखलेश बगड़िया
स्रोत

4

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];

— गौरव गिलानी
स्रोत

3

स्विफ्ट 3

यदि आप पृष्ठभूमि के रंग के साथ गोल लेबल चाहते हैं, तो अधिकांश अन्य उत्तरों के अलावा, आपको layerपृष्ठभूमि का रंग भी सेट करना होगा । viewपृष्ठभूमि का रंग सेट करते समय यह काम नहीं करता है ।

label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor

यदि आप ऑटो लेआउट का उपयोग कर रहे हैं, तो लेबल के चारों ओर कुछ पैडिंग चाहते हैं और लेबल के आकार को मैन्युअल रूप से सेट नहीं करना चाहते हैं, तो आप UILabel उपवर्ग और intrinsincContentSizeसंपत्ति को ओवरराइड कर सकते हैं:

class LabelWithPadding: UILabel {
    override var intrinsicContentSize: CGSize {
        let defaultSize = super.intrinsicContentSize
        return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
    }
}

दोनों को संयोजित करने के लिए आपको सेट label.textAlignment = centerकरना होगा, अन्यथा पाठ को संरेखित किया जाएगा।

— मारीन Černý
स्रोत

2

Monotouch / Xamarin.iOS में मैंने इस तरह की समस्या को हल किया:

UILabel exampleLabel = new UILabel(new CGRect(0, 0, 100, 50))
        {
            Text = "Hello Monotouch red label"
        };
        exampleLabel.Layer.MasksToBounds = true;
        exampleLabel.Layer.CornerRadius = 8;
        exampleLabel.Layer.BorderColor = UIColor.Red.CGColor;
        exampleLabel.Layer.BorderWidth = 2;

— डेनियल डी।
स्रोत

2

स्विफ्ट 2.0 में एकदम सही काम करता है

    @IBOutlet var theImage: UIImageView! //you can replace this with any UIObject eg: label etc


    override func viewDidLoad() {
        super.viewDidLoad()
//Make sure the width and height are same
        self.theImage.layer.cornerRadius = self.theImage.frame.size.width / 2
        self.theImage.layer.borderWidth = 2.0
        self.theImage.layer.borderColor = UIColor.whiteColor().CGColor
        self.theImage.clipsToBounds = true

    }

— Naishta
स्रोत

2

क्या आपने UIButtonइंटरफ़ेस बिल्डर (जो गोल कोनों है) से उपयोग करने की कोशिश की और सेटिंग्स के साथ प्रयोग करके इसे एक लेबल की तरह देखा। यदि आप चाहते हैं कि सभी स्थिर पाठ प्रदर्शित करें।

— नरेन
स्रोत

2

एक्सगस्ट 2017 के दौरान स्विफ्ट 3 के साथ एक्सकोड 8.1.2 में ठीक काम करता है

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

कोड:

 // extension Class
extension UILabel {

    // extension user defined Method
    func setRoundEdge() {
        let myGreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        //Width of border
        self.layer.borderWidth = 1.0
        //How much the edge to be rounded
        self.layer.cornerRadius = 5.0

        // following properties are optional
        //color for border
        self.layer.borderColor = myGreenColor.cgColor
        //color for text
        self.textColor = UIColor.red
        // Mask the bound
        self.layer.masksToBounds = true
        //clip the pixel contents
        self.clipsToBounds = true
    }
}

आउटपुट:

एक्सटेंशन विधि क्यों?

एक स्विफ्ट फ़ाइल बनाएं और निम्नलिखित कोड जोड़ें, जिसमें एक्सटेंशन विधि "UILabel" वर्ग है, जहां यह विधि उपयोगकर्ता परिभाषित है, लेकिन आपके एप्लिकेशन के सभी लेबल के लिए काम करेगी और यदि आप चाहें तो स्थिरता और स्वच्छ कोड बनाए रखने में मदद करेंगे। भविष्य में किसी भी शैली को बदलने के लिए केवल विस्तार विधि की आवश्यकता होती है।

— BHUVANESH MOHANKUMAR
स्रोत

0

आप जो कर रहे हैं उसके आधार पर आप एक छवि बना सकते हैं और इसे पृष्ठभूमि के रूप में प्रोग्राम के रूप में सेट कर सकते हैं।

— स्टीवन मेयर
स्रोत