스트링 아웃라인에 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

플레이 그라운드에서 코드를 복사해 실행하면 어떤 느낌인지 확인할 수 있다.

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

개인이 매번 읽는 슬라이드

가장 높다
Mastering Textkit