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

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

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

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

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

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

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

在sencha touch 框架中，我們通過(guò)設(shè)置Application類中的三個(gè)屬性：icon, phoneIcon, 和tabletIcon，從而達(dá)到設(shè)置圖標(biāo)大小的目的。其中icon的設(shè)置有兩種方式，首先是單一的一個(gè)參數(shù)的方式，這種方式中icon的屬性是接收一個(gè)表示圖片路徑的字符串，而無(wú)論應(yīng)用是安裝在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);  
    }  
}); 

這里，通過(guò)icon屬性指定使用了img目錄下的app-icon.png這張圖片。

此外，sencha touch也十分人性化，提供了phone icon和tablet icon,分別用來(lái)作為手機(jī)應(yīng)用和平板應(yīng)用時(shí)使用的圖標(biāo)，代碼如下：

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);  
    }  
}); 

當(dāng)以上的icon,phone icone三個(gè)屬性都設(shè)置好后，在sencha touch中，就可以使用如下的代碼進(jìn)行設(shè)置大小和尺寸了：

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  
    };  
} 

從代碼中可以看到，這里判斷當(dāng)用戶設(shè)置了三種尺寸圖片的圖標(biāo)后，分別設(shè)置在某個(gè)尺寸下優(yōu)先設(shè)置三類圖標(biāo)的尺寸大小。比如在144×144 pixel的情況下，優(yōu)先使用tabletIcon定義的圖標(biāo)，再使用phoeIcon的圖標(biāo)。

另外一種方法，能給用戶***的權(quán)利去定制圖標(biāo)，那就是在icon屬性中分別設(shè)置指定尺寸的圖片大小，如下代碼：

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);  
    }  
}); 

無(wú)論是使用上面的哪種方式，Sencha touch 2將會(huì)檢查icon的配置項(xiàng)，并且將適當(dāng)?shù)膱D標(biāo)放置到頁(yè)面的合適的地方，代碼如下：

precomposed = (Ext.os.is.iOS && config.glossOnIcon === false) ? '-precomposed' : '';  
if (icon) {  
    var iconString = 'apple-touch-icon' + precomposed,  
            iconPath;  
    // 添加默認(rèn)的按鈕  
    addLink(iconString, icon['57'] || icon['72'] || icon['114'] || icon['144']);  
    // 在頁(yè)面中添加每個(gè)按鈕  
    for (iconPath in icon) {  
        addLink(iconString, icon[iconPath], iconPath + 'x' + iconPath);  
    }  
} 

更多關(guān)于sencha touch 2 框架的使用，請(qǐng)參考sencha touch 2的官方文檔。

【編輯推薦】

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