Swift - UIButton avec deux lignes de texte

Je me demandais s'il était possible de créer un UIButton avec deux lignes de texte. J'ai besoin que chaque ligne ait une taille de police différente. La première ligne sera de 17 points et la seconde de 11 points. J'ai essayé de jouer avec deux étiquettes à l'intérieur d'un UIButton, mais je ne peux pas les faire rester dans les limites du bouton.

J'essaie de faire tout cela dans le générateur d'interface utilisateur, et non par programme.

Merci

Il y a deux questions.

Je me demandais s'il est possible de créer un UIButton avec deux lignes de texte

Cela est possible en utilisant le storyboard ou par programme.

Storyboard:

Changez le «Mode saut de ligne» en Retour à la ligne de caractère ou Retour à la ligne et utilisez la touche Alt / Option + Entrée pour entrer une nouvelle ligne dans le champ Titre de l'UIButton.

Par programme:

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

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

J'ai besoin que chaque ligne ait une taille de police différente 1

Le pire des cas est que vous pouvez utiliser une UIButtonclasse personnalisée et y ajouter deux étiquettes.

La meilleure façon est d'utiliser NSMutableAttributedString. Notez que cela ne peut être réalisé que par programme.

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

Swift plus âgé

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

    }

Production

Je cherchais à peu près le même sujet, sauf que je n'ai pas besoin de deux tailles de police différentes. Dans le cas où quelqu'un recherche une solution simple:

    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)

J'ai remarqué un problème dans la plupart des solutions qui consiste à faire du mode saut de ligne sur "Character Wrap", la deuxième ligne sera alignée sur la première ligne

Pour centrer toutes les lignes. changez simplement le titre De Plain à Attribué et vous pouvez ensuite centrer chaque ligne

changez le saut de ligne en retour à la ligne, sélectionnez votre bouton et dans l'inspecteur d'attributs, passez au saut de ligne et changez-le en retour à la ligne

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

J'ai corrigé cela et ma solution était uniquement dans le Storyboard.

Changements:

Il a ajouté dans Identity Inspector -> Attributs d'exécution définis par l'utilisateur (ces KeyPaths):

• numberOfLines = 2
• titleLabel.textAlignment = 1

Attributs d'exécution définis par l'utilisateur

J'ai ajouté ceci dans l'inspecteur d'attributs:

• saut de ligne = retour à la ligne

Word wrap

Vous devez faire une partie de cela dans le code. vous ne pouvez pas définir 2 polices différentes dans IB. En plus de changer le mode de saut de ligne en retour à la ligne de caractère, vous avez besoin de quelque chose comme ceci pour définir le titre,

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)

    }

Une façon de le faire est d'utiliser des étiquettes, je suppose. Je l'ai fait, et cela semble fonctionner correctement. Je pourrais créer ceci comme UIButton et ensuite exposer les étiquettes, je suppose. Je ne sais pas si cela a du sens.

    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)

mon chemin:

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

Les solutions suggérées n'ont malheureusement pas fonctionné pour moi lorsque je voulais avoir un bouton mutliline dans un CollectionView. Puis un collègue m'a montré une solution de contournement que je voulais partager au cas où quelqu'un aurait le même problème - j'espère que cela aide! Créez une classe qui hérite de UIControl et étendez-la avec une étiquette, qui se comportera alors comme un bouton.

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