[titanium]画像を使わずにボタンを表示

TitaniumMobileにはSystemButtonというのがあって、ローカルに画像を持っていなくても標準的アイコンのボタンを表示させることができる(iphone only)。

systembutton.png

でも例えば、ブラウザでよく見る左右の三角形、forward/backボタンはsystemButtonに存在しない。
デザイナさんと一緒にお仕事をしている人はいいのですけど、プログラマが適当に作ったアプリでは、こういうのを下手に描いたせいでデザインが素人っぽくなってしまったりする。著作権的なものには目をつぶって他のアプリからキャプチャするにしても、この程度の画像をいちいち切り出すのはめんどくさいよね。

そこで、文字コードを使ってそれらしい文字をtitleに指定してみた。

// Forward and back button for browser.
var buttonForward = Titanium.UI.createButton({
    title:String.fromCharCode(0x25b6)
});
var buttonBack = Titanium.UI.createButton({
    title:String.fromCharCode(0x25c0)
});
win.setToolbar([flexSpace,buttonBack,flexSpace,buttonStop,flexSpace,buttonReload,flexSpace,buttonForward,flexSpace]);  

browserbuttons.png
お、いい感じ。もしかしてもっと色々出来るかも?

// OK. more buttons!
var buttonApple = Titanium.UI.createButton({
    title:String.fromCharCode(0xf8ff)
});
var buttonCommand = Titanium.UI.createButton({
    title:String.fromCharCode(0x2318)
});
var buttonOption = Titanium.UI.createButton({
    title:String.fromCharCode(0x2325)
});
var buttonReturn = Titanium.UI.createButton({
    title:String.fromCharCode(0x23ce)
});
var buttonForward2 = Titanium.UI.createButton({
    title:String.fromCharCode(0x25c1)
});
var buttonBack2 = Titanium.UI.createButton({
    title:String.fromCharCode(0x25b7)
});
var buttonNote1 = Titanium.UI.createButton({
    title:String.fromCharCode(9833)
});
var buttonNote2 = Titanium.UI.createButton({
    title:String.fromCharCode(9834)
});
var buttonNote3 = Titanium.UI.createButton({
    title:String.fromCharCode(9835)
});
win.setToolbar([flexSpace,buttonForward2,buttonBack2,buttonApple,buttonCommand,buttonOption,buttonReturn,buttonNote1,buttonNote2,buttonNote3,flexSpace]);  

morebutton1.png
もうソースコードは省略するけど、こういうのも出せる。

morebutton2.png

WEBの世界では、エンドユーザーが持っているフォントにその文字がある保証がなかったり、フォントによってどんな文字が出るか予想ができないということで、こういう文字を使うのはご法度ということになっていた。
iPhoneアプリをTitaniumMobileで作るのであれば、クライアントのフォントは常に同じだから、かなりの数の記号を使うことができる。
残念ながらtoolbarにはフォントを指定できないみたいなので、toolbarに出せる文字はヒラギノで出せる範囲に限られるみたいだけど、labelとか普通のボタンだったら、font指定することで、もっと変な記号も出せるかもしれない。

文字と文字コードの関係を調べるには、下記サイトか、Mac標準の「文字ビューア」を見ればOK.

Androidは試してないのだけれど、原理的には同じようなことができるはず。
でもAndroidの場合、インストールされているフォントが保証されないから、機種によってボタンが見えなくなったりするリスクがあるかも。

テストアプリのソースコードは下記。もちろん、画像ファイルなんて不要です:-)

カテゴリ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: [titanium]画像を使わずにボタンを表示

このブログ記事に対するトラックバックURL: http://mogya.com/mt/mt-tb.cgi/1248

コメント(1)

mogya :

設定とかで使う歯車は #2699 で出るんだけど、何故か小さい。下記画像を使った方がいいかも。

Appcが提供する the Apache 2.0 licenseのアイコン集
http://developer.appcelerator.com/blog/2010/12/festivus-celebration-day-two-airing-of-grievances.html


コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、 もぎゃが 2011年9月 6日 16:12に書いたブログ記事です。

ひとつ前のブログ記事は「 松山秀太郎 ペーパーモデル展が超かっこよかった 」です。

次のブログ記事は「 [ti.devs.me] window.urlを使わないプログラミング 」です。

最近のコンテンツは インデックスページ で見られます。過去に書かれたものは アーカイブのページ で見られます。

Powered by
Movable Type