我的应用程序中有一些 UI 按钮,它们在文本前有一个数字指示器。现在,我只是使用字符串插值来显示字符串之前的数字,如下所示。
fruitButton.setTitle("\(fruitCounter) Fruits", forState: UIControlState.Normal)
我需要数字更加突出,而不是仅仅与标题文本融为一体。像围绕它的圆圈这样简单的东西就可以解决问题,如下面的设计所示: .
我对 Swift 中的属性字符串进行了一些研究。但是,我只是看到许多关于更改文本属性的示例。 EG - 更改数字指示器的文本颜色和大小。我不知道如何在后面加一个圆圈。
我不希望这个圆圈是一个图像,只是为了可扩展性目的。例如,如果该数字最终为 2 位数长,我需要将圆拉伸(stretch)成椭圆形。我的想法是在数字后面使用一个小 View ,然后仅应用颜色/alpha/半径来实现我需要的外观。
总结一下:如何在 Swift 中使用属性字符串在我的数字指示符后面添加圆圈?
最佳答案
您应该创建一个包含这两个元素的 UIView
子类。创建包含这些实体的相应 .xib
文件或在代码中实现这些实体。您还可以实现 touchesBegan
,这样该 View 就可以像按钮一样工作,或者添加一个按钮而不是文本标签,并实现一个协议(protocol)以在每次按下按钮时触发。我已经用一些半任意的数字为你开始了。你必须和他们一起玩才能让他们恰到好处。
class UICoolButton: UIView {
var labelText: NSString?
var circledNumber: Int?
var circleSubview: UIView?
init(frame: CGRect, labelText: NSString, circledNumber: Int) {
super.init(frame: frame);
self.labelText = labelText;
self.circledNumber = circledNumber;
self.layer.cornerRadius = frame.height/3
self.clipsToBounds = true
addCircledNumber()
addTextLabel(labelText)
}
func setColors(numberColor:UIColor, backgroundColor: UIColor) {
self.backgroundColor = backgroundColor
self.circleSubview?.backgroundColor = numberColor
}
override init(frame: CGRect) {
super.init(frame: frame);
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder);
}
func addTextLabel(text: NSString) {
let origin = CGPoint(x:self.frame.width * 0.4, y:self.frame.height/10)
let size = CGSize(width: self.frame.width/2, height: self.frame.height * 0.8)
let rect = CGRect(origin: origin, size: size)
let label = UILabel(frame: rect)
let attributes: [String : AnyObject] = [NSFontAttributeName : UIFont(name: "Verdana", size: 16.0)!,
NSForegroundColorAttributeName : UIColor.whiteColor()]
label.attributedText = NSAttributedString(string: text, attributes: attributes)
self.addSubview(label)
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
}
func addCircledNumber() {
let height = self.frame.height * 0.4;
let circleDimensions = CGSize(width: height , height:height)
let origin = CGPointMake(self.frame.width * 0.15, self.frame.height - self.frame.height/1.5)
let circleSubview = UIView(frame: CGRect(origin: origin, size: circleDimensions))
circleSubview.layer.cornerRadius = height/2;
circleSubview.backgroundColor = UIColor.darkGrayColor()
let labelHeight = height * 0.8;
let xPosition = circleSubview.bounds.origin.x + 3
let yPosition = circleSubview.bounds.origin.y + 2
let labelOrigin = CGPoint(x: xPosition, y: yPosition)
let labelRect = CGRect(origin: labelOrigin, size: CGSize(width: labelHeight, height: labelHeight))
let numberLabel = UILabel(frame: labelRect);
numberLabel.textAlignment = NSTextAlignment.Center
let numberAsString = NSString(format: "%i", circledNumber!) as String
let attributes: [String : AnyObject] = [NSFontAttributeName : UIFont(name: "Verdana", size: 16.0)!,
NSForegroundColorAttributeName : UIColor.whiteColor()]
numberLabel.attributedText = NSAttributedString(string: numberAsString, attributes: attributes)
circleSubview.addSubview(numberLabel);
self.circleSubview = circleSubview
self.addSubview(circleSubview)
}
然后在你的 View Controller 中,使用我写的 initilizer:
func addCoolButton() {
let rect = CGRect() //choose the frame for your button here
let button = UICoolButton(frame: rect, labelText: "Example", circledNumber: 10);
let backgroundColor = UIColor(red: 243/255.0 , green: 93/255.0, blue: 118/255.0, alpha: 1.0)
let numberColor = UIColor(red: 252/255.0, green: 118.0/255.0, blue: 135/255.0, alpha: 1.0)
button.setColors(numberColor, backgroundColor: backgroundColor)
self.view.addSubview(button)
}
关于ios - Swift - 按钮中的属性字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36413831/