Swift - 按钮中的属性字符串

Question

我的应用中有一些 UI 按钮，在文本前有一个数字指示符。现在，我只是使用字符串插值来显示字符串之前的数字，如下所示。

fruitButton.setTitle("\(fruitCounter) Fruits", forState: UIControlState.Normal)

我需要让数字更加突出，而不是仅仅与标题文本融为一体。像围绕它的圆圈这样简单的东西就可以解决问题，如下面的设计所示： .

我对 Swift 中的属性字符串进行了一些研究。但是，我只是看到了很多关于更改文本属性的示例。 EG - 更改数字指示器的文本颜色和大小。我不知道如何在后面添加一个圆圈。

我不希望这个圈子成为一个图像，只是为了可扩展性的目的。例如，如果该数字最终是 2 位数长，我需要将圆圈拉伸为椭圆形。我的想法是在数字后面使用一个小视图，然后只应用颜色/alpha/半径来实现我需要的外观。

总结一下：如何在 Swift 中使用属性字符串在数字指示器后面添加圆圈？

Answer 1

您应该创建一个包含这两个元素的UIView 子类。创建包含这些实体的相应.xib 文件或在代码中实现这些实体。您还可以实现touchesBegan，这样这个视图就可以像一个按钮一样工作，或者添加一个按钮而不是文本标签，并实现一个协议以在每次按下按钮时触发。我已经用一些半任意的数字为你开始了这个。你必须和他们一起玩才能让他们恰到好处。

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

然后在你的视图控制器中，使用我写的初始化器：

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

Answer 2

我确实使用自动布局对您的目的进行了采样

这里有代码：

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *content;
@property (weak, nonatomic) IBOutlet UILabel *label;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.content.layer.cornerRadius = MIN(self.content.bounds.size.width, self.content.bounds.size.height)/2;
    self.content.clipsToBounds = true;

}

@end

结果为 1234：

结果为 1：