titanium 样式:适配不同平台 和 版本 (platform /version specified style in titanium)
访问量: 2787
适配不同的平台:
下面是个例子:
// Default label
"Label": {
backgroundColor: "#000",
text: 'BlackBerry or another platform'
},
// iPhone
"Label[platform=ios formFactor=handheld]": {
backgroundColor: "#f00",
text: 'iPhone'
},
// iPad and iPad mini
"Label[platform=ios formFactor=tablet]": {
backgroundColor: "#0f0",
text: 'iPad'
},
// blackberry and mobileweb
"Label[platform=blackberry,mobileweb]":{ text: 'blackberry and mobile web'},
// not ios
"Label[platform=!ios]":{text: "I am not ios!"}
具体规则是:
1. "Label"与"[platform" 之间,不能有空格!
2. platform 可选的值,是android, ios, blackberry, mobileweb
3. formFactor 表示作用于 phone(=handheld) 还是pad (=tablet),
4. 多个平台,可以使用 platform=android,ios
5. 如果不希望作用于某个平台,使用!, 例如: platform=!ios
适配不同的版本
主要通过“tss条件语句”来实现的。例如:
// Query styles "#info[if=Alloy.Globals.isIos7Plus]" : { font : { textStyle : Ti.UI.TEXT_STYLE_FOOTNOTE } }, "#title[if=Alloy.Globals.isIos7Plus]" : { top: '25dp', // compensate for the status bar on iOS 7 font : { textStyle : Ti.UI.TEXT_STYLE_HEADLINE } }, "#content[if=Alloy.Globals.isIos7Plus]" : { font : { textStyle : Ti.UI.TEXT_STYLE_CAPTION1 } }, "#content[if=Alloy.Globals.isIos6]": { font: { textStyle: TI.UI... }}, "ScrollView[if=Alloy.Globals.iPhoneTall]" : { height : '500dp' }
在 alloy.js中, 定义版本号:
Alloy.Globals.isIos7Plus = (OS_IOS && parseInt(Ti.Platform.version.split(".")[0]) >= 7); Alloy.Globals.iPhoneTall = (OS_IOS && Ti.Platform.osname == "iphone" && Ti.Platform.displayCaps.platformHeight == 568);
Theme (外观主题)
theme 可以针对外观做特别大的改动。比如,对于图片,会替换所有图片,对于样式:会覆盖所有现存的样式。
theme 的目录结构跟 app一样,比如,新建一个叫my_theme的主题,它的结构如下
app : assets: views: styles: themes: my_theme: assets: styles:
如何使用某个theme? 修改config.json 就可以。
{ "global": { "theme":"mytheme" }, "env:development": {}, "env:test": {}, "env:production": {}, "os:ios": { "theme":"green" // 对于IOS平台,使用green主题 }, "os:android": { "theme":"blue" // 对于android平台,使用blue主题 }, "dependencies": {} }
各个样式的优先级: 基本就是:
1. 全局 < 某主题 < 某平台(ios) < 某them下的某平台style
2. tss < xml inline style
下面是详细的说明(优先级越往下越高!)
Style Defined in the... |
Example |
Global Style File |
styles/app.tss |
Global Style File in a Theme |
themes/<theme_name>/styles/app.tss |
Global Style File with Platform-Specific Styles |
styles/<platform>/app.tss
|
Global Style File in a Theme with Platform-Specific Styles |
themes/<theme_name>/styles/<platform>/app.tss
|
View-Controller Style File |
styles/<view_controller>.tss |
View-Controller Style File in a Theme |
themes/<theme_name>/styles/<view_controller>.tss |
View-Controller Style File with Platform-Specific Styles |
styles/<platform>/<view_controller>.tss
OR
|
View-Controller Style File in a Theme with Platform-Specific Styles |
themes/<theme_name>/styles/<platform>/<view_controller>.tss
|
XML Markup |
views/<view_controller>.xml |
XML Markup with Platform-Specific Styles |
views/<platform>/<view_controller>.xml OR views/<view_controller>.xml with the platform attribute |