如何在Sencha Touch 2 中使用图标
发布网友
发布时间：2022-10-18 20:29
共1个回答
热心网友
时间：2023-11-27 23:06
对于高分辨率的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的官方文档。
