首页 文章

Swift - 按钮中的归属字符串

提问于
浏览
2

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

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

我需要更多的数字,而不是仅仅与 Headers 文本混合 . 像围绕它的圆圈一样简单就可以解决问题,如下面的设计所示:
I need my buttons to have a styled number indicator like in the photo.
.

我对Swift中的Attributed Strings进行了一些研究 . 但是,我刚刚看到许多关于更改文本属性的示例 . EG - 更改数字指示器的文本颜色和大小 . 我无法弄清楚如何在后面添加一个圆圈 .

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

总结一下:如何使用Swift中的Attributed Strings在我的数字指示器后面添加圆圈?

2 回答

  • 2

    您应该创建一个包含这两个元素的 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)
        }
    

    然后在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)
    }
    
  • -1

    我用autolayout做了一些类似于你的目的的东西

    enter image description here

    代码在这里:

    @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:

    enter image description here

    数字为1的结果:

    enter image description here

相关问题