입문

icon Font를 사용하여 아이콘을 봅니다.
이번 사용Icon Font & SVG Icon Sets ❍ IcoMoon에서 생성된 ttf 파일의 글꼴입니다.

개발 환경

category
Version
Swift
3.1
XCode
8.3.3

1단계를 가져옵니다.ttf 파일을 Xcode에 추가

드래그하여 추가합니다.(target 검사를 잊지 마세요.)

2단계를 가져옵니다.info.plist에 대한 Fonts 설정 애플리케이션에서 제공

info.plist의 "Fonts provided by application"에 방금 추가한 ttf 파일의 파일 이름을 기록합니다.
여러 custom font를 사용하려면 Array의 item을 추가하고 파일 이름을 입력하십시오.


배포가 완료되었습니다.

ttf 파일의 PostScript 이름 확인

terminal에서 다음 동작을 실행해서 확인할 수 있습니다.$ mdls <ttfファイルのPATH>예:$ mdls /Users/yuki/Desktop/icomoon/fonts/icomoon.ttf
PostScript 이름은 소스 코드에서 UIFont 인스턴스를 생성하는 데 사용됩니다.let font = UIFont(name: <PostScript名>, size: 20.0)위의 예제에서는let font = UIFont(name: "icomoon", size: 20.0)

UILAbel에 표시

enum에서 사용할 아이콘의 아이콘 이름을 정의합니다.

/// IconFont名
enum IconFont: String {

    /// tongue
    case tongue = "\u{e9e3}"

    /// tongue2
    case highlightedTongue = "\u{e9e4}"

    /// cool
    case cool = "\u{e9eb}"

    /// cool2
    case highlightedCool = "\u{e9ec}"

    /// confused
    case confused = "\u{e9f5}"

    /// confused2
    case highlightedConfused = "\u{e9f6}"

    /// hipster
    case hipster = "\u{e9f9}"

    /// hipster2
    case highlightedHipster = "\u{e9fa}"
}

위의 enum에서 icon 이름을 지정하여 UILAbel에 표시합니다.

// nameには、PostScript名をセット
guard let font = UIFont(name: "icomoon", size: 20) else { return }
let attributedString = NSAttributedString(string: "custom icon font: " + IconFont.tongue.rawValue,
                                          attributes: [NSFontAttributeName: font])
label.attributedText = attributedString

UILAbel에 아이콘을 표시할 수 있습니다!!

UIIMage로 변환

TabBar의 아이콘 등 텍스트를 사용하고 싶다면 불편한 경우도 있다
UII Mage로 변환하는 extension도 준비되어 있습니다.

extension UIImage {

    /// IconFontからUIImageを生成する
    ///
    /// - Parameters:
    ///   - icon: IconFont名
    ///   - fontSize: 基のフォントサイズ (default: 20.0)
    ///   - rect: 生成する画像のサイズ (default: CGSize(width: 20.0, height: 20.0))
    ///   - color: 生成する画像の色 (default: .blue)
    /// - Returns: 画像
    class func iconFont(icon: IconFont,
                        fontSize: CGFloat = 20.0,
                        rect: CGSize = CGSize(width: 20.0, height: 20.0),
                        color: UIColor = .blue) -> UIImage? {

        guard let font = UIFont(name: "icomoon", size: fontSize) else { return nil }
        UIGraphicsBeginImageContextWithOptions(rect, false, 0.0)
        let attributes = [NSForegroundColorAttributeName: color,
                          NSFontAttributeName: font]
        let attributedString = NSAttributedString(string: icon.rawValue,
                                                  attributes: attributes)

        let context = NSStringDrawingContext()
        let boundingRect = attributedString.boundingRect(with: CGSize(width: fontSize, height: fontSize),
                                                         options: .usesLineFragmentOrigin,
                                                         context: context)

        let imageRect = CGRect(x: (rect.width / 2.0) - (boundingRect.size.width / 2.0),
                               y: (rect.height / 2.0) - (boundingRect.size.height / 2.0),
                               width: rect.width,
                               height: rect.height)

        attributedString.draw(in: imageRect)
        let iconImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return iconImage
    }
}

방금 UILAbel에 아이콘이 떴어요.
이번에는 위 extension에서 UIimage로 변환하여 UIimageView에 표시합니다.

// UIImageViewに画像をセット
imageView1.image = UIImage.iconFont(icon: .tongue, color: .orange)
imageView2.image = UIImage.iconFont(icon: .cool, color: .green)
imageView3.image = UIImage.iconFont(icon: .confused, color: .red)
imageView4.image = UIImage.iconFont(icon: .hipster, color: .blue)

UIimageView에도 아이콘이 표시됩니다!!

마지막

Github에서 만든 샘플을 줬어요.
예제 코드