在《如何為IOS應用設計圖標》這一文中(地址：https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html)給出了很多設計圖標和按鈕的***實踐，比如建議為不同大小和分辨率的手機應用設計不同的圖標。Sencha Touch 2提供了在應用中的類中定義這些圖標的方法，這些圖標將會在iphone或者ipad應用中的主屏幕中出現(xiàn)。

其中文中提到了一些圖片大小的建議尺寸，如下：

對于iphone和iPod Touch(pixels為單位)，圖片大小為57*57

對于高分辨率的iphone和ipod Touch(pixels為單位)，圖片大小為 114 x 114

ipad(pixels為單位),圖片大小為72 x 72

高分辨率的iPad (pixels為單位): 144 x 144

下圖比較直觀地告訴開發(fā)者，不同大小的圖標在以上尺寸型號的設備中的大?。?/p>

在sencha touch 框架中，我們通過設置Application類中的三個屬性：icon, phoneIcon, 和tabletIcon，從而達到設置圖標大小的目的。其中icon的設置有兩種方式，首先是單一的一個參數(shù)的方式，這種方式中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  
    };  
} 

從代碼中可以看到，這里判斷當用戶設置了三種尺寸圖片的圖標后，分別設置在某個尺寸下優(yōu)先設置三類圖標的尺寸大小。比如在144×144 pixel的情況下，優(yōu)先使用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的配置項，并且將適當?shù)膱D標放置到頁面的合適的地方，代碼如下：

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的官方文檔。

【編輯推薦】

1. Sencha Touch 2正式版發(fā)布
2. Sencha Touch和jQuery Mobile開發(fā)過程對比
3. Sencha Touch 2.0官方指南：使用data包