iOS标签圈成一圈

Posted 2023-02-24

【中文标题】iOS标签圈成一圈

【英文标题】：iOS label in a circle

【发布时间】：2016-11-16 12:28:05

【问题描述】：

您好，我正在尝试使用 UILabel 图层绘制一个圆圈，但是，我的标签仅显示数字，而不是我为标签创建的背景颜色或边框。为什么是这样 ？ 这是我的代码：

let countLabel = UILabel()
countLabel.text = "5"
let size:CGFloat = 55.0
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center
countLabel.font = UIFont.systemFont(ofSize: 14.0)
countLabel.bounds = CGRect(x : 0.0,y : 0.0,width : size, height :  size)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
//countLabel.layer.masksToBounds = true
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor

countLabel.center = CGPoint(x:200.0,y: 200.0)
countLabel.translatesAutoresizingMaskIntoConstraints = false
self.topContainer.addSubview(countLabel)
countLabel.topAnchor.constraint(equalTo: profileImage.topAnchor).isActive = true
countLabel.trailingAnchor.constraint(equalTo: profileImage.trailingAnchor, constant: 10).isActive = true        

我想要这样的东西。

。

但是上面没有输出橙色。为什么？

【问题讨论】：

你试过将clipsToBound设置成true吗？

我试过 clipstobound，我的标签根本不显示

取消注释countLabel.layer.masksToBounds = true并使用countLabel.backgroundColor = .orange设置标签的backgroundColor

【参考方案1】：

尝试添加以下代码：

countLabel.layer.cornerRadius = 0.5 * countLabel.bounds.size.width

代替：

// remove the below code of line from your code 
countLabel.layer.cornerRadius = size / 2

【讨论】：

标签的框架是使用size 创建的。这两个代码是相同的。

我尊重你的话，但幸运的是，这里的返回值会产生差异。

【参考方案2】：

我猜你在这里偶然发现了一个错误。

如果我将基于您的代码的代码库添加到 Playground 中，它会输出“空图像”而不是显示视图。

但如果我用框架创建标签，它就可以工作。

不工作：

let countLabel = UILabel()
countLabel.frame = CGRect(x : 0.0,y : 0.0,width : size, height :  size)

不工作：

let countLabel = UILabel()
countLabel.bounds = CGRect(x : 0.0,y : 0.0,width : size, height :  size)

不工作：

let countLabel = UILabel()
countLabel.sizeToFit()

工作：

let size:CGFloat = 55.0
let countLabel = UILabel(frame: CGRect(x : 0.0,y : 0.0,width : size, height :  size))

来自我的游乐场的完整代码：

import UIKit
let size:CGFloat = 55.0

let countLabel = UILabel(frame: CGRect(x : 0.0,y : 0.0,width : size, height :  size))
countLabel.text = "5"
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center

countLabel.font = UIFont.systemFont(ofSize: 24.0)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.masksToBounds = true
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor

countLabel.translatesAutoresizingMaskIntoConstraints = false

结果：

【讨论】：

如何在堆栈视图中做同样的事情标签？

"this solution not working" 一句无用的话，因为我在代码中展示了几个不起作用的解决方案。此外，这描述了一个明显错误的解决方法——它可能不再存在或已经演变成其他东西。 @RatneshShukla：我不是你个人的错误猎人。你的反对票是不公正的。

@vikingosegundo 可能这个bug已经解决了，但是我尝试了你提到的所有解决方案，但都没有奏效，也许你也可以试试。

当然，正如你问得这么好——不是。创建一个新问题并解释“不起作用”的含义。

【参考方案3】：

使用该代码：

let countLabel = UILabel()
countLabel.text = "5"
let size:CGFloat = 55.0
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center
countLabel.font = UIFont.systemFont(ofSize: 14.0)
countLabel.frame = CGRect(x : 50.0,y : 50.0,width : size, height :  size)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor


self.view.addSubview(countLabel)

我得到了这个结果：

【讨论】：

在 Xcode 8.1 中，我在操场上使用此代码得到“空图像”。

但没有涉及图像？！

【参考方案4】：

删除约束并将countLabel.center设置为您的容器视图中心。在 Playground 中测试：

import UIKit
import PlaygroundSupport

let container = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))

let countLabel = UILabel()
countLabel.text = "5"
let size:CGFloat = 55.0
countLabel.textColor = UIColor.white
countLabel.textAlignment = .center
countLabel.font = UIFont.systemFont(ofSize: 14.0)
countLabel.bounds = CGRect(x : 0.0,y : 0.0,width : size, height :  size)
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.masksToBounds = true
countLabel.layer.backgroundColor = UIColor.orange.cgColor
countLabel.layer.borderColor = UIColor.orange.cgColor

countLabel.center = container.center
countLabel.translatesAutoresizingMaskIntoConstraints = false
container.addSubview(countLabel)
//countLabel.topAnchor.constraint(equalTo: countLabel.topAnchor).isActive = true
//countLabel.trailingAnchor.constraint(equalTo: countLabel.trailingAnchor, constant: 10).isActive = true

PlaygroundPage.current.liveView = container

【参考方案5】：

试试这个

countLabel.layer.masksToBounds = YES;
countLabel.layer.cornerRadius = 17.5;//this should half of you laber layer
countLabel.backgroundColor = [ViewController colorFromHexString:@"#f36f34"];
countLabel.text = [NSString stringWithFormat:@"%d",CartItemCount];
countLabel.font = [UIFont fontWithName:@"Lato-Black" size:15.0];
countLabel.textColor = [ViewController colorFromHexString:@"#ffffff"];

【讨论】：

sagar 它是一个Swift 标记的问题。

您可以使用在线转换器进行转换。

【参考方案6】：

创建了一个视图并将其制成一个圆圈，然后在里面添加了标签。这是代码：

let size:CGFloat = 36
        let someView = UIView()
        someView.translatesAutoresizingMaskIntoConstraints = false
        someView.layer.cornerRadius = size/2
        someView.backgroundColor = .orange
        someView.layer.borderColor = UIColor.white.cgColor
        someView.layer.borderWidth = 2

        self.topContainer.addSubview(someView)

        someView.topAnchor.constraint(equalTo: profileImage.topAnchor).isActive = true
        someView.trailingAnchor.constraint(equalTo: profileImage.trailingAnchor, constant: 10).isActive = true
        someView.heightAnchor.constraint(equalToConstant: size).isActive = true
        someView.widthAnchor.constraint(equalToConstant: size).isActive = true

        let countLabel = UILabel()
        countLabel.text = "5"
        countLabel.textColor = UIColor.white
        countLabel.textAlignment = .center
        countLabel.font = UIFont.systemFont(ofSize: 14.0)

        countLabel.translatesAutoresizingMaskIntoConstraints = false
        someView.addSubview(countLabel)

        countLabel.centerXAnchor.constraint(equalTo: someView.centerXAnchor).isActive = true
        countLabel.centerYAnchor.constraint(equalTo: someView.centerYAnchor).isActive = true