titanium 样式:适配不同平台 和 版本 (platform /version specified style in titanium)
适配不同的平台:
下面是个例子:
// 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 |