根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看232 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 232|回复: 1
收起左侧

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift

[复制链接]
小开开 发表于 2016-6-30 11:11:41 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑

看到敏捷大拇指上讨论字体的这个帖子《怎样让工程里面的中文和英文使用不同的字体?》,我发此帖以兹参考Iconic库

Iconic will help you make icon fonts integration on iOS easy and effortless. Its main component is in charge of auto-generating strongly typed code in Swift, fully compatible with Objective-C, allowing the integration of vector icons as image or text in your apps.

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 1

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift - 敏捷大拇指 - 根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 1


You will interact with an auto-generated class under the name of {FontName}Icon.swift , which is a light abstraction of the Iconic.swift class. For more information, have a look athow to installandhow to use.

Note: This library hasn't yet been used in production. Consider it in beta!

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 2

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift - 敏捷大拇指 - 根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 2





1、Why Icon Fonts

Web developers have been using icon fonts for quite some time now. It's really, really great!

There are many advantages of using icon fonts on iOS:

  • Resolution independent: scale and tint without quality loss.
  • Automatically scaled for different screen densities.
  • Work with (way) less image files.
  • Improve visual consistency.
  • Platform agnostic.
  • Add better UI accessibility.
  • Simple to work with.


Think about the power of rendering vector icons, natively!

Great. Now, how do I create an icon font, you say?






2、Key Features

  • Very easy to install with CocoaPods.
  • Compatible with Swift and Objective-C.
  • Supports TTF and OTF font files.
  • Auto-generates enums and unicodes mapping, out of the font's PUA range .
  • NSAttributedString and UIImage outputs.
  • Fonts are registered dynamically, effortless. No need to import the file to your project.
  • UIKit extensions( UIBarButtonItem and UITabBarItem ).
  • Auto-generatedicon font html catalog.
  • iOS 8, and tvOS 9 or later.


Note: Some open sourced icon fonts don't include the names of each of their glyphs. This could result in a non-descriptive enum, which can make things less intuitive for you when using Iconic. If you create your own icon font, make sure to properly name each glyph.

Missing Features in Beta

  • Allow rectangular icon glyphs (right now, the lib assumes they're all square sized).
  • Provide OSS icon fonts with fully named glyphs for better usability.





3、Installation



3.1、Via CocoaPods

[Shell] 纯文本查看 复制代码
FONT_PATH='path_to_your_icon_font.ttf' pod install Iconic


When using the FONT_PATH environment variable, it will install Iconic with your icon font and auto-generate all files with its name.

You should then see a similar setup like this:

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 3

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift - 敏捷大拇指 - 根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 3


[Shell] 纯文本查看 复制代码
pod install Iconic


Will install Iconic with its default font,FontAwesome.



3.2、Under the hood

When installing Iconic, several things are happening under the hood:

  • After the Iconic repo is cloned, a custom version ofSwiftGen is downloaded along with its dependencies.
  • Before pods are installed, SwiftGen is compiled
  • Iconizer is ran, executing SwiftGen using a custom stencil for Iconic .
  • SwiftGen does its magic, detecting all unicodes from the PUA range of the provided font file, extracting their unicode values as well as their glyph names. All this data is then used for auto-generating a Switft class of name {FontName}Icon.swift ; a json file is also exported afterwards.
  • Once everything is exported, anHTML icon font catalogis also created.


There is a known bug where sometimes, calling pod install Iconic would not run correctly SwiftGen an retrieve all the icon unicode from a font. If this happens to you, make sure to call pod update Iconic to retrigger SwiftGen.



3.3、Result

This is how the module ouput is going to look like (plus documentation, which has been removed for this example). Notice that API names are adopting the font's file name to make it easy to work with, and everything is strongly typed, making it safe and auto-completable.

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 4

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift - 敏捷大拇指 - 根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 4





4、How to use

For complete documentation, visit CocoaPods' auto-generated docs .



4.1、Import

In Objective-C, you will need to import the Iconic module:

[Objective-C] 纯文本查看 复制代码
@import Iconic;




4.2、Registering the icon font

Registration is required to activate Iconic. You shall do this once, when launching your application. Internally, the icon mapping is retrieved and kept in memory during the application's life term.

Iconic provides a convenient way to register the icon font: Note: the method name may change depending of your icon font's name:

[Objective-C] 纯文本查看 复制代码
Iconic.registerFontAwesomeIcon()


You can also register the font with its family name and unicode mapping:

[Objective-C] 纯文本查看 复制代码
Iconic.registerFont("FontAwesome", map: FontAwesomeIconMap)




4.3、Use as images

You can construct an UIImage instance out of a font's icon and tint it. This may be very convenient for integrating with existing UIKit controls which expect UIImage objects already.

[Swift] 纯文本查看 复制代码
let image = Iconic.imageForFontAwesomeIcon(.CaretRight, size: 16, color: self.view.tintColor)
let imageView = UIImageView(image: image)


Images are created using NSStringDraw APIs to render a UIImage out of an NSAttributedString .



4.4、Use as attributed strings

You may need to icons as text too, to simplify your layout work. For example, instead of having an image and a label, you can combined it all in one single label:

[Swift] 纯文本查看 复制代码
let iconString = Iconic.attributedStringForFontAwesomeIcon(.Home, size: 20, color: .orangeColor())

let attributes = [NSForegroundColorAttributeName: UIColor.orangeColor(),
                  NSFontAttributeName: UIFont.boldSystemFontOfSize(20)]

let labelString = NSMutableAttributedString(string: "  Home", attributes: attributes)
labelString.insertAttributedString(iconString!, atIndex: 0)

let label = UILabel()
label.attributedText = labelString
label.sizeToFit()




4.5、Use as unicode string

Ultimately, you may need to retrieve the unicode string representation on an icon to do more advanced things:

[Swift] 纯文本查看 复制代码
let unicode = Iconic.unicodeStringForFontAwesomeIcon(.Apple)




4.6、Use its font object

For further customization, you may need to use the UIFont object instead:

[Swift] 纯文本查看 复制代码
let font = Iconic.fontAwesomeIconFontOfSize(20)




4.7、UIKit Extensions

UIKit extensions are also included, just to make your code look simpler:

[Swift] 纯文本查看 复制代码
// UITarbBarItem
let tabItem = UITabBarItem(fontAwesomeIcon: .Book, size:20, title: "Book", tag: 0)

// UIBarButtonItem
let buttonItem = UIBarButtonItem(fontAwesomeIcon: .Book, size:20, target: self, action: #selector(didTapButton))

// UIButton
let button = UIButton(type: .System)
button.setFontAwesomeIcon(.Code, size: 20, forState: .Normal)





5、Sample Project

Check out the sample project, everything is demo'd there.

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 5

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift - 敏捷大拇指 - 根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 5





6、Icon Font Catalog

Besides the auto-generated Swift code, you will notice a catalog.html file being added to your directory. This is your icon font catalog, to be used for visual reference about all the icons you have available.

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 6

根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift - 敏捷大拇指 - 根据矢量字体文件生成实用的Swift本地渲染封装库 Iconic.swift 6


Note: if you are using Chrome as your default browser, you will need to restart it using the

[Shell] 纯文本查看 复制代码
open -a 'Google Chrome' --args -allow-file-access-from-files


in the command line to be able to open view the catalog. This is because the html's javascript loads a local json file and Chrome has built-in security features to disable it.




7、Thanks to

  • Olivier Halligon for building and sharingSwiftGen. Such a great tool!
  • The CocoaPods team for always being so responsive and helpful.
  • Dave Gandy for making FontAwesome so awesome.





8、License

This library is licensed under theMIT License.

SwiftGen is licensed under theMIT License.

The Font Awesome font is licensed under the SIL Open Font License .



都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。您的赞赏是我前进的方向。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 多谢贡献内容,内容太详实啦!.

查看全部评分

本帖被以下淘专辑推荐:

智能科技 发表于 2016-6-30 22:57:53 | 显示全部楼层
哟呵,都直接搞字体层面了。。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

淘帖专辑
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表