在《如何为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的什么位置，如下代码所示：
复制
Ext.application({ name: "IconsSample", views: ["MainPanel"], icon: "img/app-icon.png", launch: function () { var mainPnl = Ext.create("IconsSample.view.MainPanel"); Ext.Viewport.add(mainPnl); } });
1.
2.
3.
4.
5.
6.
7.
8.
9.
这里，通过icon属性指定使用了img目录下的app-icon.png这张图片。
此外，sencha touch也十分人性化，提供了phone icon和tablet icon,分别用来作为手机应用和平板应用时使用的图标，代码如下：
复制
Ext.application({ 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); } });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
当以上的icon,phone icone三个属性都设置好后，在sencha touch中，就可以使用如下的代码进行设置大小和尺寸了：
复制
if (Ext.isString(icon) || Ext.isString(phoneIcon) || Ext.isString(tabletIcon)) { icon = { '57': phoneIcon || tabletIcon || icon, '72': tabletIcon || phoneIcon || icon, '114': phoneIcon || tabletIcon || icon, '144': tabletIcon || phoneIcon || icon }; }
1.
2.
3.
4.
5.
6.
7.
8.
从代码中可以看到，这里判断当用户设置了三种尺寸图片的图标后，分别设置在某个尺寸下优先设置三类图标的尺寸大小。比如在144×144 pixel的情况下，优先使用tabletIcon定义的图标，再使用phoeIcon的图标。
另外一种方法，能给用户***的权利去定制图标，那就是在icon属性中分别设置指定尺寸的图片大小，如下代码：
复制
Ext.application({ 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); } });
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
无论是使用上面的哪种方式，Sencha touch 2将会检查icon的配置项，并且将适当的图标放置到页面的合适的地方，代码如下：
复制
precomposed = (Ext.os.is.iOS && config.glossOnIcon === false) ? '-precomposed' : ''; 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); } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
更多关于sencha touch 2 框架的使用，请参考sencha touch 2的官方文档。
【编辑推荐】