Swift - UIButton mit zwei Textzeilen

Ich habe mich gefragt, ob es möglich ist, einen UIButton mit zwei Textzeilen zu erstellen. Ich brauche jede Zeile, um eine andere Schriftgröße zu haben. Die erste Linie wird 17 Punkte und die zweite 11 Punkte sein. Ich habe versucht, zwei Beschriftungen in einen UIButton einzufügen, aber ich kann sie nicht dazu bringen, innerhalb der Grenzen der Schaltfläche zu bleiben.

Ich versuche dies alles im UI-Builder zu tun und nicht programmgesteuert.

Vielen Dank

Es gibt zwei Fragen.

Ich habe mich gefragt, ob es möglich ist, einen UIButton mit zwei Textzeilen zu erstellen

Dies ist über das Storyboard oder programmgesteuert möglich.

Storyboard:

Ändern Sie den ‚Zeilenumbruch - Modus‘ zu Zeichen Wickeln oder Zeilenumbruch und verwenden Alt / Option + Enter - Taste eine neue Zeile in der UIButton des Titelfeld einzugeben.

Programmatisch:

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

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

Ich brauche jede Zeile, um eine andere Schriftgröße 1 zu haben

Im schlimmsten Fall können Sie eine benutzerdefinierte UIButtonKlasse verwenden und zwei Beschriftungen hinzufügen.

Der bessere Weg ist, nutzen NSMutableAttributedString. Beachten Sie, dass dies nur programmgesteuert erreicht werden kann.

Swift 5:

@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\nthere"

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

    //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: [])
}

Älterer Swift

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

    }

Ausgabe

Ich habe nach fast demselben Thema gesucht, außer dass ich keine zwei verschiedenen Schriftgrößen benötige. Für den Fall, dass jemand nach einer einfachen Lösung sucht:

    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)

Ich habe bei den meisten Lösungen ein Problem festgestellt, bei dem beim Umschalten des Zeilenumbruchmodus auf "Zeichenumbruch" die zweite Zeile an der ersten Zeile ausgerichtet bleibt

Alle Linien zentrieren. Ändern Sie einfach den Titel von "Einfach" in "Attributiert" und Sie können jede Linie zentrieren

SWIFT 3-Syntax

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)

Ändern Sie den Zeilenumbruch in Zeichenumbruch, wählen Sie Ihre Schaltfläche aus und wechseln Sie im Attributinspektor zum Zeilenumbruch und ändern Sie ihn in Zeichenumbruch

Ich habe dies behoben und meine Lösung war nur im Storyboard.

Änderungen:

Es wurde im Identitätsinspektor -> Benutzerdefinierte Laufzeitattribute (diese Schlüsselpfade) hinzugefügt:

• numberOfLines = 2
• titleLabel.textAlignment = 1

Benutzerdefinierte Laufzeitattribute

Ich habe dies im Attributinspektor hinzugefügt:

• Zeilenumbruch = Zeilenumbruch

Zeilenumbruch

Sie müssen einige davon im Code ausführen. Sie können in IB nicht zwei verschiedene Schriftarten festlegen. Zusätzlich zum Ändern des Zeilenumbruchmodus in Zeichenumbruch benötigen Sie Folgendes, um den Titel festzulegen.

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)

    }

Eine Möglichkeit, dies zu tun, sind wohl Etiketten. Ich habe das getan und es scheint in Ordnung zu funktionieren. Ich könnte dies als UIButton erstellen und dann die Beschriftungen verfügbar machen, denke ich. Ich weiß nicht, ob das Sinn macht.

    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)

meine Art:

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

Die vorgeschlagenen Lösungen haben für mich leider nicht funktioniert, als ich eine mehrzeilige Schaltfläche in einer CollectionView haben wollte. Dann zeigte mir ein Kollege eine Problemumgehung, die ich teilen wollte, falls jemand das gleiche Problem hat - hoffe, das hilft! Erstellen Sie eine Klasse, die von UIControl erbt, und erweitern Sie sie um eine Bezeichnung, die sich dann ähnlich wie eine Schaltfläche verhält.

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