Swift - İki satır metin içeren UIB düğmesi

İki satırlık metinle bir UIButton oluşturmanın mümkün olup olmadığını merak ediyordum. Her satırın farklı bir yazı tipi boyutuna sahip olmasına ihtiyacım var. İlk satır 17, ikincisi 11 puan olacak. Bir UIB düğmesinin içine iki etiket koymayı denedim, ancak bunların düğmenin sınırları içinde kalmasını sağlayamıyorum.

Tüm bunları programlı olarak değil, kullanıcı arabirimi oluşturucusunda yapmaya çalışıyorum.

Teşekkürler

İki soru var.

İki satır metin içeren bir UIButton oluşturmanın mümkün olup olmadığını merak ediyordum.

Bu, film şeridini kullanarak veya programlı olarak mümkündür.

Storyboard:

'Satır Kırma Modu'nu Karakter Kaydırma veya Sözcük Kaydırma olarak değiştirin ve UIButton'ın Başlık alanına yeni bir satır girmek için Alt / Option + Enter tuşunu kullanın.

Programlı olarak:

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

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

Her satırın farklı bir yazı tipi boyutuna sahip olmasına ihtiyacım var 1

En kötüsü, özel bir UIButtonsınıf kullanabilir ve içine iki etiket ekleyebilirsiniz.

Daha iyi yol, yararlanmaktır NSMutableAttributedString. Bunun yalnızca programlı olarak gerçekleştirilebileceğini unutmayın.

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

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

    }

Çıktı

İki farklı yazı tipi boyutuna ihtiyacım olmaması dışında neredeyse aynı konuyu arıyordum. Birinin basit bir çözüm araması durumunda:

    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)

Çözümlerin çoğunda "Karakter Kaydırma" için satır sonu modu yapılırken ikinci satırın ilk satıra hizalı olarak sola hizalı olacağı bir sorun olduğunu fark ettim.

Tüm çizgileri ortalamak için. Başlığı Düzten İlişkilendirilmiş olarak değiştirin ve ardından her bir çizgiyi ortalayın

satır sonunu karakter kaydırmaya değiştirin, düğmenizi seçin ve nitelik denetçisinde satır kesmesine gidin ve karakter kaydırmaya değiştirin

SWIFT 3 Sözdizimi

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)

Bunu düzelttim ve çözümüm sadece Storyboard'daydı.

Değişiklikler:

Bu ilave Kimlik Müfettiş -> Kullanıcı Tanımlı Runtime Nitelikler (bu KeyPaths):

• numberOfLines = 2
• titleLabel.textAlignment = 1

Kullanıcı Tanımlı Çalışma Zamanı Özellikleri

Bunu özellik denetçisine ekledim:

• satır sonu = kelime kaydırma

Kelime kaydırma

Bunlardan bazılarını kodla yapmanız gerekiyor. IB'de 2 farklı yazı tipi ayarlayamazsınız. Satır sonu modunu karakter kaydırmaya değiştirmeye ek olarak, başlığı ayarlamak için buna benzer bir şeye ihtiyacınız var.

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)

    }

Bunu yapmanın bir yolu, sanırım etiketlerle. Bunu yaptım ve iyi çalışıyor gibi görünüyor. Bunu bir UIB düğmesi olarak oluşturabilir ve ardından etiketleri ortaya çıkarabilirim, sanırım. Bunun mantıklı olup olmadığını bilmiyorum.

    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)

benim yolum:

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

Bir CollectionView içinde mutline butonu olmasını istediğimde önerilen çözümler maalesef benim için işe yaramadı. Sonra bir meslektaşım bana birisinin aynı sorunu yaşaması durumunda paylaşmak istediğim bir çözüm gösterdi - umarım bu yardımcı olur! UIControl'den devralan ve onu bir etiketle genişleten ve daha sonra bir düğme gibi davranan bir sınıf oluşturun.

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