如何在iPhone上创建圆角UILabel?


Answers:


229

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(以我为例)。特别:

  1. 创建一个UIView子类并将其命名为RoundRectView
  2. RoundRectViewdrawRect:方法中,使用Core Graphics调用(如CGContextAddLineToPoint()绘制边缘和CGContextAddArcToPoint()绘制圆角)在视图边界周围绘制路径。
  3. 创建一个UILabel实例并使其成为RoundRectView的子视图。
  4. 将标签的框架设置为RoundRectView边界的几个像素。(例如,label.frame = CGRectInset(roundRectView.bounds, 8, 8);

如果创建通用的UIView,然后使用检查器更改其类,则可以使用Interface Builder将RoundRectView放置在视图上。在编译并运行应用程序之前,您不会看到该矩形,但是至少可以放置子视图并将其连接到插座或操作(如果需要)。


1
view.layer.cornerRadius仍将绘制整个视图(启用时,将其显示为屏幕外),并且仅在CoreAnimation层上才会剪切您的视图。代价是它将使启用了它的任何视图放入UIScrollView中,从而破坏滚动性能。
Zac Bowling,

使用cornerRadius一个UIScrollView内会杀了你的滚动性能?我可能会相信您,如果我们谈论的是UITableView,但是一个圆角视图不会使视图绘制系统停顿下来。
benzado 2011年

20
如果要在Interface Builder中而不是代码中执行此操作,则可以在Identity Inspector中使用键路径“ layer.cornerRadius”设置用户定义的运行时属性。
克里斯·瓦塞利

141

对于装有iOS 7.1或更高版本的设备,您需要添加:

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

3
设置拐角半径,但是masksToBounds对于滚动/动画效果很慢。如果将图层的背景色与视图设置成足够的值,再加上7.1上的cornerRadius,则该视图将不再只使用cornerRadius。
亚伦·辛曼

22

对于基于OScarsWyck的Swift IOS8及更高版本,请回答:

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

15
请不要弄乱堆栈溢出用Objective-C的答案进入迅捷,特别是当在这种情况下,唯一的变化是改变的翻译YEStrue
mluisbrown '16

7
这种情况下的更改很小,但是作为一个总的来说,从Objective-C到Swift的转换通常很有用。
CKP78 '18

1
如何编辑原始答案并在那里添加Swift翻译?
玛丽安·塞尔尼

11
  1. 您有一个UILabel叫:myLabel
  2. 在“ m”或“ h”文件导入中: #import <QuartzCore/QuartzCore.h>
  3. 在你viewDidLoad写这行:self.myLabel.layer.cornerRadius = 8;

    • 取决于您要如何将cornerRadius值从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]];


只需将其替换lblNameUILabel

注意:-不要忘记导入<QuartzCore/QuartzCore.h>


7

我做了一个迅速的UILabel子类来达到这种效果。另外,我自动将文本颜色设置为黑色或白色,以实现最大的对比度。

结果

颜色四舍五入的边界

二手SO帖子:

操场

只需将其粘贴到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())

6

另一种方法是将png放在UILabel后面。我有几个标签覆盖单个背景png的视图,该背景png具有单个标签的所有插图。



6

如果你想UI的圆角对象,如(UILabelUIViewUIButtonUIImageView)的故事板再设置clip to bounds正确,并设置User Defined Runtime Attributes为关键路径 layer.cornerRadius,类型=数字和值= 9(根据您的要求)

将剪辑设置为 将用户定义的运行时属性设置为



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,否则文本将保持对齐。


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

在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

    }

2

您是否尝试过使用“ UIButton接口”构建器(具有圆角)中的并尝试进行设置以使其看起来像一个标签。如果您只想在其中显示静态文本。


2

在Swift 3的Xcode 8.1.2中正常工作,于2017年8月进行了测试

“ 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文件,并在“ UILabel”类中添加以下代码,该代码具有Extention方法,该方法是用户定义的,但适用于应用程序中的所有标签,并且有助于保持一致性和简洁的代码(如果您使用将来更改任何样式仅需要使用扩展方法。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.