如何在移动端app中应⽤字体图标iconfonts（转）
How to use icon fonts in your mobile apps
在任何APP设计中实现可图形的⽮量缩放最完美的⽅式是使⽤字体图标.
移动端的设计变的越来越复杂。原因在于多样的屏幕尺⼨与不同的分辨率。 Native版APP⼏乎⽆法提供像素级别完美的视觉体验。
当我们设计APP界⾯中各种图标时，我们不得不⾯临两⽅⾯，好的⼀⾯是，使⽤真实的icons，即使⽤像素设计出吸引⽤户的交互界⾯，这样的交互界⾯能更好的帮助⽤户理解和使⽤你的APP，不太好的⼀⾯就是繁琐乏味的“重复⼯作”。⼀旦你的杰作完成了，你得开始切⽚、组织、优化、适配等⼯作，在开发⼈员将你的视觉设计应⽤于不同设备中时，这些⼯作始终惯穿于每个项⽬。
基本上我⾮常爱⽤像素图标，但我最近发现我花太多时间在清理⽂件夹，寻不同规格的⽬标设备。尽管市⾯上有众多的插件帮你从单个图⽚源导出成多种⽅案的图标与图形，追踪优化各种分辨率、操作系统下图⽚的优化是项可以避免的苦差事⼉。让我们看⼀看基于⽮量的图标字体(icon fonts)
利⽤Fontello⽹站的图标字体⽣成器，我们分分钟就可以⽣成⼀组图标
Friends with benefits (？)
当在设计产品UI时，我们许多美⼯都尽量不使⽤像素图⽚，⽽更倾向于使⽤⽮量图，是有各种原因的。举个粟⼦，在⼀个需要快速变更需求⼜要求保质的的团队中⼯作。保持⽂件⼤⼩的可维护，以及让UI能适应各种尺⼨屏幕，这些都是⽮量图形应⽤时的⼩功能。⽮量图形能让你在⼀个长期的项⽬不会抓狂的渡过。
在⾯对⾃适应、加载时间或retina屏等问题时，基于⽮量图形的解决⽅案已成为基本解决⽅案了，就像CSS效果，为不同⽤户设计⾼质量的WEB UI，由于近期浏览器在⾃定义字体上的较好的⽀持，很多美⼯甚⾄将它们的icons做成web fonts，这⼀样是基于⽮量图形好处理由。
作为⼀名移动端的美⼯，花费了太多时间在切割、组织、打包图形上，我曾好奇是否可以在native的app上应⽤这项⾼级的web技术。
希望能够不再关注分辨率、设备尺⼨，真正关注于设计本⾝的⼯作，我决⼼使⽤图标字体(icon fonts)来增强IOS和ANDROID APP的UI
在应⽤属性列表内加载项⽬⽂件夹内⽤户⾃定义字体
对于可缩放的⾃适应设计来讲，Icon fonts是⼀种惊⼈的解决⽅案。
在开发native app时，你应该记住icon fonts技术有多项超过位图的⾼级特性，这些特性所带来的好处
会影响你的设计⼯作流，以及产品的最终品质。
可缩放性（Scalability）：
基于字体的icon是与分辨率⽆关并能缩放到任何想要程度的技术。你的图标看起来毫不关⼼retina,HDPI,XHDPI等等屏幕，但渲染时会根据⽬标设备⾃动调整，你将有能⼒应对任何当下，未来，或⼤多数任意规格的设备
尺⼨（Size ）：
裁剪到正确的⽐例，icon font的⽂件的⼤⼩要⽐起位图⼩到难以置信的程度，使⽤icon font时，你不需要根据不同设备准备不同的图⽚，你的APP只需要在启动时加载⼀次icon font⽂件即可。
可维护性（Maintainability）：
⾃你的icon打包进⼀个字体⽂件，在项⽬⾃始⾄终你仅需要维护这个单⼀的字体⽂件。
通过管理字体⽂件你可以很⾃然的组织你的icon集合，任意的进⾏修改或扩展
可推⼴性（Adoption）：
然⽽，应⽤这样的icon fonts可能会影响你和你同事之间的⼯作流程，但说服让他们采⽤这样的技术也⾮常简单，有数款免费或收费的⼯具帮
你轻松达到⽬的并能看到很好的应⽤结果，在⼏乎任意（⼿机）移动平台、浏览器或操作系统
灵活性（Flexibility）：
应⽤icon fonts技术中最有意义的⼀项能⼒是可以操纵icon fonts，改变颜⾊，⼤⼩，仅仅⼏⾏代码就可以在瞬间改变外观
可交互性(Interactivity)：
由于灵活性以及能够通过代码⽅便的操纵，icon fonts 是独⼀⽆⼆的在运⾏时被操纵，通过应⽤icon fonts技术，你能轻松的在不同状态显⽰对应的不同效果，创建动画。
虽然icon fonts为设计提供了众多好处为⼀些有趣的设计提供可能性，⾃然地，它也不是全权的解决⽅案。⼀旦你的设计中需要的颜⾊超过⼀种，实现复杂的视觉设计，icon font就有限制了。⽆认如何，主流与⾮主流的icon fonts都能在互联⽹上到，在我们使⽤之前web设计界已经很流⾏了，并有很多服务帮你创建梦幻的icon fonts集合
通过xcode中的outlet connection, 在view呈现后，你还能很⽅便的改变label
Using icon fonts on iOS
在IOS中使⽤字体图标
在IOS中应⽤icon font⾮常的简单粗爆。在⼀开始你最好通过使⽤Fontello或IcoMoon收集⼀些图标并整合进你的APP。另⼀种⽅法是你⾃⼰花时间⾃⼰做出来，但创造性的⼯作的总要花掉你很多时间。
那么现在我们仅仅需要将得到的icon整合进我们的APP
你只需要懂得IOS开发基本的⽂件结构以及.tff后缀的字体⽂件icon font
为了测试icon font技术，我们在Xcode内新建⼀个Single View Application的⼯程。⼯程建完后就把你的字体⽂件复制进⼯程⽬录，如果不出什么意外，你应该在你的Project Navigator中看到对应的字体⽂件了
为了让Xcode理解你将要如何使⽤导⼊的⽂件，你得在你的应⽤程序的Info.plist内建⽴“链接”。这个plist⽂件在Supporting Files⽂件夹内，表现为meta data即可理解为hash表。为了在编译app时能包含进你的字体⽂件，在list上简单新建⼀⾏（右键然后add row）名字选择为Fonts provided by application，在其下给字体⽂件取个名字，名字就是你的应⽤程序中⽤来识别你的字体⽂件的。在我们这个测试⼯程中，值为f。现在Xcode知道了我们导⼊的⽂件能⼲什么，我们能在程序中使
⽤导⼊的字体⽂件了
把你的app切换到storyboard模式，在view中你喜欢的地⽅放⼀个label组件⽤来显⽰icon，在设置完label后，我们需要建⽴⼀个outlet。
在storyboard中做这些事情都很简单，在Assistant Editor Mode模式下
此模式下显⽰了你的图形界⾯和ViewController界⾯。现在简单的按住ctrl键，从label组件拖动就会现线条，直接拖线条到ViewController到@interface这⾏代码上放开就会弹出⼀个⼩界⾯，输⼊名称，⽐如 iconLabel，outlet就建成了，代码中你会发现多了下⾯这样⼀⾏：
手机上可以打html与css的app@property (weak, nonatomic) IBOutlet UILabel *iconLabel
现在你就能通过代码来控制label组件了，通过编辑ViewController（.m后缀的⽂件）设置label。在viewDidload⽅法内加⼊以下⼏⾏代码，就像下⾯那样
( void)viewDidLoad{
  [super viewDidLoad];
  [iconLabel setFont:[UIFont fontWithName:@"fontello" size:130]];
  [iconLabel setText:[NSString stringWithUTF8String:"\u2692"]];
}
添加的第⼀条代码⽤来定义字体应⽤于label并设置字号，这⾥我们设置了130pt
在使⽤这些命令时要注意字体名称，这⾥要填写字体的真实名称，即在字体簿打开的字体名或任何其它编辑器内能显⽰的字体名称。特别注意这点，因为字体名很可能与字体⽂件名称不⼀样
在第⼆⾏中⽂字⽤Unicode字符 Hammer and Pick (2692)编码。
虽然有点神秘，获取icon字体的unicode字符编码还是⽐较容易的。可以使⽤字体编辑器，或者直接上传到Icon Moon这类⽹站，你可以毫不费⼒的将icon字体转换成unicode编码
你可以通过Android XML 语法来申明任何你想要的UI属性
Colours, gradients and shadows
现在icon“引⽤”已经建⽴，你都搞定了。在我们通过代码操作label前，你得先运⾏看看你的⼯作成果。最终，这也是你将icon字体合并进app 所要做的。从现在开始有趣的事⼉才开始。⽂本的所有操作都由你掌控了，例如：颜⾊，透明度，渐变，阴影。
例如应⽤以下⼏⾏代码，让icon变成红⾊+阴影：
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);
有许多效果可以使⽤。⼀些相对来说⽐较复杂，但所有⽂本效果都通⽤。动画或任何复杂的操作只要你能想到的都可以做了
Using icon fonts on Android
在Android中应⽤字体图标
同样的，在开发Android应⽤时也⼀样能使⽤icon fonts就像⽤在ios上⾯⼀样，能得到⼀样的好处。
就应⽤范围⽽⾔，Android更加有意思更有⽤。因为Android有着更多不同分辨率，不同屏幕的设备平台。最重要的是Android默认不⽀持⽮量图形，这对开发者和设计⼈员⾯对不同Android设备时可是⼀个重⼤打击
在开始开发你的新Android应⽤之前，你仅需要知道⼀个app最基本的⽂件构架，同样的icon font⽂件也是.tff后缀，使⽤包含了Android ADT 的Eclipse IDE，你可以开始新建⼀个Blank Activity的Android Application Project。在项⽬设置后，复杂.tff⽂件到你的资源⽂件⽬录内。⼀旦复制成功，Package Explorer⾯板内应该能看到
接下来，在你的Main Activity View内创建⼀个TextView。你可以在layout⽂件夹内到你的资源⽂件。⽂件名应该是 l。在多数情况下，Android SDK已经将⼀个⽂本为“Hello world”的TextView放到了你的View内，我们就能使⽤这个TextView了。
在定义Icon各属性后，你能在模拟器内看到你的icon了。
为了操作TextView，我们需要将图形模式切换到切换到XML View内。现在为TextView添加⼀个ID，以便接下来UI和代码建⽴引⽤关系
你的TextView应该看起来像下⾯这样
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:id="@+id/iconLabel" />
通过使⽤ID，我们能够在APP内任何地⽅操作TextView。现在你可以切换到MainActivity.java⽂件添加⼀些代码来加载icon font了。在MainActivity内有⼀个⽅法名为onCreate的⽅法。加载和应⽤icon fonts都在此⽅法内，如下
TextView iconLabel = (TextView) findViewById(R.id.iconLabel);
Typeface font = ateFromAsset(getAssets(), "f");
iconLabel.setTypeface(font); iconLabel.setText("\u2692");
和上⾯的IOS例⼦很像，通过引⽤到label组件，我们告诉Android应该使⽤哪个⾃定义字体到TextView上⾯。之后⼏⾏使⽤Unicode字符编码，这次以JAVA⽅式⽽已。运⾏程序后你就可以看到你的icon在Main Activity的View上了
在应⽤成功后，你可以根据你的需要操作icon了。Android UI构建通常由interface builder或组织XML⽂件来实现，要添加⼀些效果，只要回到Main Activity的XML部分到添加了Label ID的地⽅，添加⼀些代码就可。例如添加以下代码会让你的icon变⼤，带点透明的红⾊，并伴有阴影。
android:id="@+id/iconLabel"
android:textSize="120dp"
android:textColor="#ccff0000"
android:shadowColor="#99000000"
android:shadowRadius="2" />
有很多的效果可以应⽤。就像在IOS中⼀样，动画或者复杂的操作都由你掌控了。最⼤的好处是⾃定义的icon fonts可以⼴泛的适配各类操作系统。任何⽀持⾃定义icon fonts的平台都允许你使⽤全新的这些效果
使⽤字体编辑器，你能优化现存的icons或解放你的思想让你创建出⾃⼰的杰作

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。