web-dev-qa-db-fra.com

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 sera de 11 points. J'ai essayé de jouer avec mettre deux étiquettes à l'intérieur d'un UIButton, mais je ne peux pas les amener à rester dans les limites du bouton.

J'essaie de faire tout cela dans le constructeur ui, et non par programmation.

Merci

iosswiftuibutton
82
Scott

Il y a deux questions.

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

Ceci est possible en utilisant le storyboard ou par programmation.

Storyboard:

Changez le 'mode de saut de ligne' en saut de caractère ou retour à la ligne et utilisez la touche Alt/Option + Entrée pour saisir une nouvelle ligne dans les UIButton Champ de titre.

enter image description here

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 classe personnalisée UIButton et y ajouter deux étiquettes.

Le meilleur moyen est d'utiliser NSMutableAttributedString. Notez que cela ne peut être réalisé que par programme.

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

    }

sortie

enter image description here

198
Shamsudheen TK

Je cherchais presque le même sujet, sauf que je n'avais pas besoin de deux tailles de police différentes. Si 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)
17
Nico S.

J'ai remarqué un problème dans la plupart des solutions qui consiste à activer le saut de ligne en mode saut de ligne, la deuxième ligne reste alignée sur la première ligne.

Pour centrer toutes les lignes. il suffit de changer le titre De plaine à Attribué pour pouvoir ensuite centrer chaque ligne

attributed centered title

11
Musa almatri

Syntaxe Swift

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)
6
Maksim Kniazev

changez le saut de ligne en saut de caractère, sélectionnez votre bouton et dans l'inspecteur d'attributs allez dans le saut de ligne et changez-le en saut de caractère

enter image description here

5
Sabhay Sardana

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

Modifications:

Il a ajouté dans Inspecteur d'identité -> 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

3
A. Trejo

Une façon de faire est d'utiliser des étiquettes, je suppose. J'ai fait ça et ça a l'air de bien marcher. Je pourrais le créer comme un 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)
1
Scott

Vous devez en faire une partie 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, 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)

    }
1
rdelmar