如何在 iPhone 上创建一个圆角 UILabel？

是否有一种内建的方式来创建圆角 UILabels？如果答案是否定的，人们将如何着手创建这样一个对象？

136359 次浏览
小开
最佳答案

IOS 3.0及更高版本

IPhone OS 3.0和更高版本支持 CALayer类上的 cornerRadius属性。每个视图都有一个可以操作的 CALayer实例。这意味着你可以在一行中得到圆角:

view.layer.cornerRadius = 8;

您将需要 #import <QuartzCore/QuartzCore.h>并链接到 QuartzCore 框架来访问 CALayer 的头部和属性。

在 iOS 3.0之前

我最近使用的一种方法是创建一个 UIView 子类，它只是简单地绘制一个圆角矩形，然后将 UILabel (在我的例子中是 UITextView)作为子视图放在其中。具体来说:

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

如果你创建了一个通用的 UIView，然后使用检查器修改它的类，你可以使用 Interface Builder 将 RoundrectView 放置在一个视图上。在编译并运行应用程序之前，您不会看到矩形，但至少您可以放置子视图，并在需要时将其连接到插座或操作。

小开

另一种方法是在 UILabel 后面放置一个 png。我有几个标签的视图，它们覆盖了一个背景 png，其中包含了各个标签的所有艺术品。

小开

你有没有尝试过使用 Interface Builder (有圆角的)的 abc 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]];


用你的 UILabel代替 lblName。

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

小开

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

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

对于基于 OScarsWyck 的 Swift IOS8，答案是:

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

在 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;
小开

我做了一个快速 UILabel子类来达到这个效果。此外，我自动设置文本颜色为黑色或白色，以获得最大的对比度。

结果

colors-rounded-borders

二手职位:

游乐场

把这个粘贴到 iOS 操作系统的游乐场:

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

在 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


}
小开

XCode 7.3.1 iOS 9.3.2

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

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

小开

如果你想通过情节串连图板得到 UI 对象的圆角(UILabel，UIView，UIButton，UIImageView) ，那么设置 clip to bounds true 并设置 User Defined Runtime Attributes键路径为 layer.cornerRadius，type = Number and value = 9(根据您的要求)

Set clip to bounds as Set User Defined Runtime Attributes as

小开

在 Xcode 8.1.2和 Swift 3中工作良好

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

产出:

enter image description here

为什么使用扩展方法？

创建一个 Swift 文件并添加以下代码，该代码在“ UILabel”类中使用了 Extended 方法，这个方法是用户定义的，但是可以用于应用程序中的所有标签，并且有助于保持一致性和清晰的代码，如果你将来改变任何样式只需要在扩展方法中使用。


提交答案