概要
Swiftで袋文字を実現したいという話を聞いて、調べたら実現方法がさっくり見つかったので残しておくことにした。
実現方法
UILabel
の extension
を定義して、そのメソッドを使うだけ。
参考記事のままだとエラーになるのでよしなに修正してある。
extension UILabel{ /// makeOutLine /// /// - Parameters: /// - strokeWidth: 線の太さ。負数 /// - oulineColor: 線の色 /// - foregroundColor: 縁取りの中の色 func makeOutLine(strokeWidth: CGFloat, oulineColor: UIColor, foregroundColor: UIColor) { let strokeTextAttributes = [ .strokeColor : oulineColor, .foregroundColor : foregroundColor, .strokeWidth : strokeWidth, .font : self.font ] as [NSAttributedString.Key : Any] self.attributedText = NSMutableAttributedString(string: self.text ?? "", attributes: strokeTextAttributes) } }
見た目があまり美しくないので、静的な用途であればIllustratorなどのアプリケーションでSVG書き出ししたものを使うと良い。
Playground
Playgroundにコードをコピペして実行するとどんな感じが確認できる。
import UIKit extension UILabel{ /// makeOutLine /// /// - Parameters: /// - strokeWidth: 線の太さ。負数 /// - oulineColor: 線の色 /// - foregroundColor: 縁取りの中の色 func makeOutLine(strokeWidth: CGFloat, oulineColor: UIColor, foregroundColor: UIColor) { let strokeTextAttributes = [ .strokeColor : oulineColor, .foregroundColor : foregroundColor, .strokeWidth : strokeWidth, .font : self.font ] as [NSAttributedString.Key : Any] self.attributedText = NSMutableAttributedString(string: self.text ?? "", attributes: strokeTextAttributes) } } let label = UILabel(frame: CGRect(x: 0, y: 0, width: 500, height: 60)) label.font = UIFont.boldSystemFont(ofSize: 50) label.text = "我が家の猫は7.4kg" label.makeOutLine(strokeWidth: -2.0, oulineColor: .white, foregroundColor: .blue)
キャプチャ
おまけ
NSAttributedString.Key
でいろいろ装飾できるので、ドキュメントを読むと面白い。
NSAttributedString.Key
iOSでチラシレイアウトも実現できる。需要はない。
iOSでチラシっぽい価格レイアウトを再現してみた
参考
元ネタ
Custom Label Effects in Swift 4