【IT168技术】对于一个优秀的手机应用来说，好的图标是会增色不少的，让用户加深对你的应用的印象。而象Google,苹果等都给出过关于如何设计好的手机应用图标的指导建议。在本文中，将简单探讨使用Sencha Touch 这一快速手机应用开发框架的用户，如何合理在这一框架中实践使用一定规范的应用图标。本文适合对Sencha Touch框架开发有一定基础的读者阅读。
在《如何为IOS应用设计图标》这一文中(地址：https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html)给出了很多设计图标和按钮的非常好的实践，比如建议为不同大小和分辨率的手机应用设计不同的图标。Sencha Touch 2提供了在应用中的类中定义这些图标的方法，这些图标将会在iphone或者ipad应用中的主屏幕中出现。
其中文中提到了一些图片大小的建议尺寸，如下：
对于iphone和iPod Touch(pixels为单位)，图片大小为57*57
对于高分辨率的iphone和ipod Touch(pixels为单位)，图片大小为 114 x 114
ipad(pixels为单位),图片大小为72 x 72
高分辨率的iPad (pixels为单位): 144 x 144
下图比较直观地告诉开发者，不同大小的图标在以上尺寸型号的设备中的大小：
在sencha touch 框架中，我们通过设置Application类中的三个属性：icon, phoneIcon, 和tabletIcon，从而达到设置图标大小的目的。其中icon的设置有两种方式，首先是单一的一个参数的方式，这种方式中icon的属性是接收一个表示图片路径的字符串，而无论应用是安装在iphone的什么位置，如下代码所示：
name: "IconsSample",
views: ["MainPanel"],
icon: "img/app-icon.png",
launch: function () {
var mainPnl = Ext.create("IconsSample.view.MainPanel");
Ext.Viewport.add(mainPnl);
}
});
这里，通过icon属性指定使用了img目录下的app-icon.png这张图片。
此外，sencha touch也十分人性化，提供了phone icon和tablet icon,分别用来作为手机应用和平板应用时使用的图标，代码如下：
name: "IconsSample",
views: ["MainPanel"],
icon: "img/app-icon.png",
phoneIcon: "img/app-phone-icon.png",
tabletIcon: "img/app-tablet-icon.png",
launch: function () {
var mainPnl = Ext.create("IconsSample.view.MainPanel");
Ext.Viewport.add(mainPnl);
}
});
当以上的icon,phone icone三个属性都设置好后，在sencha touch中，就可以使用如下的代码进行设置大小和尺寸了：
icon = {
'57': phoneIcon || tabletIcon || icon,
'72': tabletIcon || phoneIcon || icon,
'114': phoneIcon || tabletIcon || icon,
'144': tabletIcon || phoneIcon || icon
};
}
从代码中可以看到，这里判断当用户设置了三种尺寸图片的图标后，分别设置在某个尺寸下优先设置三类图标的尺寸大小。比如在144×144 pixel的情况下，优先使用tabletIcon定义的图标，再使用phoeIcon的图标。
另外一种方法，能给用户最大的权利去定制图标，那就是在icon属性中分别设置指定尺寸的图片大小，如下代码：
name: "IconsSample",
views: ["MainPanel"],
icon: {
"57": "img/app-icon57.png",
"72":"img/app-icon72.png",
"114": "img/app-icon114.png",
"144": "img/app-icon144.png"
},
launch: function () {
var mainPnl = Ext.create("IconsSample.view.MainPanel");
Ext.Viewport.add(mainPnl);
}
});
无论是使用上面的哪种方式，Sencha touch 2将会检查icon的配置项，并且将适当的图标放置到页面的合适的地方，代码如下：
if (icon) {
var iconString = 'apple-touch-icon' + precomposed,
iconPath;
// 添加默认的按钮
addLink(iconString, icon['57'] || icon['72'] || icon['114'] || icon['144']);
// 在页面中添加每个按钮
for (iconPath in icon) {
addLink(iconString, icon[iconPath], iconPath + 'x' + iconPath);
}
}
更多关于sencha touch 2 框架的使用，请参考sencha touch 2的官方文档。
