关于ios：Swift-两行文字的UIButton


Swift - UIButton with two lines of text

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

我正在尝试在ui生成器中而不是通过编程来完成所有这些操作。

谢谢

有两个问题。

I was wondering if it is possible to create a UIButton with two lines
of text

这可以通过使用情节提要或以编程方式来实现。

故事板：

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

enter image description here

以编程方式：

1
2
3
4
5
override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

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

I need each line to have a different font size
1

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

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

斯威夫特5：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@IBOutlet weak var btnTwoLine: UIButton?

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

    //applying the line break mode
    textResponseButton?.titleLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping;
    let buttonText: NSString ="hello
there"

    //getting the range to separate the button title strings
    let newlineRange: NSRange = buttonText.range(of:"
")

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

    if(newlineRange.location != NSNotFound) {
        substring1 = buttonText.substring(to: newlineRange.location)
        substring2 = buttonText.substring(from: newlineRange.location)
    }

    //assigning diffrent fonts to both substrings
    let font1: UIFont = UIFont(name:"Arial", size: 17.0)!
    let attributes1 = [NSMutableAttributedString.Key.font: font1]
    let attrString1 = NSMutableAttributedString(string: substring1, attributes: attributes1)

    let font2: UIFont = UIFont(name:"Arial", size: 11.0)!
    let attributes2 = [NSMutableAttributedString.Key.font: font2]
    let attrString2 = NSMutableAttributedString(string: substring2, attributes: attributes2)

    //appending both attributed strings
    attrString1.append(attrString2)

    //assigning the resultant attributed strings to the button
    textResponseButton?.setAttributedTitle(attrString1, for: [])
}

较早的斯威夫特

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@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
there"

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

        //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
2
3
4
5
6
7
8
9
    let button = UIButton()
    button.titleLabel?.numberOfLines = 0
    button.titleLabel?.lineBreakMode = .byWordWrapping
    button.setTitle("Foo
Bar", for: .normal)
    button.titleLabel?.textAlignment = .center
    button.sizeToFit()
    button.addTarget(self, action: #selector(rightBarButtonTapped), for: .allEvents)
    navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)

我注意到大多数解决方案中存在一个问题，即在将换行模式设置为"字符换行"时，第二行将与第一行对齐

使所有线条居中。
只需将标题从"普通"更改为"属性"，然后就可以使每行居中

attributed centered title

SWIFT 3语法

1
2
3
4
5
let str = NSMutableAttributedString(string:"First line
Second 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)
相关讨论

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

enter image description here

我已解决此问题，而我的解决方案仅在情节提要中。

变化：

它在身份检查器->用户定义的运行时属性(这些键路径)中添加：

  • numberOfLines = 2
  • titleLabel.textAlignment = 1

用户定义的运行时属性

我在属性检查器中添加了此代码：

  • 换行符=自动换行

自动换行

您需要在代码中执行其中的一些操作。您不能在IB中设置2种不同的字体。除了将换行符模式更改为字符换行之外，您还需要类似这样的内容来设置标题，

1
2
3
4
5
6
7
8
9
override func viewDidLoad() {
        super.viewDidLoad()
        var str = NSMutableAttributedString(string:"First line
Second 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)

    }

我猜，一种方法是使用标签。我这样做了，看来还可以。我可以将其创建为UIButton，然后公开标签。我不知道这是否有意义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    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)