Titanium Alloy の オレオレ app.tss テンプレート

プロトタイピング的にAlloyでViewをだーっと先に作る事あるじゃないですか。

別にFLINTOでもPOPでもいいんですけど、TitaniumerならAlloyで書いちゃった方が合理的なので。

そんな時は app/styles/app.tss に大体のテーマ的な何かを書いておいたりすると捗りますよね。

Alloy Styles and Themes - Titanium 3.X - Appcelerator Docs

別にプロトタイピングに限った話では無いですけれど、
個人的に app.tssに必ず書くやつのパターンみたいなのがあるので、纏めてみました。

まずは Window。特にiOSはNavigation BarやらStatus Barやら色々と組み合わせがあって面倒ですけど仕方ない。

'Window': {
	backgroundColor: '#ffffff', // 画面背景色
	barColor: "aqua", // ナビゲーションバーの背景色
	tintColor : "red", // 配下のViewの色合いに影響 (TextAreaのキャレット色とか)
	navTintColor : "blue", // 子Windowで戻るのクチバシの色とか
	translucent: false, // NavBarがうっすら透けて下のWindowのNavbarが見えちゃう時にはこれ
}
 
"Window[platform=ios]": {
    statusBarStyle: Ti.UI.iPhone.StatusBar.DEFAULT,
	titleAttributes:  { // NavBarのタイトルのスタイル
		color:'#fff',
		font: {
			fontFamily: "HiraKakuProN-W6", // ヒラギノ角ゴ bold
		},
	}
},

Androidはこちら。Window内にTextFieldとかがあるとOpen時にハイライトがあたってソフトキーボードが出ちゃうのを抑制したいので。

"Window[platform=android]": {
	windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_STATE_ALWAYS_HIDDEN
}
 
"TabGroup[platform=android]": {
	windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_STATE_ALWAYS_HIDDEN
}

Buttonはこちら。 iOS6だとコレを指定しないとデフォルトで角丸の枠有りなボタンになるので。
というかiOS8に対応したらもうiOS6はオワコンみたいなのでもう不要になりますけど。

"Button": {
	backgroundImage: ''
}

ImageViewはコレが無いと、リモートの画像とかがロードされるまで山の絵のやつが出てカッコ悪いので。

'ImageView': {
	defaultImage: ''
}

Androidのズームコントロールは隠したいです。

'ImageView[platform=android]': {
	enableZoomControls: false
}

TableViewとListViewの罫線は左までピッタリになって欲しいって言われる事が多いです。

"TableView[platform=ios]": {
	separatorInsets: {
		left: 0, right: 0
	}
}
 
"ListView[platform=ios]": {
	separatorInsets: {
		left: 0, right: 0
	}
}

あとLabelは色々書くこと多いんですけど、alignとかfontFamilyとかすぐスペル忘れちゃうのでリファレンスも兼ねて書いてます。

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
	verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER, 
	color: "#000",
	font: {
		fontSize: "14dp",
		fontFamily: "HiraKakuProN-W3", // ヒラギノ角ゴ normal
	}
}

gistに纏めてみました。気が向いたらブラッシュアップします。

app.tss template - Titanium Alloy