ฉันจะสร้าง UILabel แบบมุมโค้งมนบน iPhone ได้อย่างไร

มีวิธีการในการสร้าง UILabels แบบแต้มมุมหรือไม่? ถ้าคำตอบคือไม่เราจะสร้างวัตถุเช่นนี้ได้อย่างไร?

iOS 3.0 และใหม่กว่า

iPhone OS 3.0 และใหม่กว่ารองรับcornerRadiusคุณสมบัติบนCALayerคลาส ทุกมุมมองมีCALayerอินสแตนซ์ที่คุณสามารถจัดการได้ ซึ่งหมายความว่าคุณสามารถรับมุมโค้งมนในหนึ่งบรรทัด:

view.layer.cornerRadius = 8;

คุณจะต้อง #import <QuartzCore/QuartzCore.h>และลิงก์ไปยังกรอบ QuartzCore เพื่อเข้าถึงส่วนหัวและคุณสมบัติของ CALayer

ก่อน iOS 3.0

วิธีหนึ่งในการทำซึ่งฉันใช้เมื่อเร็ว ๆ นี้คือการสร้างคลาสย่อย UIView ซึ่งวาดสี่เหลี่ยมมุมมนจากนั้นสร้าง UILabel หรือในกรณีของฉัน UITextView ซึ่งเป็น subview ภายใน โดยเฉพาะ:

1. สร้างUIViewคลาสย่อยและตั้งชื่อตามต้องการRoundRectViewและตั้งชื่อมันเหมือนบางสิ่งบางอย่าง
2. ในRoundRectView'sdrawRect:วิธีการวาดเส้นทางรอบขอบเขตของมุมมองโดยใช้สายหลักกราฟิกเช่น CGContextAddLineToPoint () เพื่อขอบและและ CGContextAddArcToPoint () สำหรับมุมโค้งมน
3. สร้าง UILabelอินสแตนซ์และทำให้เป็นมุมมองย่อยของ RoundRectView
4. ตั้งค่าเฟรมของเลเบลให้เป็นสองสามพิกเซลของขอบเขตของ RoundRectView (ตัวอย่างเช่นlabel.frame = CGRectInset(roundRectView.bounds, 8, 8);)

คุณสามารถวาง RoundRectView บนมุมมองโดยใช้ตัวสร้างส่วนต่อประสานถ้าคุณสร้าง UIView ทั่วไปแล้วเปลี่ยนคลาสของมันโดยใช้ตัวตรวจสอบ คุณจะไม่เห็นรูปสี่เหลี่ยมผืนผ้าจนกว่าคุณจะรวบรวมและเรียกใช้แอปของคุณ แต่อย่างน้อยคุณจะสามารถวางมุมมองย่อยและเชื่อมต่อกับร้านค้าหรือการกระทำหากจำเป็น

สำหรับอุปกรณ์ที่มี iOS 7.1 หรือใหม่กว่าคุณต้องเพิ่ม:

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

สำหรับ Swift IOS8 เป็นต้นไปขึ้นอยู่กับคำตอบของ OScarsWyck:

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

1. คุณมีสิ่งที่UILabelเรียกว่า: myLabel.
2. ในการนำเข้าไฟล์ "m" หรือ "h" ของคุณ: #import <QuartzCore/QuartzCore.h>

3. ในการviewDidLoadเขียนบรรทัดนี้ของคุณ:self.myLabel.layer.cornerRadius = 8;

   • ขึ้นอยู่กับวิธีที่คุณต้องการคุณสามารถเปลี่ยนค่าของมุมรัศมีจาก 8 เป็นหมายเลขอื่น :)

โชคดี

คุณสามารถสร้างเส้นขอบโค้งมนที่มีความกว้างของเส้นขอบของตัวควบคุมใด ๆ ด้วยวิธีนี้: -

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>

ฉันทำอย่างรวดเร็ว UILabelคลาสย่อยที่เพื่อให้ได้ผลนี้ นอกจากนี้ฉันตั้งค่าสีข้อความโดยอัตโนมัติเป็นสีดำหรือสีขาวเพื่อความคมชัดสูงสุด

ผลลัพธ์

ใช้โพสต์:

• วิธีการวาดเส้นขอบรอบ ๆ UILabel?
• เพิ่มเส้นขอบด้านนอกของ UIView
• ตรวจสอบว่า UIColor มืดหรือสว่าง?

สนามเด็กเล่น

เพียงวางสิ่งนี้ลงใน iOS Playground:

//: 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())

อีกวิธีคือการวาง png ด้านหลัง UILabel ฉันมีมุมมองที่มีป้ายกำกับหลายรายการที่ซ้อนทับ png พื้นหลังเดียวที่มีงานศิลปะทั้งหมดสำหรับป้ายกำกับแต่ละรายการ

xCode 7.3.1 iOS 9.3.2

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

หากคุณต้องการมุมโค้งมนของ UI วัตถุเช่น ( UILabel, UIView, UIButton, UIImageView) โดยสตอรี่บอร์ดแล้วตั้งclip to boundsจริงและกำหนดUser Defined Runtime Attributesเส้นทางที่สำคัญเป็น layer.cornerRadiusพิมพ์ = จำนวนและมูลค่า = 9 (ตามความต้องการของคุณ)

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

สวิฟท์ 3

หากคุณต้องการฉลากโค้งมนที่มีสีพื้นหลังนอกเหนือจากคำตอบอื่น ๆ ส่วนใหญ่แล้วคุณต้องตั้งค่าlayerสีพื้นหลังของเช่นกัน มันไม่ทำงานเมื่อตั้งค่าviewสีพื้นหลัง

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

หากคุณใช้เลย์เอาต์อัตโนมัติต้องการเพิ่มช่องว่างรอบ ๆ เลเบลและไม่ต้องการตั้งค่าขนาดของเลเบลด้วยตนเองคุณสามารถสร้างคลาสย่อยและintrinsincContentSizeคุณสมบัติการแทนที่ UILabel :

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

หากต้องการรวมสองสิ่งเข้าด้วยกันคุณจะต้องตั้งค่าlabel.textAlignment = centerมิฉะนั้นข้อความจะถูกจัดชิดซ้าย

ใน 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;

ทำงานได้สมบูรณ์แบบใน Swift 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

    }

คุณลองใช้UIButtonจากเครื่องมือสร้างส่วนต่อประสาน (ที่มีมุมโค้งมน) และทดลองใช้การตั้งค่าเพื่อให้ดูเหมือนป้ายกำกับ หากสิ่งที่คุณต้องการคือการแสดงข้อความคงที่ภายใน

ทำงานได้ดีใน Xcode 8.1.2 ด้วย Swift 3 ทดสอบระหว่างสิงหาคม 2560

"cornerRadius" เป็นคุณสมบัติหลักในการตั้งค่าขอบโค้งมนซึ่งหากคุณใช้สไตล์เดียวกันกับป้ายกำกับทั้งหมดในแอปพลิเคชันของคุณฉันขอแนะนำวิธีการขยาย

รหัส:

 // 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
    }
}

เอาท์พุท:

ทำไมวิธีการขยาย?

สร้างไฟล์ Swift และเพิ่มรหัสต่อไปนี้ซึ่งมีวิธี Extention ให้กับคลาส "UILabel" ซึ่งเป็นวิธีที่ผู้ใช้กำหนด แต่จะใช้งานได้กับฉลากทั้งหมดในแอปพลิเคชันของคุณและจะช่วยรักษาความมั่นคงและรหัสที่สะอาด เปลี่ยนสไตล์ใด ๆ ในอนาคตจำเป็นต้องใช้วิธีการขยายเท่านั้น

ขึ้นอยู่กับสิ่งที่คุณกำลังทำคุณสามารถสร้างภาพและตั้งเป็นพื้นหลังแบบเป็นโปรแกรม