在《如何为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);
- }
- });
这里，通过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);
- }
- });
当以上的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
- };
- }
从代码中可以看到，这里判断当用户设置了三种尺寸图片的图标后，分别设置在某个尺寸下优先设置三类图标的尺寸大小。比如在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);
- }
- });
无论是使用上面的哪种方式，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);
- }
- }
更多关于sencha touch 2 框架的使用，请参考sencha touch 2的官方文档。
【编辑推荐】
