如何在移动端app中应用字体图标icon fonts （转）

原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral

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，在其下给字体文件取个名字，名字就是你的应用程序中用来识别你的字体文件的。在咱们这个测试工程中，值为fontello.ttf。如今Xcode知道了咱们导入的文件能干什么，咱们能在程序中使用导入的字体文件了

 

 

把你的app切换到storyboard模式，在view中你喜欢的地方放一个label组件用来显示icon，在设置完label后，咱们须要创建一个outlet。

在storyboard中作这些事情都很简单，在 Assistant Editor Mode模式下

 

此模式下显示了你的图形界面和ViewController界面。如今简单的按住ctrl键，从label组件拖动就会现线条，直接拖线条到ViewController到@interface这行代码上放开就会弹出一个小界面，输入名称，好比 iconLabel，outlet就建成了，代码中你会发现多了下面这样一行：

@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.textColor = [UIColor redColor];
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文件夹内找到你的资源文件。文件名应该是 activity_main.xml。在多数状况下，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 = Typeface.createFromAsset(getAssets(), "fontello.ttf"); 
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或解放你的思想让你建立出本身的杰做