Back

titanium 样式：适配不同平台 和 版本 (platform /version specified style in titanium)

发布时间: 2015-01-21 22:43:00

refer to:  http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-Platform-SpecificStyles

适配不同的平台：

下面是个例子：

// 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 OR styles/app.tss with the [platform=<platform>] syntax
Global Style File in a Theme with Platform-Specific Styles	themes/<theme_name>/styles/<platform>/app.tss OR themes/<theme_name>/styles/app.tss with the [platform=<platform>] syntax
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 styles/<view_controller>.tss with the [platform=<platform>] syntax
View-Controller Style File in a Theme with Platform-Specific Styles	themes/<theme_name>/styles/<platform>/<view_controller>.tss OR themes/<theme_name>/styles/<view_controller>.tss with the platform attribute
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

Back