Swift - UIButton有两行文字

时间:2015-06-06 05:43:16

标签: ios swift uibutton

我想知道是否可以使用两行文本创建一个UIButton。我需要每一行都有不同的字体大小。第一行是17点,第二行是11点。我已经尝试过将两个标签放在UIButton中,但是我不能让它们留在按钮的范围内。

我试图在ui构建器中完成所有这些操作,而不是以编程方式完成。

由于

11 个答案:

答案 0 :(得分:185)

有两个问题。

  

我想知道是否可以用两行创建一个UIButton   文本

这可以通过使用故事板或以编程方式实现。

故事板:

将“换行符模式”更改为字符换行自动换行,然后使用 Alt / Option + Enter 键输入新行在UIButton的标题栏中。

enter image description here

<强>编程:

override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        btnTwoLine?.titleLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping;
}
  

我需要每一行都有不同的字体大小   1

最糟糕的情况是,您可以使用自定义UIButton类并在其中添加两个标签。

更好的方法是,使用NSMutableAttributedString。请注意,这只能通过编程方式实现。

@IBOutlet weak var btnTwoLine: UIButton?

override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        //applying the line break mode
        btnTwoLine?.titleLabel?.lineBreakMode = NSLineBreakMode.ByWordWrapping;

        var buttonText: NSString = "hello\nthere"

        //getting the range to separate the button title strings
        var newlineRange: NSRange = buttonText.rangeOfString("\n")

        //getting both substrings
        var substring1: NSString = ""
        var substring2: NSString = ""

        if(newlineRange.location != NSNotFound) {
            substring1 = buttonText.substringToIndex(newlineRange.location)
            substring2 = buttonText.substringFromIndex(newlineRange.location)
        }

        //assigning diffrent fonts to both substrings
        let font:UIFont? = UIFont(name: "Arial", size: 17.0)
        let attrString = NSMutableAttributedString(
            string: substring1 as String,
            attributes: NSDictionary(
                object: font!,
                forKey: NSFontAttributeName) as [NSObject : AnyObject])

        let font1:UIFont? = UIFont(name: "Arial", size: 11.0)
        let attrString1 = NSMutableAttributedString(
            string: substring2 as String,
            attributes: NSDictionary(
                object: font1!,
                forKey: NSFontAttributeName) as [NSObject : AnyObject])

        //appending both attributed strings
        attrString.appendAttributedString(attrString1)

        //assigning the resultant attributed strings to the button
        btnTwoLine?.setAttributedTitle(attrString, forState: UIControlState.Normal)

    }

<强>输出

enter image description here

答案 1 :(得分:13)

我正在寻找几乎相同的主题,除了我不需要两种不同的字体大小。如果有人正在寻找一个简单的解决方案:

    let button = UIButton()
    button.titleLabel?.numberOfLines = 0
    button.titleLabel?.lineBreakMode = .byWordWrapping
    button.setTitle("Foo\nBar", for: .normal)
    button.titleLabel?.textAlignment = .center
    button.sizeToFit()
    button.addTarget(self, action: #selector(rightBarButtonTapped), for: .allEvents)
    navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)

答案 2 :(得分:10)

我注意到大多数解决方案存在一个问题,即将换行模式设为“字符换行”时,第二行将与第一行保持对齐

使所有线条居中。 只需将标题从Plain更改为Attributed,然后您可以使每一行居中

attributed centered title

答案 3 :(得分:5)

将换行更改为字符换行,选择按钮并在属性检查器中转到换行符并将其更改为字符换行

enter image description here

答案 4 :(得分:5)

SWIFT 3语法

let str = NSMutableAttributedString(string: "First line\nSecond Line")
str.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: 17), range: NSMakeRange(0, 10))
str.addAttribute(NSFontAttributeName, value: UIFont.systemFont(ofSize: 12), range: NSMakeRange(11, 11))
button.setAttributedTitle(str, for: .normal)

答案 5 :(得分:3)

我已修复此问题,而我的解决方案仅在故事板中。

<强>的变化:

它添加在 Identity Inspector中 - &gt;用户定义的运行时属性(这些KeyPaths):

  • numberOfLines = 2
  • titleLabel.textAlignment = 1

User Defined Runtime Attributes

我在属性检查器中添加了这个:

  • 换行=自动换行

Word wrap

答案 6 :(得分:1)

我想,一种方法是使用标签。我做了这个,似乎工作正常。我想我可以将它创建为UIButton,然后公开标签。我不知道这是否有意义。

    let firstLabel = UILabel()

    firstLabel.backgroundColor = UIColor.lightGrayColor()
    firstLabel.text = "Hi"
    firstLabel.textColor = UIColor.blueColor()
    firstLabel.textAlignment = NSTextAlignment.Center
    firstLabel.frame = CGRectMake(0, testButton.frame.height * 0.25, testButton.frame.width, testButton.frame.height * 0.2)
    testButton.addSubview(firstLabel)

    let secondLabel = UILabel()

    secondLabel.backgroundColor = UIColor.lightGrayColor()
    secondLabel.textColor = UIColor.blueColor()
    secondLabel.font = UIFont(name: "Arial", size: 12)
    secondLabel.text = "There"
    secondLabel.textAlignment = NSTextAlignment.Center
    secondLabel.frame = CGRectMake(0, testButton.frame.height * 0.5, testButton.frame.width, testButton.frame.height * 0.2)
    testButton.addSubview(secondLabel)

答案 7 :(得分:0)

您需要在代码中执行此操作。你不能在IB中设置2种不同的字体。除了将换行模式更改为字符换行之外,还需要这样的设置标题,

override func viewDidLoad() {
        super.viewDidLoad()
        var str = NSMutableAttributedString(string: "First line\nSecond Line")
        str.addAttribute(NSFontAttributeName, value: UIFont.systemFontOfSize(17), range: NSMakeRange(0, 10))
        str.addAttribute(NSFontAttributeName, value: UIFont.systemFontOfSize(12), range: NSMakeRange(11, 11))
        button.setAttributedTitle(str, forState: .Normal)

    }

答案 8 :(得分:0)

我的方式:

func setButtonTitle(title: String, subtitle: String, button: UIButton){
        //applying the line break mode
        button.titleLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping;
        let title = NSMutableAttributedString(string: title, attributes: Attributes.biggestLabel)
        let subtitle = NSMutableAttributedString(string: subtitle, attributes: Attributes.label)
        let char = NSMutableAttributedString(string: "\n", attributes: Attributes.biggestLabel)
        title.append(char)
        title.append(subtitle)
        button.setAttributedTitle(title, for: .normal)
    }

答案 9 :(得分:0)

不幸的是,当我想在CollectionView中使用一个多行按钮时,建议的解决方案对我来说没有用。然后,一位同事向我展示了一种解决方法,如果有人遇到相同的问题,我想分享一下-希望能帮到您!创建一个从UIControl继承的类,并使用标签对其进行扩展,然后其行为类似于按钮。

class MultilineButton: UIControl {

    let label: UILabel = {
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.numberOfLines = 0
        $0.textAlignment = .center
        return $0
    }(UILabel())

    override init(frame: CGRect) {
        super.init(frame: frame)

        addSubview(label)

        NSLayoutConstraint.activate([
            label.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
            label.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor),
            label.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor),
            label.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor)
        ])
    }

    override var isHighlighted: Bool {
        didSet {
            backgroundColor = backgroundColor?.withAlphaComponent(isHighlighted ? 0.7 : 1.0)
            label.textColor = label.textColor.withAlphaComponent(isHighlighted ? 0.7 : 1.0)
        }
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

答案 10 :(得分:0)

Xcode 13 (iOS 15) 的新功能

enter image description here

从 Xcode 13 开始,按钮的标题和副标题可能会单独设置它们的属性。

使用故事板:

在按钮的属性检查器中,按标题选择“属性”。然后更改标题和副标题的字体大小。

enter image description here

或以编程方式:

https://datatracker.ietf.org/doc/html/rfc6749#section-2.2