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

访问量: 1148

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

订阅/RSS Feed

Subscribe

分类/category