Swift - UIButton dengan dua baris teks

Saya bertanya-tanya apakah mungkin membuat UIButton dengan dua baris teks. Saya ingin setiap baris memiliki ukuran font yang berbeda. Baris pertama akan menjadi 17 poin dan yang kedua akan menjadi 11 poin. Saya sudah mencoba mengotak-atik menempatkan dua label di dalam UIButton, tetapi saya tidak bisa membuatnya tetap berada di dalam batas tombol.

Saya mencoba melakukan semua ini di pembuat ui, dan bukan secara terprogram.

Terima kasih

Ada dua pertanyaan.

Saya bertanya-tanya apakah mungkin membuat UIButton dengan dua baris teks

Ini dimungkinkan melalui penggunaan papan cerita atau secara terprogram.

Papan cerita:

Ubah 'Line Break Mode' menjadi Character Wrap atau Word Wrap dan gunakan tombol Alt / Option + Enter untuk memasukkan baris baru di bidang Judul UIButton.

Secara terprogram:

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

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

Saya ingin setiap baris memiliki ukuran font yang berbeda 1

Kasus terburuknya adalah, Anda dapat menggunakan UIButtonkelas khusus dan menambahkan dua label di dalamnya.

Cara yang lebih baik adalah, manfaatkan NSMutableAttributedString. Perhatikan bahwa, ini hanya dapat dicapai melalui program.

Cepat 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 yang lebih tua

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

    }

Keluaran

Saya mencari topik yang hampir sama, hanya saja saya tidak memerlukan dua ukuran font yang berbeda. Jika seseorang mencari solusi sederhana:

    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)

Saya melihat masalah di sebagian besar solusi yaitu saat membuat mode jeda baris ke "Bungkus Karakter", baris kedua akan dibiarkan sejajar dengan baris pertama

Untuk membuat semua garis berada di tengah. cukup ubah judul From Plain menjadi Attributed dan kemudian Anda dapat membuat setiap baris menjadi tengah

ubah hentian baris menjadi bungkus karakter, pilih tombol Anda dan di inspektur atribut pergi ke jeda baris dan ubah ke bungkus karakter

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

Saya telah memperbaiki ini dan solusi saya hanya ada di Storyboard.

Perubahan:

Itu ditambahkan di Identity Inspector -> User Defined Runtime Attributes (KeyPaths ini):

• numberOfLines = 2
• titleLabel.textAlignment = 1

Atribut Waktu Proses yang Ditentukan Pengguna

Saya menambahkan ini di inspektur atribut:

• jeda baris = bungkus kata

Bungkus kata

Anda perlu melakukan beberapa ini dalam kode. Anda tidak dapat mengatur 2 font berbeda di IB. Selain mengubah mode jeda baris menjadi bungkus karakter, Anda memerlukan sesuatu seperti ini untuk menyetel judul,

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)

    }

Salah satu cara untuk melakukannya adalah dengan label, saya rasa. Saya melakukan ini, dan tampaknya berhasil. Saya bisa membuat ini sebagai UIButton dan kemudian mengekspos labelnya, saya kira. Saya tidak tahu apakah ini masuk akal.

    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)

jalanku:

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

Sayangnya, solusi yang disarankan tidak berhasil bagi saya ketika saya ingin memiliki tombol mutliline di dalam CollectionView. Kemudian seorang kolega menunjukkan kepada saya solusi yang ingin saya bagikan jika seseorang memiliki masalah yang sama - semoga ini membantu! Buat kelas yang mewarisi dari UIControl dan kembangkan dengan label, yang kemudian akan berperilaku serupa seperti tombol.

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