web-dev-qa-db-ja.com

UILabelサブクラスのアウトラインUILabelテキスト

UILabelテキストに単純に輪郭/ストローク/輪郭を追加する方法を模索しています。 UILabelの背景ではなく、テキストの文字の周りのストロークについて話します。

Swift 3を使用しています。テキストのアウトラインを直接サブクラスUILabelに記述したいと思います。

私はこれを行う方法を示唆する複数の答えを見つけました：

let strokeTextAttributes = [
        NSStrokeColorAttributeName : UIColor.black,
        NSForegroundColorAttributeName : UIColor.white,
        NSStrokeWidthAttributeName : -4.0,
        NSFontAttributeName : UIFont.boldSystemFont(ofSize: 30)
    ]

    self.attributedText = NSMutableAttributedString(string: self.text!, attributes: strokeTextAttributes)

しかし、問題はそれが機能しないことです。私のテキストはアウトラインなしでまだ同じです...

誰か私をここで助けてもらえますか？それは素晴らしいことです:)

どうもありがとう。みんな乾杯。

iosswiftuilabelstrokeoutline
12
iji

このコードは私にとってはうまくいきます。

スウィフト3

let strokeTextAttributes = [
  NSStrokeColorAttributeName : UIColor.black,
  NSForegroundColorAttributeName : UIColor.white,
  NSStrokeWidthAttributeName : -4.0,
  NSFontAttributeName : UIFont.boldSystemFont(ofSize: 30)
] as [String : Any]

myLabel.attributedText = NSMutableAttributedString(string: "Test me i have color.", attributes: strokeTextAttributes)

Output like this...

Swift 4.2および5.1

let strokeTextAttributes = [
  NSAttributedString.Key.strokeColor : UIColor.red,
  NSAttributedString.Key.foregroundColor : UIColor.white,
  NSAttributedString.Key.strokeWidth : -4.0,
  NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 30)]
  as [NSAttributedString.Key : Any]

labelOutLine.attributedText = NSMutableAttributedString(string: "Your outline text", attributes: strokeTextAttributes)

enter image description here

10
Anand Nimje

ここに実装のクラスがあり、コピーしてテスト用のplaygrondに貼り付けます。

    class StrokedLabel: UILabel {

        var strockedText: String = "" {
            willSet(newValue) {
                let strokeTextAttributes = [
                    NSStrokeColorAttributeName : UIColor.black,
                    NSForegroundColorAttributeName : UIColor.white,
                    NSStrokeWidthAttributeName : -4.0,
                    NSFontAttributeName : UIFont.boldSystemFont(ofSize: 30)
                    ] as [String : Any]

                let customizedText = NSMutableAttributedString(string: newValue,
                                                               attributes: strokeTextAttributes)


                attributedText = customizedText
            }
        }
    }


//////////// PLAYGROUND IMPLEMENTATION PART /////////
    let text = "Stroked text"

// UILabel subclass initialization
    let label = StrokedLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
// simple assign String to 'strockedText' property to see the results
    label.strockedText = text

    label.backgroundColor = UIColor.white


    label

Swift 4.2

import UIKit

class StrokedLabel: UILabel {

var strockedText: String = "" {
    willSet(newValue) {
        let strokeTextAttributes : [NSAttributedString.Key : Any] = [
            NSAttributedString.Key.strokeColor : UIColor.black,
            NSAttributedString.Key.foregroundColor : UIColor.white,
            NSAttributedString.Key.strokeWidth : -4.0,
            NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 30)
            ] as [NSAttributedString.Key  : Any]

        let customizedText = NSMutableAttributedString(string: newValue,
                                                       attributes: strokeTextAttributes)


        attributedText = customizedText
    }
}

}

//////////// PLAYGROUND IMPLEMENTATION PART /////////
  let text = "Stroked text"

  // UILabel subclass initialization
  let label = StrokedLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
  // simple assign String to 'strockedText' property to see the results
  label.strockedText = text

  label.backgroundColor = UIColor.clear


  label

このクラスのリファクタリングは歓迎されるかもしれませんが、このフォームで機能するはずです

enter image description here

ご覧のとおり、使い方はとても便利です。 ????

8
Robert

@anandnimjeの回答はSwift 4.2に変換され、関数にラップされました。

public func stroke(font: UIFont, strokeWidth: Float, insideColor: UIColor, strokeColor: UIColor) -> [NSAttributedStringKey: Any]{
    return [
        NSAttributedStringKey.strokeColor : strokeColor,
        NSAttributedStringKey.foregroundColor : insideColor,
        NSAttributedStringKey.strokeWidth : -strokeWidth,
        NSAttributedStringKey.font : font
        ]
}

使用法：

label.attributedText = NSMutableAttributedString(string: "Hello World", 
attributes: stroke(font: UIFont(name: "SourceSansPro-Black", size: 20)!, 
strokeWidth: 4, insideColor: .white, strokeColor: .black))

UIFontの名前が正しいことを確認してください。そうでないとクラッシュします。あなたが正しい名前を持っているなら、問題になることはありません。

8
J. Doe

以下は、Swift 4.1で記述された私のアプリで使用したものです。

Swift 4.x

let strokeTextAttributes: [NSAttributedStringKey: Any] = [
    NSAttributedStringKey.strokeColor: UIColor.black,
    NSAttributedStringKey.foregroundColor : UIColor.white,
    NSAttributedStringKey.strokeWidth : -3.0,
    NSAttributedStringKey.font : UIFont.boldSystemFont(ofSize: 18)
]
0
fnisi

Swift 5に更新

この回答はAnandnimjeとJ.Doeの回答に基づいており、使用方法をより明確かつ単純にするために更新および合理化することを目的としています。

次の2つの関数を使用するだけです。

func outline(string:String, font:String, size:CGFloat, outlineSize:Float, textColor:UIColor, outlineColor:UIColor) -> NSMutableAttributedString {
    return NSMutableAttributedString(string:string,
                                     attributes: outlineAttributes(font: UIFont(name: font, size: size)!,
                                                        outlineSize: outlineSize, textColor: textColor, outlineColor: outlineColor))
}

func outlineAttributes(font: UIFont, outlineSize: Float, textColor: UIColor, outlineColor: UIColor) -> [NSAttributedString.Key: Any]{
    return [
        NSAttributedString.Key.strokeColor : outlineColor,
        NSAttributedString.Key.foregroundColor : textColor,
        NSAttributedString.Key.strokeWidth : -outlineSize,
        NSAttributedString.Key.font : font
    ]
}

次に、次のようにラベルでアウトラインを使用します。

label.attributedText = outline(string: "Label Text", font: "HelveticaNeue", size: 14, outlineSize: 4, textColor: .white, outlineColor: .black)
0
Ibrahim

次のように属性ディクショナリのタイプを設定すると、コードが機能します。

let strokeTextAttributes: [String: Any] = [
  // etc...
]

多分それはあなたのすべての行方不明ですか？

0
ganzogo